diff --git a/package.json b/package.json index 63eaa87..c328b37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "my-extension", - "version": "0.1.0", + "name": "watch-party-crx", + "version": "1.2.0", "private": true, "dependencies": { "@giphy/js-fetch-api": "^1.5.8", diff --git a/public/manifest.json b/public/manifest.json index 4c7675d..f90bec7 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,7 +1,7 @@ { "name": "Watch Party", "short_name": "WP", - "version": "1.1.0", + "version": "1.2.0", "description": "Watch streamed content together.", "background": { "page": "popup.html" @@ -10,7 +10,8 @@ "https://*.hulu.com/*", "https://*.netflix.com/*", "https://*.amazon.com/*", - "https://*.disneyplus.com/*" + "https://*.disneyplus.com/*", + "https://*.youtube.com/*" ], "content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'", "content_scripts": [ @@ -37,6 +38,12 @@ "run_at": "document_idle", "js": ["/static/js/content.js"], "css": ["/static/css/app.css"] + }, + { + "matches": ["https://*.youtube.com/*"], + "run_at": "document_idle", + "js": ["/static/js/content.js"], + "css": ["/static/css/app.css"] } ], "web_accessible_resources": ["android-icon-192x192.png"], diff --git a/src/Api.js b/src/Api.js index f804536..bb698b1 100644 --- a/src/Api.js +++ b/src/Api.js @@ -16,6 +16,7 @@ export const PLAYER_SOURCE = { AMAZON: 'https://www.amazon.', HULU: 'https://www.hulu.', DISNEY: 'https://www.disneyplus.', + YOUTUBE: 'https://www.youtube.', LOCAL: 'http://localhost', }; @@ -25,6 +26,7 @@ export const getPlayerSource = () => { if (HREF.startsWith(PLAYER_SOURCE.HULU)) return PLAYER_SOURCE.HULU; if (HREF.startsWith(PLAYER_SOURCE.AMAZON)) return PLAYER_SOURCE.AMAZON; if (HREF.startsWith(PLAYER_SOURCE.DISNEY)) return PLAYER_SOURCE.DISNEY; + if (HREF.startsWith(PLAYER_SOURCE.YOUTUBE)) return PLAYER_SOURCE.YOUTUBE; if (HREF.startsWith(PLAYER_SOURCE.LOCAL)) return PLAYER_SOURCE.LOCAL; }; diff --git a/src/VideoListener.js b/src/VideoListener.js index a2e064b..79acb73 100644 --- a/src/VideoListener.js +++ b/src/VideoListener.js @@ -29,6 +29,8 @@ export default class VideoListener { this.video.element !== null && this.video.element !== undefined && this.video.status !== PLAYER_STATUS.NOT_PLAYING && + this.video.showName !== '' && + this.video.showName !== null && (this.video.status !== this.server.status || Math.abs(this.video.element.currentTime - this.server.time) > 1.5) ); @@ -73,6 +75,9 @@ export default class VideoListener { this.video.element.currentTime = serverPlayer.time; await this.timeout(500); break; + case PLAYER_SOURCE.YOUTUBE: + this.video.element.currentTime = serverPlayer.time; + break; default: break; } @@ -139,6 +144,10 @@ export default class VideoListener { ? document.querySelector('.subtitle-field').innerHTML : ''; return dshow === '' && depisode === '' ? null : dshow + '\n' + depisode; + case PLAYER_SOURCE.YOUTUBE: + const yshow = document.querySelector('h1.title').innerText; + const yepisode = document.querySelector('yt-formatted-string.super-title').innerText; + return yshow === '' && yepisode === '' ? null : yshow + '\n' + yepisode; default: break; } @@ -241,6 +250,23 @@ export default class VideoListener { ); } break; + case PLAYER_SOURCE.YOUTUBE: + const youtubeVideoElement = document.querySelector('video.video-stream.html5-main-video'); + if (youtubeVideoElement) this.firstTimeSync(youtubeVideoElement); + else { + setInterval( + this.video.element + ? null + : () => { + var yve = document.querySelector('video.video-stream.html5-main-video'); + if (yve !== null && (this.video.element !== yve || this.video.element === null)) { + this.firstTimeSync(yve); + } + }, + 1000 + ); + } + break; case PLAYER_SOURCE.LOCAL: const localVideoElement = document.getElementsByTagName('video')[0]; if (localVideoElement) { diff --git a/src/index.css b/src/index.css index a90ac08..29b63c3 100644 --- a/src/index.css +++ b/src/index.css @@ -23,7 +23,9 @@ body.visible .party-notification-container { body.netflix.visible .AkiraPlayer, /* NETFLIX */ 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.disney.visible #hudson-wrapper, /* DISNEY */ +body.youtube.visible #content.ytd-app, /* YOUTUBE */ +body.youtube.visible #masthead-container /* YOUTUBE HEADER */ { max-width: var(--body-width) !important; } /* HULU MINIMIZED VIDEO */ @@ -42,6 +44,25 @@ body.amazon-prime #party-routes-wrapper { body.disney #hudson-wrapper { left: 0; } +/* YOUTUBE VIDEO SIZING FIX */ +body.youtube.visible video { + max-width: 100%; + height: auto !important; +} +body.youtube.visible .ytp-chrome-bottom { + max-width: 100% !important; + width: calc(100% - 24px) !important; +} +body.youtube.visible .ytp-chapter-hover-container { + max-width: 100% !important; +} +body.youtube.visible .ytp-tooltip.ytp-bottom.ytp-preview { + bottom: 100px !important; + top: unset !important; +} +body.youtube.visible td-two-column-browse-results-renderer.grid:not(.grid-disabled) { + max-width: calc(100% - 48px); +} /* AMAZON STYLING FIX */ body.amazon-prime input, body.amazon-prime textarea { diff --git a/src/index.js b/src/index.js index 55f37e9..be301c3 100644 --- a/src/index.js +++ b/src/index.js @@ -50,6 +50,9 @@ switch (getPlayerSource()) { case PLAYER_SOURCE.DISNEY: document.body.classList.add('disney'); break; + case PLAYER_SOURCE.YOUTUBE: + document.body.classList.add('youtube'); + break; case PLAYER_SOURCE.LOCAL: break; default: