From fca1ffb6591bdff1862e5dc0de1fcc49ced88338 Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Tue, 9 Jun 2020 01:19:07 -0400 Subject: [PATCH] v1.3.3-beta/UI fixes --- app/src/Chat.js | 20 ++++++++++++++++---- app/src/Thread.css | 7 ++----- app/src/VideoListener.js | 23 +++++++++++++---------- app/src/index.css | 35 +++++++++++++++++++++++++---------- 4 files changed, 56 insertions(+), 29 deletions(-) diff --git a/app/src/Chat.js b/app/src/Chat.js index f9e7b33..923a0a6 100644 --- a/app/src/Chat.js +++ b/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: '', - 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: '', }; @@ -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: ( this.setState({ gif: !gif })} edge="start"> - + {gif ? : } ), diff --git a/app/src/Thread.css b/app/src/Thread.css index eae7509..d3eded3 100644 --- a/app/src/Thread.css +++ b/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; -} diff --git a/app/src/VideoListener.js b/app/src/VideoListener.js index edfd598..6953b26 100644 --- a/app/src/VideoListener.js +++ b/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); } }, diff --git a/app/src/index.css b/app/src/index.css index 1c01642..1d8e01a 100644 --- a/app/src/index.css +++ b/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 {