v1.7.14/release

app/src/Api.js

@@ -28,6 +28,7 @@ export const PLAYER_SOURCE = {
   PRIMEVIDEO: "primevideo.",
   HULU: "hulu.",
   DISNEY: "disneyplus.",
+  YOUTUBETV: "tv.youtube.",
   YOUTUBE: "youtube.",
   HBONOW: "hbonow.",
   HBOMAX: "hbomax.",
@@ -45,6 +46,7 @@ export const PLAYER_SOURCE = {
   DAILYMOTION: "dailymotion.",
   IMDB: "imdb.",
   PARAMOUNTPLUS: "paramountplus.",
+  STARZ: "starz.",
   LOCAL: "localhost",
 };
 
@@ -56,6 +58,7 @@ export const getPlayerSource = () => {
   if (HREF.includes(PLAYER_SOURCE.PRIMEVIDEO)) return PLAYER_SOURCE.AMAZON;
   if (HREF.includes(PLAYER_SOURCE.IMDB)) return PLAYER_SOURCE.AMAZON;
   if (HREF.includes(PLAYER_SOURCE.DISNEY)) return PLAYER_SOURCE.DISNEY;
+  if (HREF.includes(PLAYER_SOURCE.YOUTUBETV)) return PLAYER_SOURCE.YOUTUBETV;
   if (HREF.includes(PLAYER_SOURCE.YOUTUBE)) return PLAYER_SOURCE.YOUTUBE;
   if (HREF.includes(PLAYER_SOURCE.HBONOW)) return PLAYER_SOURCE.HBONOW;
   if (HREF.includes(PLAYER_SOURCE.HBOMAX)) return PLAYER_SOURCE.HBOMAX;
@@ -75,6 +78,7 @@ export const getPlayerSource = () => {
   if (HREF.includes(PLAYER_SOURCE.DAILYMOTION))
     return PLAYER_SOURCE.DAILYMOTION;
   if (HREF.includes(PLAYER_SOURCE.PARAMOUNTPLUS)) return PLAYER_SOURCE.PARAMOUNTPLUS;
+  if (HREF.includes(PLAYER_SOURCE.STARZ)) return PLAYER_SOURCE.STARZ;
   if (HREF.includes(PLAYER_SOURCE.LOCAL)) return PLAYER_SOURCE.LOCAL;
 };
 

app/src/App.js

@@ -32,7 +32,7 @@ import {
 } from "./Api";
 import Tutorial from "./Tutorial";
 
-const APP_VERSION = "1.7.13";
+const APP_VERSION = "1.7.14";
 
 const darkTheme = createMuiTheme({
   palette: {

app/src/Chat.js

@@ -72,6 +72,8 @@ import {
   CancelRounded,
   VideocamRounded,
   VideocamOffRounded,
+  Remove,
+  Add,
 } from "@material-ui/icons";
 import Create from "./Create";
 import { goTo } from "route-lite";
@@ -120,6 +122,7 @@ export default class Chat extends Component {
       selectedAudioOutput: "",
       videoInputs: [],
       selectedVideoInput: "",
+      minimized: false,
     };
     this.port = null;
     this.gifClick = this.gifClick.bind(this);
@@ -143,9 +146,8 @@ export default class Chat extends Component {
     );
     this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
     this.updateAllowAutoFollow = this.updateAllowAutoFollow.bind(this);
-    this.updateAllowChatNotification = this.updateAllowChatNotification.bind(
-      this
-    );
+    this.updateAllowChatNotification =
+      this.updateAllowChatNotification.bind(this);
     this.mCallManager = new CallManager(
       this.callEventListener,
       this.props.notify
@@ -602,6 +604,7 @@ export default class Chat extends Component {
       selectedAudioOutput,
       videoInputs,
       selectedVideoInput,
+      minimized,
     } = this.state;
     const { status } = this.props;
     const { callEnabled } = status;
@@ -654,6 +657,23 @@ export default class Chat extends Component {
                   {name}
                 </Typography>
               </div>
+              <div>
+                <Tooltip
+                  title={
+                    minimized ? "Expand Show Details" : "Minimize Show Details"
+                  }
+                >
+                  <IconButton
+                    onClickCapture={(ev) => {
+                      this.setState({ minimized: !minimized });
+                      ev.preventDefault();
+                      ev.stopPropagation();
+                    }}
+                  >
+                    {minimized ? <Add /> : <Remove />}
+                  </IconButton>
+                </Tooltip>
+              </div>
             </ExpansionPanelSummary>
             <ExpansionPanelDetails>
               <TextField
@@ -905,7 +925,7 @@ export default class Chat extends Component {
               )}
             </ExpansionPanelDetails>
           </ExpansionPanel>
-          {player ? (
+          {!minimized && player ? (
             <Card elevation={0} className="media-info-card">
               {player.showName &&
               player.status !== PLAYER_STATUS.NOT_PLAYING ? (
@@ -1047,9 +1067,15 @@ export default class Chat extends Component {
                     ? () => this.handleVideo()
                     : () => this.handlePhoneCall(true)
                 }
-                color={((onCall && usingVideo) || !onCall) ? "secondary" : "primary"}
+                color={
+                  (onCall && usingVideo) || !onCall ? "secondary" : "primary"
+                }
               >
-                {((onCall && usingVideo) || !onCall)? <VideocamRounded /> : <VideocamOffRounded />}
+                {(onCall && usingVideo) || !onCall ? (
+                  <VideocamRounded />
+                ) : (
+                  <VideocamOffRounded />
+                )}
               </IconButton>
             </Tooltip>
           )}

app/src/Thread.css

@@ -115,11 +115,12 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   align-items: center;
   line-height: 16px;
   font-size: 13px;
-  font-weight: 100;
   font-family: "Roboto";
   letter-spacing: 1.5px;
   white-space: break-spaces;
   word-break: break-all;
+  color: white;
+  font-weight: 400;
 }
 .thread-message img {
   max-width: 55%;

app/src/VideoListener.js

@@ -86,6 +86,7 @@ export default class VideoListener {
         switch (this.video.source) {
           case PLAYER_SOURCE.CRUNCHYROLL:
           case PLAYER_SOURCE.FUNIMATION:
+          case PLAYER_SOURCE.STARZ:
             window.removeEventListener("watchParty", this.crunchyRollListener);
             break;
           default:
@@ -138,12 +139,14 @@ export default class VideoListener {
             case PLAYER_SOURCE.DAILYMOTION:
             case PLAYER_SOURCE.PARAMOUNTPLUS:
             case PLAYER_SOURCE.PEACOCK:
+            case PLAYER_SOURCE.YOUTUBETV:
               this.video.element.currentTime = serverPlayer.time;
               await this.timeout(500);
               break;
             case PLAYER_SOURCE.CRUNCHYROLL:
             case PLAYER_SOURCE.FUNIMATION:
             case PLAYER_SOURCE.ROOSTERTEETH:
+            case PLAYER_SOURCE.STARZ:
               window.postMessage(
                 JSON.stringify({
                   watchPartyDirection: "TO_SCRIPT",
@@ -161,7 +164,8 @@ export default class VideoListener {
         if (
           PLAYER_SOURCE.CRUNCHYROLL === this.video.source ||
           PLAYER_SOURCE.FUNIMATION === this.video.source ||
-          PLAYER_SOURCE.ROOSTERTEETH === this.video.source
+          PLAYER_SOURCE.ROOSTERTEETH === this.video.source ||
+          PLAYER_SOURCE.STARZ === this.video.source
         ) {
           window.postMessage(
             JSON.stringify({
@@ -208,6 +212,7 @@ export default class VideoListener {
         switch (this.video.source) {
           case PLAYER_SOURCE.CRUNCHYROLL:
           case PLAYER_SOURCE.FUNIMATION:
+          case PLAYER_SOURCE.STARZ:
             window.addEventListener("watchParty", this.crunchyRollListener);
             break;
           default:
@@ -254,16 +259,14 @@ export default class VideoListener {
             "amp-video-player-internal"
           );
           if (appleTvInternal) {
-            const appleTvVideoContainer = appleTvInternal.shadowRoot.querySelector(
-              "amp-video-player"
-            );
+            const appleTvVideoContainer =
+              appleTvInternal.shadowRoot.querySelector("amp-video-player");
             if (appleTvVideoContainer) {
               const appleTvShowContainer = appleTvVideoContainer.querySelector(
                 nS.show
               );
-              const appleTvEpisodeContainer = appleTvVideoContainer.querySelector(
-                nS.episode
-              );
+              const appleTvEpisodeContainer =
+                appleTvVideoContainer.querySelector(nS.episode);
               const appleTvShow = appleTvShowContainer
                 ? appleTvShowContainer.innerText
                 : "";
@@ -344,6 +347,7 @@ export default class VideoListener {
     switch (this.video.source) {
       case PLAYER_SOURCE.CRUNCHYROLL:
       case PLAYER_SOURCE.FUNIMATION:
+      case PLAYER_SOURCE.STARZ:
         window.postMessage(
           JSON.stringify({
             watchPartyDirection: "TO_SCRIPT",
@@ -408,7 +412,7 @@ export default class VideoListener {
             hve !== undefined &&
             (this.video.element !== hve || this.video.element === null)
           ) {
-            hve.classList.add('hbo-player');
+            hve.classList.add("hbo-player");
             this.firstTimeSync(hve);
           }
         }, 1000);
@@ -438,6 +442,61 @@ export default class VideoListener {
         }, 1000);
         break;
       case PLAYER_SOURCE.CRUNCHYROLL:
+        var sendToWatchPartyApp = function (pS, pT) {
+            var customWatchPartyEvent = new CustomEvent("watchParty", {
+              detail: {
+                watchPartyDirection: "TO_APP",
+                type: "WATCH_PARTY_PLAYER_UPDATE",
+                status: pS,
+                time: pT,
+              },
+            });
+            window.dispatchEvent(customWatchPartyEvent);
+          },
+          watchPartyGetTimeAndSend = function (pS) {
+            if (window.VILOS_PLAYERJS) {
+              window.VILOS_PLAYERJS.getCurrentTime(function (pT) {
+                sendToWatchPartyApp(pS, pT);
+              });
+            }
+          },
+          watchPartySendPlaying = function () {
+            watchPartyGetTimeAndSend("PLAYING");
+          },
+          watchPartySendPaused = function () {
+            watchPartyGetTimeAndSend("PAUSED");
+          },
+          watchPartyInteraction = function (e) {
+            if (e.source === window) {
+              const data = JSON.parse(e.data);
+              if (data.watchPartyDirection === "TO_SCRIPT") {
+                if (data.type === "WATCH_PARTY_ADD_LISTENERS") {
+                  if (window.VILOS_PLAYERJS) {
+                    window.VILOS_PLAYERJS.on(
+                      "play",
+                      watchPartySendPlaying,
+                      "player.js"
+                    );
+                    window.VILOS_PLAYERJS.on(
+                      "pause",
+                      watchPartySendPaused,
+                      "player.js"
+                    );
+                  }
+                } else if (data.type === "WATCH_PARTY_SEEK") {
+                  if (window.VILOS_PLAYERJS) {
+                    window.VILOS_PLAYERJS.setCurrentTime(data.time);
+                  }
+                } else if (data.type === "WATCH_PARTY_STATUS") {
+                  if (window.VILOS_PLAYERJS) {
+                    if (data.status === "PAUSED") window.VILOS_PLAYERJS.pause();
+                    if (data.status === "PLAYING") window.VILOS_PLAYERJS.play();
+                  }
+                }
+              }
+            }
+          };
+        window.addEventListener("message", watchPartyInteraction);
         const crunchyRollInject = `var sendToWatchPartyApp = function(pS, pT) { var customWatchPartyEvent = new CustomEvent('watchParty', { detail: { watchPartyDirection: 'TO_APP', type: 'WATCH_PARTY_PLAYER_UPDATE', status: pS, time: pT } }); window.dispatchEvent(customWatchPartyEvent); }, watchPartyGetTimeAndSend = function(pS) { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.getCurrentTime(function(pT) { sendToWatchPartyApp(pS, pT); }); } }, watchPartySendPlaying = function() { watchPartyGetTimeAndSend('PLAYING'); }, watchPartySendPaused = function() { watchPartyGetTimeAndSend('PAUSED'); }, watchPartyInteraction = function(e) { if (e.source === window) { const data = JSON.parse(e.data); if (data.watchPartyDirection === 'TO_SCRIPT') { if (data.type === 'WATCH_PARTY_ADD_LISTENERS') { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.on('play', watchPartySendPlaying, 'player.js'); window.VILOS_PLAYERJS.on('pause', watchPartySendPaused, 'player.js'); } } else if (data.type === 'WATCH_PARTY_SEEK') { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.setCurrentTime(data.time); } } else if (data.type === 'WATCH_PARTY_STATUS') { if (window.VILOS_PLAYERJS) { if (data.status === 'PAUSED') window.VILOS_PLAYERJS.pause(); if (data.status === 'PLAYING') window.VILOS_PLAYERJS.play(); } } } } }; window.addEventListener("message", watchPartyInteraction);`;
         const crunchyRollInjectScript = document.createElement("script");
         crunchyRollInjectScript.text = crunchyRollInject;
@@ -518,6 +577,21 @@ export default class VideoListener {
           }
         }, 1000);
         break;
+      case PLAYER_SOURCE.STARZ:
+        const starzInject = `var sendToWatchPartyApp=function(pS,pT){var customWatchPartyEvent=new CustomEvent("watchParty",{detail:{watchPartyDirection:"TO_APP",type:"WATCH_PARTY_PLAYER_UPDATE",status:pS,time:pT,},});window.dispatchEvent(customWatchPartyEvent)},watchPartyGetTimeAndSend=function(pS){const player=document.querySelector("${vS}");if(player){const playerNode=player.parentNode;if(playerNode){sendToWatchPartyApp(pS,playerNode.player.getCurrentTime())}}},watchPartySendPlaying=function(){watchPartyGetTimeAndSend("PLAYING")},watchPartySendPaused=function(){watchPartyGetTimeAndSend("PAUSED")},watchPartyInteraction=function(e){const data=JSON.parse(e.data);const player=document.querySelector("${vS}");if(player){const playerNode=player.parentNode;if(playerNode.player){if(data.watchPartyDirection==="TO_SCRIPT"){if(data.type==="WATCH_PARTY_SEEK"){playerNode.player.seek(data.time)}else if(data.type==="WATCH_PARTY_STATUS"){if(data.status==="PAUSED"){playerNode.player.pause()}if(data.status==="PLAYING"){playerNode.player.play()}}else if(data.type==="WATCH_PARTY_ADD_LISTENERS"){playerNode.player.on("playing",watchPartySendPlaying);playerNode.player.on("paused",watchPartySendPaused)}}}}};window.addEventListener("message",watchPartyInteraction);`;
+        const starzInjectScript = document.createElement("script");
+        starzInjectScript.text = starzInject;
+        document.head.appendChild(starzInjectScript);
+        setInterval(() => {
+          var sve = document.querySelector(vS);
+          if (
+            sve !== null &&
+            (this.video.element !== sve || this.video.element === null)
+          ) {
+            this.firstTimeSync(sve);
+          }
+        }, 1000);
+        break;
       case PLAYER_SOURCE.STAN:
       case PLAYER_SOURCE.HOTSTAR:
       case PLAYER_SOURCE.VIKI:
@@ -528,6 +602,7 @@ export default class VideoListener {
       case PLAYER_SOURCE.VIMEO:
       case PLAYER_SOURCE.DAILYMOTION:
       case PLAYER_SOURCE.PARAMOUNTPLUS:
+      case PLAYER_SOURCE.YOUTUBETV:
         setInterval(() => {
           var newVideoElement = document.querySelector(vS);
           if (

app/src/index.css

@@ -35,7 +35,7 @@ body.visible {
 body.visible .watch-party-fab {
   right: var(--party-width) !important;
   transform: translateX(0);
-  top: 22.5px !important;
+  top: 6.11px !important;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   background-color: #424242 !important;
@@ -72,7 +72,9 @@ body.disney.visible #hudson-wrapper, /* DISNEY */
 body.youtube.visible #content.ytd-app, /* YOUTUBE */
 body.youtube.visible #masthead-container, /* YOUTUBE HEADER */
 body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td, /* GOOGLE PLAY MOVIES */
-body.viki.visible div.video-player /* VIKI */ {
+body.viki.visible div.video-player, /* VIKI */
+body.starz.visible starz-play,
+body.youtubetv.visible ytu-app-vessel /* STARZ */ {
   max-width: var(--body-width) !important;
 }
 
@@ -131,6 +133,10 @@ body.youtube.visible ytd-miniplayer {
   right: calc(var(--party-width) + 20px);
 }
 /* AMAZON STYLING FIX */
+body.amazon-prime,
+body.amazon-prime.visible {
+    background-color: initial !important;
+}
 body.amazon-prime #party-routes-wrapper input,
 body.amazon-prime #party-routes-wrapper textarea {
   border: initial !important;
@@ -154,6 +160,9 @@ body.amazon-prime textarea:focus {
 body.amazon-prime #pv-nav {
   max-width: var(--body-width);
 }
+body.amazon-prime #party_wrapper input {
+    background: initial !important;
+}
 /* PEACOCK STYLING FIX */
 body.peacock.visible .header-buttons {
   max-width: calc(100% - calc(var(--party-width) + 50px));
@@ -237,6 +246,10 @@ body.crunchyroll.visible #showmedia_video_player {
 body.crunchyroll.visible #vilos-player {
   max-height: 42vw !important;
 }
+body.crunchyroll,
+body.crunchyroll.visible {
+    background-color: #f2f2f2 !important;
+}
 /* APPLE TV STYLING */
 body.apple .thread-wrapper .ReactVirtualized__Grid__innerScrollContainer {
   box-sizing: initial !important;
@@ -374,6 +387,27 @@ body.visible.imdb-tv .freedive-video-container .freedive-video-modal.modal__open
 body.visible.paramountplus header {
   max-width: var(--body-width);
 }
+/* STARZ FIXES */
+body.visible.starz .overlay.overlay-open {
+  max-width: var(--body-width);
+  right: unset;
+}
+body.starz starz-player {
+  bottom: 0;
+}
+body.visible.starz starz-player {
+  max-width: 100%;
+}
+body.visible.starz #party-routes-wrapper input,
+body.visible.starz #party-routes-wrapper textarea {
+  border: initial !important;
+  box-shadow: none !important;
+  background: initial !important;
+  height: initial !important;
+}
+body.visible.youtubetv .content-container.ytu-browse-dialog {
+  max-width: var(--body-width);
+}
 
 #party-loading {
   position: absolute;

app/src/index.js

@@ -75,6 +75,9 @@ switch (getPlayerSource()) {
   case PLAYER_SOURCE.DISNEY:
     document.body.classList.add("disney");
     break;
+  case PLAYER_SOURCE.YOUTUBETV:
+    document.body.classList.add("youtubetv");
+    break;
   case PLAYER_SOURCE.YOUTUBE:
     document.body.classList.add("youtube");
     break;
@@ -179,6 +182,21 @@ switch (getPlayerSource()) {
       { capture: true }
     );
     break;
+  case PLAYER_SOURCE.STARZ:
+    document.addEventListener(
+      "keydown",
+      (ev) => {
+        if (ev.target.tagName !== "INPUT" || ev.target.tagName !== "TEXTAREA") {
+          ev.stopImmediatePropagation();
+          ev.stopPropagation();
+        } else {
+          ev.target.focus();
+        }
+      },
+      { capture: true }
+    );
+    document.body.classList.add("starz");
+    break;
   case PLAYER_SOURCE.LOCAL:
     document.body.classList.add("local");
     break;