add contrib-dash

iebb · Mar 10, 2022 · 69fcbc3 · 69fcbc3
1 parent 4e4bcbb
commit 69fcbc3
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "serverless-http": "^2.7.0",
     "uuid": "^8.3.2",
     "video.js": "^7.16.0",
+    "videojs-contrib-dash": "^5.1.1",
     "videojs-contrib-quality-levels": "^2.1.0",
     "videojs-http-source-selector-2": "^1.1.10",
     "vue": "^2.6.11",

diff --git a/public/index.html b/public/index.html
@@ -21,6 +21,14 @@
         object-fit: scale-down;
       }
     </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-2W3M70JWDW"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-2W3M70JWDW');
+    </script>
   </head>
   <body>
     <div id="app">

diff --git a/src/components/Feed.vue b/src/components/Feed.vue
@@ -33,6 +33,7 @@
   import { mapGetters } from "vuex";
 
   import "videojs-contrib-quality-levels";
+  import "videojs-contrib-dash";
   import "videojs-http-source-selector-2";
 
   import F1TV_API from "@/lib/F1TV_API";
@@ -116,35 +117,31 @@
       async updateSource() {
         if (!this.token) return;
 
-        try {
-          const res = await F1TV_API.getAuthenticatedUrl(this.playbackUrl, this.token);
-
-          if (this.player && res.data?.resultObj?.url) {
-            let url = res.data.resultObj.url;
-
-            if (process.env.VUE_APP_NETLIFY) {
-              url = "https://cors.bridged.cc/" + url;
-            } else if (!process.env.IS_ELECTRON) {
-              const res = await F1TV_API.playToken(url);
-
-              this.player.on("loadstart", () => {
-                this.player.tech({ IWillNotUseThisInPlugins: true }).vhs.xhr.beforeRequest = options => {
-                  options.headers = {
-                    playToken: res.data.playToken,
-                    ...options.headers
-                  };
-
-                  return options;
-                };
-              });
-
-              url = "/proxy/" + url;
-            }
-
-            this.player.src(url);
+        const res = await F1TV_API.getAuthenticatedUrl(this.playbackUrl, this.token);
+
+        let url = res.data?.resultObj?.url;
+        if (this.player && url) {
+          url = "/proxy/" + url;
+
+          if (res.data?.resultObj.streamType === "DASH") {
+            this.player.src({
+              src: url,
+              type: 'application/dash+xml',
+              withCredentials: true,
+              keySystemOptions: [{
+                name: 'com.widevine.alpha',
+                options: {
+                  serverURL: res.data.resultObj.laURL
+                }
+              }]
+            });
+          } else {
+            this.player.src({
+              src: url,
+              withCredentials: true,
+            });
           }
-        } catch (err) {
-          console.error(err);
+
         }
       }
     },

diff --git a/src/store/axios.js b/src/store/axios.js
@@ -2,32 +2,18 @@ import axios from "axios";
 import videojs from "video.js";
 import store from "@/store";
 
-const CORS_PROXY = "https://damp-mouse-7bce.f1webviewer.workers.dev?";
-const API_URL = "https://f1tv.formula1.com";
+const API_URL = "/proxy/https://f1tv.formula1.com/";
 
 const options = { baseURL: API_URL };
 
-if (process.env.VUE_APP_NETLIFY) {
-  const keyHeaders = {
-    "x-cors-grida-api-key": process.env.VUE_APP_API_KEY
-  };
+options.baseURL = API_URL;
 
-  options.baseURL = CORS_PROXY + API_URL;
+videojs.Vhs.xhr.beforeRequest = options => {
   options.headers = {
-    common: { ...keyHeaders }
-  };
-
-  videojs.Vhs.xhr.beforeRequest = options => {
-    options.headers = {
-      ...keyHeaders,
-      ...options.headers
-    };
-
-    return options;
+    ...options.headers
   };
-} else if (!process.env.IS_ELECTRON) {
-  options.baseURL = "/proxy/" + API_URL;
-}
+  return options;
+};
 
 const http = axios.create(options);