v1.3.3-beta/UI fixes

app/src/Chat.js

@@ -41,12 +41,18 @@ import { goTo } from 'route-lite';
 import Create from './Create';
 import VideoListener from './VideoListener';
 import CallManager from './CallManager';
-import { MoreVert, PauseCircleFilled, LinkOutlined, PlayCircleFilled } from '@material-ui/icons';
+import {
+  MoreVert,
+  PauseCircleFilled,
+  LinkOutlined,
+  PlayCircleFilled,
+  Cancel,
+} from '@material-ui/icons';
 
 const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
 const alertMessage = {
   name: '<alert>',
-  text: 'Functionality may be buggy, support on this site is in beta.',
+  text: 'Functionality may be buggy, support on this site is in testing.',
   time: '',
   uid: '<system>',
 };
@@ -392,7 +398,13 @@ export default class Chat extends Component {
             rowsMax="3"
             size="small"
             placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
-            helperText={this.state.newMessage && !this.state.gif ? 'Enter to send' : null}
+            helperText={
+              this.state.newMessage && !this.state.gif
+                ? 'Enter to send'
+                : this.state.gif
+                ? 'Click on gif to send'
+                : null
+            }
             variant="outlined"
             className="chat-message-box addFocus"
             value={newMessage}
@@ -422,7 +434,7 @@ export default class Chat extends Component {
               startAdornment: (
                 <InputAdornment position="start">
                   <IconButton onClick={() => this.setState({ gif: !gif })} edge="start">
-                    <Gif />
+                    {gif ? <Cancel /> : <Gif />}
                   </IconButton>
                 </InputAdornment>
               ),

app/src/Thread.css

@@ -38,6 +38,7 @@
   max-width: 60%;
   word-wrap: break-word;
   background-color: rgb(49, 49, 49);
+  font-size: 14px !important;
 }
 img.my-message {
   margin-right: 0 !important;
@@ -48,7 +49,7 @@ img.my-message {
   border-radius: 2rem;
 }
 .party-message {
-  font-size: 1rem !important;
+  font-size: 14px !important;
   display: block;
   width: fit-content;
   max-width: 60%;
@@ -89,7 +90,3 @@ img.party-message {
 .my-message:hover ~ .time {
   opacity: 1;
 }
-body.hulu .my-message,
-body.hulu .party-message {
-  font-size: 1.4rem !important;
-}

app/src/VideoListener.js

@@ -123,8 +123,8 @@ export default class VideoListener {
         this.video.element.addEventListener('pause', this.onpause);
       }
       this.isUpdating = false;
-      this.server = serverPlayer;
     }
+    this.server = serverPlayer;
   }
   timeout(n) {
     return new Promise((resolve, reject) => {
@@ -173,6 +173,10 @@ export default class VideoListener {
         return yshow === '' && yepisode === '' ? null : yshow + '\n' + yepisode;
       case PLAYER_SOURCE.HBOMAX:
       case PLAYER_SOURCE.HBONOW:
+        const bottomHalf = this.video.element.parentNode.parentNode.parentNode.parentNode.parentNode
+          .children[1];
+        bottomHalf.children[0].id = 'hboUpperTitle';
+        bottomHalf.children[1].id = 'hboLowerTitle';
         const hboshow = document.querySelector('#hboUpperTitle').innerText;
         const hboepisode = document.querySelector('#hboLowerTitle').innerText;
         return hboshow === '' && hboepisode === '' ? null : hboshow + '\n' + hboepisode;
@@ -198,15 +202,15 @@ export default class VideoListener {
     this.updateStatus({
       element: videoElement,
     });
-    this.updateStatus({
-      showName: await this.getShowName(),
-    });
     // if (videoElement.currentTime > 0 && !videoElement.paused) {
     //   this.updateStatus({
     //     time: videoElement.currentTime,
     //     status: PLAYER_STATUS.PLAYING,
     //   });
     // }
+    this.updateStatus({
+      showName: await this.getShowName(),
+    });
     videoElement.addEventListener('playing', this.onplay);
     videoElement.addEventListener('pause', this.onpause);
   }
@@ -318,12 +322,11 @@ export default class VideoListener {
               ? null
               : () => {
                   var hve = document.querySelector('video.default');
-                  if (hve !== null && (this.video.element !== hve || this.video.element === null)) {
-                    const bottomHalf =
-                      hboVideoElement.parentNode.parentNode.parentNode.parentNode.parentNode
-                        .children[1];
-                    bottomHalf.children[0].id = 'hboUpperTitle';
-                    bottomHalf.children[1].id = 'hboLowerTitle';
+                  if (
+                    hve !== null &&
+                    hve !== undefined &&
+                    (this.video.element !== hve || this.video.element === null)
+                  ) {
                     this.firstTimeSync(hve);
                   }
                 },

app/src/index.css

@@ -28,8 +28,7 @@ body.hulu.visible .Player__container,/* HULU */
 body.amazon-prime.visible #dv-web-player.dv-player-fullscreen, /* AMAZON PRIME */
 body.disney.visible #hudson-wrapper, /* DISNEY */
 body.youtube.visible #content.ytd-app, /* YOUTUBE */
-body.youtube.visible #masthead-container, /* YOUTUBE HEADER */ 
-body.hbo.visible video.default {
+body.youtube.visible #masthead-container /* YOUTUBE HEADER */ {
   max-width: var(--body-width) !important;
 }
 /* HULU MINIMIZED VIDEO */
@@ -184,7 +183,7 @@ body.amazon-prime textarea:focus {
 }
 
 .party-create-container {
-  padding: 3.5rem;
+  padding: 38px;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -195,6 +194,9 @@ body.amazon-prime textarea:focus {
   padding: 2rem;
   margin: auto 0;
 }
+.create-input-card * {
+  font-size: 12px !important;
+}
 .party-create-container .create-input-card .create-mode-select,
 .party-create-container .create-input-card .create-name,
 .party-create-container .create-input-card .create-pin {
@@ -216,6 +218,7 @@ body.amazon-prime textarea:focus {
   word-break: break-word !important;
   overflow: hidden !important;
   padding-right: 1rem !important;
+  font-size: 18px !important;
 }
 .thread-container::-webkit-scrollbar {
   width: 5px;
@@ -237,6 +240,13 @@ textarea::-webkit-scrollbar {
 .chat-message-box > div {
   border-radius: 26px;
 }
+.chat-message-box .MuiFormHelperText-root {
+  font-size: 10px !important;
+}
+.chat-message-box textarea {
+  min-height: 12px !important;
+  font-size: 12px !important;
+}
 
 .party-chat-container {
   display: flex;
@@ -267,6 +277,9 @@ textarea::-webkit-scrollbar {
 .party-chat-header-text {
   flex: 1;
 }
+.party-chat-header-text .brand-title {
+  font-size: 10px;
+}
 .party-controls {
   margin-top: 2rem;
 }
@@ -274,6 +287,7 @@ textarea::-webkit-scrollbar {
   margin-right: 0px !important;
 }
 .party-control-button-text {
+  font-size: 10px !important;
   display: none;
 }
 .party-controls button:hover .party-control-button-text {
@@ -288,15 +302,15 @@ textarea::-webkit-scrollbar {
   width: 100%;
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
-  padding: 0 2rem !important;
-  padding-bottom: 1rem !important;
+  padding: 0 24px !important;
+  padding-bottom: 12px !important;
   box-sizing: border-box !important;
 }
 .media-info-card .MuiCardContent-root {
   padding: 0 !important;
 }
 .media-info-at {
-  font-size: 1rem !important;
+  font-size: 10px !important;
   padding-left: 3px !important;
 }
 .media-info-container {
@@ -304,20 +318,21 @@ textarea::-webkit-scrollbar {
   flex-direction: row;
 }
 .media-info-icon {
-  width: 3.5rem !important;
-  height: 3.5rem !important;
+  width: 48px !important;
+  height: 48px !important;
 }
 .media-info-right {
   flex: 1;
   padding-left: 1rem;
 }
 .media-info-right .show-name {
-  font-size: 1.2rem;
-  line-height: 1.75rem;
+  font-size: 12px;
+  line-height: 16px;
   white-space: break-spaces !important;
 }
 .media-info-link {
   color: inherit !important;
+  font-size: 10px !important;
 }
 
 .giphy-carousel::before {