diff --git a/extension/background.js b/extension/background.js index a348126..cdbd2d0 100644 --- a/extension/background.js +++ b/extension/background.js @@ -36,6 +36,6 @@ chrome.webRequest.onHeadersReceived.addListener( responseHeaders: details.responseHeaders.filter((header) => !IFRAME_HEADERS.includes(header.name.toLowerCase())), }; }, - { urls: [''] }, + { urls: ['https://www.netflix.com/*', 'http://localhost/*', 'https://turtletv.app/*'] }, isFirefox ? ['blocking', 'responseHeaders'] : ['blocking', 'responseHeaders', 'extraHeaders'] ); diff --git a/extension/manifest.json b/extension/manifest.json index 9603511..e89419e 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -18,8 +18,14 @@ } ], "web_accessible_resources": ["netflix.js"], - "permissions": ["webRequest", "webRequestBlocking", ""], - "version": "1.0", + "permissions": [ + "webRequest", + "webRequestBlocking", + "https://www.netflix.com/", + "http://localhost/*", + "https://turtletv.app/" + ], + "version": "1.1", "icons": { "48": "icon_48.png" } diff --git a/extension/netflix.js b/extension/netflix.js index 4df6ef2..8f80e0e 100644 --- a/extension/netflix.js +++ b/extension/netflix.js @@ -8,12 +8,11 @@ window.parent.postMessage('video ready', '*'); player.addEventListener('play', (ev) => { window.parent.postMessage({ type: 'play', time: player.currentTime }, '*'); }); - player.addEventListener('pause', (ev) => { window.parent.postMessage({ type: 'pause', time: player.currentTime }, '*'); }); -// Subscribe listener for syncing requests +// Listen for syncing requests window.addEventListener('message', (ev) => { let type = ev.data.type; diff --git a/public/assets/icon/extension-icon.png b/public/assets/icon/extension-icon.png new file mode 100644 index 0000000..63e8f1f Binary files /dev/null and b/public/assets/icon/extension-icon.png differ diff --git a/src/assets/get-chrome-ext.png b/src/assets/get-chrome-ext.png new file mode 100644 index 0000000..d738110 Binary files /dev/null and b/src/assets/get-chrome-ext.png differ diff --git a/src/components/Player/GetExtension.css b/src/components/Player/GetExtension.css index c81474d..a892967 100644 --- a/src/components/Player/GetExtension.css +++ b/src/components/Player/GetExtension.css @@ -7,7 +7,7 @@ font-size: 20px; } -.firefox-link { +.ext-link { display: inline-block; } @@ -16,3 +16,9 @@ width: 172px; padding-left: 10px; } + +.chrome-ext-img { + height: 62px; + width: 220px; + padding-left: 10px; +} diff --git a/src/components/Player/GetExtension.tsx b/src/components/Player/GetExtension.tsx index da6d672..ad870f1 100644 --- a/src/components/Player/GetExtension.tsx +++ b/src/components/Player/GetExtension.tsx @@ -1,19 +1,19 @@ import { IonContent, IonImg, IonListHeader, IonRouterLink } from '@ionic/react'; import React from 'react'; import firefox from '../../assets/get-firefox-addon.png'; +import chrome from '../../assets/get-chrome-ext.png'; import './GetExtension.css'; const GetExtension: React.FC = () => { return ( Browser extension installation is required. - + + + + ); }; diff --git a/src/components/Player/SubscriptionFrame.tsx b/src/components/Player/SubscriptionFrame.tsx index db49eb9..62156d0 100644 --- a/src/components/Player/SubscriptionFrame.tsx +++ b/src/components/Player/SubscriptionFrame.tsx @@ -23,7 +23,6 @@ const SubscriptionFrame: React.FC = ({ ownerId, userId, if (data.error) { reject(false); } else { - console.log(data.version); resolve(true); } }; @@ -87,7 +86,7 @@ const SubscriptionFrame: React.FC = ({ ownerId, userId, }); }; - // Subscribe listener for updateState requests from Firebase (owner only) + // Listen for updateState requests from Firebase (owner only) useEffect(() => { if (ownerId === userId) { const roomRef = db.collection('rooms').doc(roomId); @@ -151,7 +150,7 @@ const SubscriptionFrame: React.FC = ({ ownerId, userId, frameRef.current?.contentWindow?.postMessage({ type: 'playing', playing: isPlaying }, '*'); }; - // listen to 'states' collection for video state changes from owner + // Listen to 'states' collection for video state changes from owner const stateUnsubscribe = stateRef.onSnapshot(async (docSnapshot) => { const actual = docSnapshot.data(); if (allowUpdate) { diff --git a/src/pages/Home.css b/src/pages/Home.css index 64d425c..50ca9f1 100644 --- a/src/pages/Home.css +++ b/src/pages/Home.css @@ -52,7 +52,7 @@ ion-title { } .paste-input { - margin-left: 2px; + margin-left: 4px; text-align: left; font-size: 14px; border: 1px solid var(--ion-color-secondary); diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx index 0175577..89c1718 100644 --- a/src/pages/Room.tsx +++ b/src/pages/Room.tsx @@ -89,7 +89,7 @@ const Room: React.FC> = ({ match }) => { try { await roomRef.update({ userCount: increment }); roomRef.onDisconnect().update({ userCount: decrement }); - availableRef.child(roomId).set({ name: 'Room Name', createdAt: new Date().toISOString() }); + availableRef.set({ name: 'Room Name', createdAt: new Date().toISOString() }); } catch (err) { console.log(err); }