diff --git a/extension/check_extension.js b/extension/check_extension.js new file mode 100644 index 0000000..6bccb34 --- /dev/null +++ b/extension/check_extension.js @@ -0,0 +1,6 @@ +var currentVersion = chrome.runtime.getManifest().version; +window.addEventListener('message', (e) => { + if (e.data.toString() === 'get extension version') { + e.ports[0].postMessage({ version: currentVersion }); + } +}); diff --git a/extension/manifest.json b/extension/manifest.json index 0ed19a8..9603511 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -11,6 +11,10 @@ "matches": ["https://www.netflix.com/*"], "js": ["player.js"], "all_frames": true + }, + { + "matches": ["http://localhost/*", "https://turtletv.app/*"], + "js": ["check_extension.js"] } ], "web_accessible_resources": ["netflix.js"], diff --git a/src/assets/get-firefox-addon.png b/src/assets/get-firefox-addon.png new file mode 100644 index 0000000..f640023 Binary files /dev/null and b/src/assets/get-firefox-addon.png differ diff --git a/src/components/Player/GetExtension.css b/src/components/Player/GetExtension.css new file mode 100644 index 0000000..c81474d --- /dev/null +++ b/src/components/Player/GetExtension.css @@ -0,0 +1,18 @@ +.extension-content { + --background: var(--ion-color-light-shade); +} + +.extension-content * { + color: var(--ion-color-primary); + font-size: 20px; +} + +.firefox-link { + display: inline-block; +} + +.firefox-ext-img { + height: 60px; + width: 172px; + padding-left: 10px; +} diff --git a/src/components/Player/GetExtension.tsx b/src/components/Player/GetExtension.tsx new file mode 100644 index 0000000..da6d672 --- /dev/null +++ b/src/components/Player/GetExtension.tsx @@ -0,0 +1,21 @@ +import { IonContent, IonImg, IonListHeader, IonRouterLink } from '@ionic/react'; +import React from 'react'; +import firefox from '../../assets/get-firefox-addon.png'; +import './GetExtension.css'; + +const GetExtension: React.FC = () => { + return ( + + Browser extension installation is required. + + + + + ); +}; + +export default GetExtension; diff --git a/src/components/Player/SubscriptionFrame.tsx b/src/components/Player/SubscriptionFrame.tsx index b886b2b..db49eb9 100644 --- a/src/components/Player/SubscriptionFrame.tsx +++ b/src/components/Player/SubscriptionFrame.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { arrayUnion, db } from '../../services/firebase'; import { SYNC_MARGIN } from '../../services/utilities'; +import GetExtension from './GetExtension'; type SubscriptionFrameProps = { roomId: string; @@ -12,6 +13,33 @@ type SubscriptionFrameProps = { const SubscriptionFrame: React.FC = ({ ownerId, userId, roomId, videoUrl }) => { const frameRef = useRef(null); const [playerReady, setPlayerReady] = useState(false); + const [hasExtension, setHasExtension] = useState(false); + + const getExtensionVersion = () => { + return new Promise((resolve, reject) => { + const channel = new MessageChannel(); + channel.port1.onmessage = ({ data }) => { + channel.port1.close(); + if (data.error) { + reject(false); + } else { + console.log(data.version); + resolve(true); + } + }; + window.postMessage('get extension version', '*', [channel.port2]); + }); + }; + + // Validate browser extension version + useEffect(() => { + const checkExtension = async () => { + const val = await getExtensionVersion(); + setHasExtension(val); + }; + + checkExtension(); + }, []); // Listen for events from browser extension (owner only) useEffect(() => { @@ -152,7 +180,7 @@ const SubscriptionFrame: React.FC = ({ ownerId, userId, } }, [playerReady, roomId, ownerId, userId]); - return ( + return hasExtension ? ( + ) : ( + ); };