☰

FFProgs

Adds MultiStream Vod Watching and a Button to view logs in xivanalysis also some minor improvements.

当前为 2022-04-12 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name                FFProgs
  3. // @name:en             FFProgs
  4. // @name:ja             FFプログレス
  5. // @namespace           k_fizzel
  6. // @version             1.0.0
  7. // @author              k_fizzel
  8. // @description         Adds MultiStream Vod Watching and a Button to view logs in xivanalysis also some minor improvements.
  9. // @description:en      Adds MultiStream VOD Watching and a Button to view logs in xivanalysis also some minor improvements.
  10. // @description:ja      マルチストリームVODウォッチングとxivanalysisでログを表示するためのボタンもいくつかのマイナーな改善を追加します。
  11. // @website             https://www.fflogs.com/character/id/12781922
  12. // @icon                https://assets.rpglogs.com/img/ff/favicon.png?v=2
  13. // @match               https://www.fflogs.com/*
  14. // @match               https://*.fflogs.com/*
  15. // @grant               GM_addStyle
  16. // @grant               unsafeWindow
  17. // @license             MIT License
  18. // ==/UserScript==
  19.  
  20. /*
  21. To Do:
  22. refactor code to make it look better pick a standard and use es6 functions and jquery
  23. right click a log in the encounters page to highlight with a specific color it so that it stands out
  24.  
  25. pause video when it gets to the end of a replay
  26. have global event listeners instead of a bunch of click ones
  27. make the video player stay in the same x y on log pull change
  28. Export current vod data so that you can import it
  29. when you share a twitch/youtube url make the timestamp the start
  30. make offset work with decimals
  31. Make youtube player work and private youtube streams as well
  32. github once I get to 1.0.0 with a readme on how to install delete this current git repo
  33.  
  34. Maybe:
  35. add keybindings
  36. make the player keep the same aspect ratio
  37. make player start at a larger size
  38. greasy fork pull from github for updates
  39.  
  40.  
  41.  */
  42. (function () {
  43.  
  44.   // Helper functions
  45.   function addGlobalEventListener(type, selector, callaBack) {
  46.     document.addEventListener(type, e => {
  47.       if (e.target.matches(selector)) callaBack(e);
  48.     })
  49.   }
  50.  
  51.   // Adblock.
  52.   $("#top-banner, #bottom-banner, #playwire-video-container, #patron-box, #gear-box-ad").remove();
  53.  
  54.   // Remove alt-text from item images. (Alt text looks awful when api is not up to date and relics )
  55.   $(".table-icon").removeAttr("alt");
  56.  
  57.   // Adds xivanalysis button.
  58.   const updateXIVAnalysisUrl = () => { $("#xivanalysis-tab").attr("href", `https://xivanalysis.com/report-redirect/${location.href}`); }
  59.   $("#filter-analyze-tab").before(`<a href="https://xivanalysis.com/report-redirect/${location.href}" target="_blank" class="big-tab view-type-tab" id="xivanalysis-tab"><span class="zmdi zmdi-time-interval"></span> <span class="big-tab-text"><br>xivanalysis</span></a>`)
  60.   $("#xivanalysis-tab").click(updateXIVAnalysisUrl);
  61.  
  62.   // Checks if video player button exists
  63.   const videoButton = document.querySelector(".replay-video");
  64.   if (/\/reports\/.+/.test(location.pathname)) {
  65.     const streams = {
  66.       // test data
  67.       "Chad_Bradly": { platform: 1, url: 'https://www.twitch.tv/videos/787291919?t=01h04m19s', offset: -1312 },
  68.       "Charlie_Cerise": { platform: 2, url: 'https://www.youtube.com/watch?v=d_BBgHPIlWg' },
  69.       "Gale_Eternia": { platform: 2, url: 'https://www.youtube.com/watch?v=d_BBgHPIlWg' },
  70.       "Glyphimor_Epsilon": { platform: 1, url: 'https://www.twitch.tv/videos/787291919?t=01h04m19s' },
  71.       "Kara_Doomfist": { platform: 2, url: 'https://www.youtube.com/watch?v=d_BBgHPIlWg' },
  72.       "M'aique_Delieur": { platform: 1, url: 'https://www.twitch.tv/videos/787291919?t=01h04m19s' },
  73.       "Nishi_Michu": { platform: 2, url: 'https://www.youtube.com/watch?v=d_BBgHPIlWg' },
  74.       "Pual_Pual": { platform: 1, url: 'https://www.twitch.tv/videos/787291919?t=01h04m19s' }
  75.     }
  76.     let person, videoFrame, videoPlayer, allowPlay = false, timesUpdate = 0, videPlayerOpen = false, multiStreamOpen = false, multiStreamMovement = false, isDragging = false;
  77.  
  78.     // iframe api's
  79.     const firstScriptTag = $("script")[0]
  80.     $(`<script src="https://player.twitch.tv/js/embed/v1.js"></script>
  81.     <script src="https://www.youtube.com/iframe_api"></script>`).insertBefore(firstScriptTag);
  82.  
  83.     // doesn't work with jquery LMAO
  84.     const interactModule = document.createElement("script");
  85.     interactModule.type = "module";
  86.     interactModule.innerHTML = `    
  87.     import interact from "https://cdn.interactjs.io/v1.10.11/interactjs/index.js";
  88.     interact("#video-frame").resizable({
  89.       edges: { left: true, right: true, bottom: true, top: true },
  90.       listeners: {
  91.         move (event) {
  92.           let target = event.target;
  93.           let x = (parseFloat(target.getAttribute("data-x")) || 0);
  94.           let y = (parseFloat(target.getAttribute("data-y")) || 0);
  95.  
  96.           target.style.width = event.rect.width + "px";
  97.           target.style.height = event.rect.height + "px";
  98.  
  99.           x += event.deltaRect.left;
  100.           y += event.deltaRect.top;
  101.  
  102.           target.style.transform = \`translate(\${x}px, \${y}px)\`;
  103.  
  104.           target.setAttribute("data-x", x);
  105.           target.setAttribute("data-y", y);
  106.         }
  107.       },
  108.       inertia: true,
  109.       
  110.       modifiers: [
  111.         interact.modifiers.aspectRatio({
  112.           // make sure the width is always double the height
  113.           ratio: 1.72,
  114.  
  115.           modifiers: [
  116.             interact.modifiers.restrictRect({ endOnly: true }),
  117.           ],
  118.         }),
  119.         interact.modifiers.restrictSize({
  120.           min: { width: 560, height: 337 }
  121.         })
  122.       ]
  123.     })
  124.     .draggable({
  125.       listeners: {
  126.         move (event) {
  127.           let target = event.target;
  128.           
  129.           let x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
  130.           let y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
  131.  
  132.           
  133.           target.style.transform = \`translate(\${x}px, \${y}px)\`;
  134.  
  135.           target.setAttribute("data-x", x);
  136.           target.setAttribute("data-y", y);
  137.         },
  138.       },
  139.       inertia: true,
  140.       modifiers: [
  141.         interact.modifiers.restrictRect({
  142.           restriction: "body",
  143.           endOnly: true
  144.         })
  145.       ]
  146.     })`;
  147.     firstScriptTag.parentNode.insertBefore(interactModule, firstScriptTag)
  148.  
  149.     // updates the position of the video to match the log
  150.     const updatePosition = () => {
  151.       const timeSinceFirstPull = parseInt(streams[person].offset) + ((unsafeWindow.replayPosition - unsafeWindow.fights[0].start_time) / 1000);
  152.       videoPlayer.seek(timeSinceFirstPull)
  153.     }
  154.  
  155.     // returns if the player is allows to play
  156.     const togglePlay = () => {
  157.       allowPlay = !allowPlay;
  158.       return !allowPlay;
  159.     }
  160.  
  161.     // make the log play button play the video
  162.     $("#play-button").attr("onclick", "toggleReplayState(this)").click((e) => {
  163.       if (videoPlayer.isPaused()) {
  164.         videoPlayer.play();
  165.         togglePlay();
  166.       } else {
  167.         videoPlayer.pause();
  168.         togglePlay();
  169.       }
  170.     });
  171.     // updates video when moving via the replay bar
  172.  
  173.     $("#graph").on("mousedown", (e) => {
  174.       if (e.type == "mousedown") {
  175.         isDragging = true;
  176.         updatePosition();
  177.       }
  178.     });
  179.     $("body").on("mousemove mouseup", (e) => {
  180.       if (videPlayerOpen && multiStreamOpen) {
  181.         if (e.type == "mouseup") {
  182.           if (isDragging) {
  183.             isDragging = false;
  184.             updatePosition();
  185.           }
  186.         }
  187.       }
  188.     })
  189.  
  190.     function stopLoading() {
  191.       const loading = document.getElementById("multistream-loading-icon")
  192.       if (loading) {
  193.         loading.outerHTML = "";
  194.       }
  195.  
  196.       const multistreamPlayer = document.getElementById("multistream_player");
  197.       multistreamPlayer.style.display = "block";
  198.     }
  199.  
  200.     function onTwitchPlayerReady() {
  201.       updatePosition();
  202.       videoPlayer.play()
  203.       stopLoading();
  204.     }
  205.  
  206.     function onTwitchPlayerEnded() {
  207.  
  208.     }
  209.     function onTwitchPlayerPlaying() {
  210.       if (!allowPlay) videoPlayer.pause()
  211.  
  212.     }
  213.     function onTwitchPlayerPause() {
  214.       if (allowPlay) videoPlayer.play()
  215.     }
  216.     function onTwitchPlayerSeek() {
  217.  
  218.     }
  219.  
  220.     function onYoutubePlayerReady(e) {
  221.       stopLoading();
  222.  
  223.     }
  224.  
  225.     function onYoutubePlayerStateChange(e) {
  226.       switch (e) {
  227.         case 0: //onYouTubePlayerEnded
  228.  
  229.           break;
  230.         case 1: //onYouTubePlayerPlaying
  231.  
  232.           break;
  233.         case 2: //onYouTubePlayerPaused
  234.  
  235.           break;
  236.         case 3: //onYouTubePlayerBuffering
  237.  
  238.           break;
  239.         case 5: //onYouTubePlayerVideoCued
  240.  
  241.           break;
  242.  
  243.         default:
  244.           break;
  245.       }
  246.     }
  247.  
  248.     function showMultiStreamPlayer() {
  249.       if ($("#video-frame").css("display") === "block") {
  250.         videoFrame = document.getElementById("video-frame-inner");
  251.         videoFrame.innerHTML = "<div style='text-align:center; margin-top:100px' id='multistream-loading-icon'><p>Loading Video...</p><p><img src='https://assets.rpglogs.com/img/spinny.gif'></p></div>";
  252.         let playerDiv = document.createElement("div");
  253.         playerDiv.id = "multistream_player";
  254.         videoFrame.innerHTML += playerDiv.outerHTML;
  255.         playerDiv = document.getElementById("multistream_player");
  256.         playerDiv.style = "width: 100%; height: 100%; display: none;";
  257.         // If noddy is selected play fist stream;
  258.  
  259.         const stream = streams[person];
  260.         const videoID = new URL(stream.url)
  261.         if (stream.platform === 1) {
  262.           videoPlayer = new Twitch.Player("multistream_player", {
  263.             width: "100%",
  264.             height: "100%",
  265.             autoplay: false,
  266.             muted: true,
  267.             video: videoID.pathname.split("/")[2],
  268.           });
  269.           videoPlayer.addEventListener(Twitch.Player.READY, onTwitchPlayerReady);
  270.  
  271.           videoPlayer.addEventListener(Twitch.Player.ENDED, onTwitchPlayerEnded);
  272.           videoPlayer.addEventListener(Twitch.Player.PLAYING, onTwitchPlayerPlaying);
  273.           videoPlayer.addEventListener(Twitch.Player.PAUSE, onTwitchPlayerPause);
  274.           videoPlayer.addEventListener(Twitch.Player.SEEK, onTwitchPlayerSeek);
  275.         }
  276.  
  277.  
  278.         if (stream.platform === 2) {
  279.           videoPlayer = new YT.Player("multistream_player", {
  280.             height: "100%",
  281.             width: "100%",
  282.             videoId: videoID.searchParams.get("v"),
  283.             playerVars: {
  284.               controls: 0
  285.             }
  286.           })
  287.           videoPlayer.addEventListener("onReady", onYoutubePlayerReady);
  288.           videoPlayer.addEventListener("onStateChange", onYoutubePlayerStateChange);
  289.         }
  290.       }
  291.  
  292.     }
  293.  
  294.     function toggleMultiStreamPlayer() {
  295.       multiStreamOpen = !multiStreamOpen
  296.  
  297.       updateMultistreamButton()
  298.       if (multiStreamOpen) {
  299.         showMultiStreamPlayer()
  300.       }
  301.     }
  302.  
  303.     function updateMultistreamButton() {
  304.       const multiStreamViewButton = document.getElementById("multistream-view")
  305.       if (multiStreamOpen) {
  306.         multiStreamViewButton.style.backgroundColor = "#000060"
  307.       } else {
  308.         multiStreamViewButton.style.backgroundColor = ""
  309.       }
  310.     }
  311.  
  312.     function showMultistreamOptions() {
  313.       if (multiStreamOpen) {
  314.         toggleMultiStreamPlayer()
  315.       }
  316.       videoFrame = document.getElementById("video-frame-inner");
  317.       addGlobalEventListener("input", ".url-table-row", (e) => {
  318.         const [user, action] = e.target.id.split("-");
  319.         const value = e.target.value;
  320.         if (action === "stream_url") {
  321.           let url, platform;
  322.           let err = false;
  323.           try {
  324.             url = new URL(value);
  325.             if (url.hostname === "www.twitch.tv" && url.pathname.match(/\/videos\/\d+/g)) {
  326.               platform = 1;
  327.             } else if (url.hostname === "www.youtube.com" && url.pathname === "/watch" && url.searchParams.get("v")) {
  328.               platform = 2;
  329.             } else {
  330.               throw "not a valid platform"
  331.             }
  332.           }
  333.           catch (error) {
  334.             if (streams[user]) {
  335.               delete streams[user];
  336.             }
  337.             if (error) err = true;
  338.           }
  339.           finally {
  340.             if (!err) {
  341.               if (!streams[user]) streams[user] = {};
  342.               streams[user].platform = platform;
  343.               streams[user].url = url.href;
  344.             }
  345.           }
  346.         }
  347.         if (action === "stream_offset") {
  348.           if (streams[user] && streams[user].url) {
  349.             let offset = parseInt(value);
  350.             streams[user].offset = offset;
  351.           }
  352.         }
  353.       })
  354.  
  355.       const div = document.createElement("div");
  356.       div.style = "text-align: center;";
  357.  
  358.       const form = document.createElement("form");
  359.  
  360.       form.style = "margin: 0;";
  361.       form.acceptCharset = "utf-8";
  362.       form.method = "GET";
  363.       form.action = "javascript:void(0);";
  364.  
  365.       const table = document.createElement("table");
  366.       table.style = "border-collapse: separate; border-spacing: 8px; margin: auto; text-align: left;";
  367.  
  368.       //Table Information
  369.       const infoRow = document.createElement("tr");
  370.       const nameInfo = document.createElement("td");
  371.       const URLInfo = document.createElement("td");
  372.       const offsetInfo = document.createElement("td");
  373.       nameInfo.innerHTML = "Name:";
  374.       URLInfo.innerHTML = "Stream URL:";
  375.       offsetInfo.innerHTML = "Offset:";
  376.       offsetInfo.style = "max-width: 60px;";
  377.  
  378.       infoRow.append(nameInfo, URLInfo, offsetInfo);
  379.       table.appendChild(infoRow);
  380.  
  381.       const raidFrames = document.querySelectorAll(".raid-frame-contents");
  382.       const raiders = [];
  383.       raidFrames.forEach((frame) => {
  384.         raiders.push(frame.innerHTML);
  385.       })
  386.  
  387.       raiders.forEach((person) => {
  388.         person = person.replace(" ", "_");
  389.  
  390.         const tableRow = document.createElement("tr");
  391.         const nameData = document.createElement("td");
  392.         nameData.innerHTML = person;
  393.         tableRow.appendChild(nameData);
  394.         const streamData = document.createElement("td");
  395.         const streamUrl = document.createElement("input");
  396.         streamUrl.style = "min-width: 260px;"
  397.         streamUrl.type = "url";
  398.         streamUrl.id = `${person}-stream_url`;
  399.         streamUrl.name = `${person}-stream_url`;
  400.         streamUrl.placeholder = "youtube.com/watch?v= or twitch.tv/videos/";
  401.         if (streams[person] && streams[person].url) {
  402.           streamUrl.setAttribute("value", streams[person].url);
  403.         }
  404.         streamUrl.classList.add("url-table-row");
  405.         streamData.appendChild(streamUrl);
  406.         tableRow.appendChild(streamData);
  407.  
  408.         const offsetData = document.createElement("td");
  409.         const offsetTime = document.createElement("input");
  410.         offsetTime.type = "number";
  411.         offsetTime.style = "width: 5em;";
  412.         offsetTime.id = `${person}-stream_offset`;
  413.         offsetTime.name = `${person}-stream_offset`;
  414.         offsetTime.placeholder = "# in sec";
  415.         if (streams[person] && streams[person].offset) {
  416.           offsetTime.setAttribute("value", streams[person].offset)
  417.         }
  418.         offsetTime.classList.add("url-table-row");
  419.  
  420.         offsetData.appendChild(offsetTime);
  421.         tableRow.appendChild(offsetData);
  422.  
  423.         table.appendChild(tableRow);
  424.       })
  425.  
  426.       form.appendChild(table);
  427.       div.appendChild(form);
  428.       videoFrame.innerHTML = div.outerHTML;
  429.     }
  430.  
  431.     function toggleMultiStreamMove() {
  432.       multiStreamMovement = !multiStreamMovement;
  433.       const frameInner = document.getElementById("video-frame-inner");
  434.       const resizeButton = document.getElementById("multistream-resize");
  435.       if (multiStreamMovement) {
  436.         resizeButton.style.backgroundColor = "#000060"
  437.         frameInner.style.pointerEvents = "none"
  438.       } else {
  439.         resizeButton.style.backgroundColor = ""
  440.         frameInner.style.pointerEvents = ""
  441.       }
  442.     }
  443.     let prvPerson;
  444.     document.addEventListener("click", (e) => {
  445.       let selected = document.querySelector(".raid-frame.selected .raid-frame-contents");
  446.       (selected) ? person = selected.innerHTML.replace(" ", "_") : person = Object.keys(streams)[0];
  447.       if (prvPerson !== person) {
  448.         if (multiStreamOpen) {
  449.           showMultiStreamPlayer();
  450.         }
  451.       }
  452.       prvPerson = person;
  453.     })
  454.  
  455.     const positionGraph = document.getElementById("position-graph");
  456.     const observer = new MutationObserver(function () {
  457.       timesUpdate++;
  458.  
  459.       if (timesUpdate > 2) {
  460.         if (!positionGraph.style.opacity) {
  461.           const videoButton = document.querySelector(".replay-video");
  462.           if (videPlayerOpen) {
  463.             allowPlay = false;
  464.             videoButton.click()
  465.             videoButton.click()
  466.             updateMultistreamButton()
  467.             toggleMultiStreamMove()
  468.             toggleMultiStreamMove()
  469.           }
  470.         }
  471.       }
  472.     });
  473.     observer.observe(positionGraph, { attributes: true });
  474.  
  475.     videoButton.addEventListener("click", (e) => {
  476.       $("#fullscreen-video, #remove-video, #select-video, #mute-video").remove();
  477.  
  478.       const frame = document.getElementById("video-frame");
  479.       frame.style.touchAction = "none";
  480.       frame.style.boxSizing = "border-box"
  481.  
  482.  
  483.       videoFrame = document.getElementById("video-frame-inner");
  484.       videPlayerOpen = !videPlayerOpen
  485.       if (multiStreamOpen) {
  486.         setTimeout(showMultiStreamPlayer, 500)
  487.       }
  488.       // Creates Menu Below Video Player
  489.       const multiStreamOptions = document.getElementById("multistream-options");
  490.       if (!multiStreamOptions) {
  491.  
  492.         const videoFrameControls = document.getElementById("video-frame-controls");
  493.         videoFrameControls.style.cursor = "ns-resize"
  494.         const multiStreamO = document.createElement("span");
  495.         multiStreamO.style = "float: right; cursor: pointer;";
  496.         multiStreamO.id = "multistream-options";
  497.         multiStreamO.classList.add("graph-legend-button");
  498.         multiStreamO.onclick = showMultistreamOptions;
  499.         multiStreamO.innerText = "Multistream options"
  500.         videoFrameControls.appendChild(multiStreamO);
  501.  
  502.         const multiStreamV = document.createElement("span");
  503.         multiStreamV.style = "margin-right: -1px; float: right; cursor: pointer;";
  504.         multiStreamV.id = "multistream-view";
  505.         multiStreamV.classList.add("graph-legend-button");
  506.         multiStreamV.onclick = toggleMultiStreamPlayer;
  507.         multiStreamV.innerText = "Multistream View";
  508.         videoFrameControls.appendChild(multiStreamV);
  509.  
  510.         const resizeButton = document.createElement("span");
  511.         resizeButton.style = "float: left; cursor: pointer;";
  512.         resizeButton.id = "multistream-resize";
  513.         resizeButton.classList.add("graph-legend-button");
  514.         resizeButton.onclick = toggleMultiStreamMove;
  515.         resizeButton.innerText = "Resize/Move";
  516.         videoFrameControls.appendChild(resizeButton);
  517.       }
  518.     })
  519.   }
  520.  
  521.   // Checks if it's Chad Bradly's profile.
  522.   if (/\/character\/id\/12781922/.test(location.pathname)) {
  523.     // GIGACHAD
  524.     $("#character-portrait-image").attr("src", "https://c.tenor.com/epNMHGvRyHcAAAAd/gigachad-chad.gif");
  525.  
  526.     // Adds custom banner background to my page.
  527.     $("#portrait-and-basics, #character-header-customize-action-box, #update-box").addClass("slightly-transparent-box");
  528.     $("#character-portrait-box").css("background-image", "url(\"https://i.imgur.com/dbwqHIt.png\")").addClass("with-banner");
  529.   }
  530. })();