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 ? (
+ ) : (
+
);
};