fetch continent cookie on server-side and clean up video effects

lbrytv/package.json

@@ -32,7 +32,9 @@
     "koa-send": "^5.0.0",
     "koa-static": "^5.0.0",
     "lbry-redux": "lbryio/lbry-redux#87ae7faf1c1d5ffa86feb578899596f6ea2a5fd9",
-    "mysql": "^2.17.1"
+    "lbryinc": "lbryio/lbryinc#0addc624db54000b0447f4539f91f5758d26eef3",
+    "mysql": "^2.17.1",
+    "node-fetch": "^2.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

lbrytv/src/routes.js

@@ -1,7 +1,12 @@
 const { getHtml } = require('./html');
+const { Lbryio } = require('lbryinc/dist/bundle.es.js');
 const { generateStreamUrl, CONTINENT_COOKIE } = require('../../ui/util/lbrytv');
+const fetch = require('node-fetch');
 const Router = require('@koa/router');
 
+// So any code from 'lbry-redux'/'lbryinc' that uses `fetch` can be run on the server
+global.fetch = fetch;
+
 const router = new Router();
 
 function getStreamUrl(ctx) {
@@ -15,6 +20,23 @@ function getStreamUrl(ctx) {
   return streamUrl;
 }
 
+function getSupportedCDN(continent) {
+  switch (continent) {
+    case 'NA':
+    case 'EU':
+      return continent;
+    default:
+      return 'NA';
+  }
+}
+
+async function fetchContinentCookie() {
+  return Lbryio.call('locale', 'get', {}, 'post').then(result => {
+    const userContinent = getSupportedCDN(result.continent);
+    return userContinent;
+  });
+}
+
 router.get(`/$/download/:claimName/:claimId`, async ctx => {
   const streamUrl = getStreamUrl(ctx);
   const downloadUrl = `${streamUrl}?download=1`;
@@ -27,6 +49,11 @@ router.get(`/$/stream/:claimName/:claimId`, async ctx => {
 });
 
 router.get('*', async ctx => {
+  const hasContinentCookie = ctx.cookies.get(CONTINENT_COOKIE);
+  if (!hasContinentCookie) {
+    const continentValue = await fetchContinentCookie();
+    ctx.cookies.set(CONTINENT_COOKIE, continentValue, { httpOnly: false });
+  }
   const html = await getHtml(ctx);
   ctx.body = html;
 });

lbrytv/yarn.lock

@@ -3341,6 +3341,12 @@ lbry-redux@lbryio/lbry-redux#87ae7faf1c1d5ffa86feb578899596f6ea2a5fd9:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
+lbryinc@lbryio/lbryinc#546ecd1f775925d771c4f86fe0e260ba38c25a02:
+  version "0.0.1"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/546ecd1f775925d771c4f86fe0e260ba38c25a02"
+  dependencies:
+    reselect "^3.0.0"
+
 lcid@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
@@ -3746,6 +3752,11 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
+node-fetch@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
+
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"

package.json

@@ -131,7 +131,7 @@
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70",
-    "lbryinc": "lbryio/lbryinc#19260fac560daaa4be2d4af372f28109ea96ebf9",
+    "lbryinc": "lbryio/lbryinc#0addc624db54000b0447f4539f91f5758d26eef3",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "lodash-es": "^4.17.14",

ui/component/viewers/videoViewer/view.jsx

@@ -33,6 +33,7 @@ type VideoJSOptions = {
   muted?: boolean,
   poseter?: string,
 };
+
 const VIDEO_JS_OPTIONS: VideoJSOptions = {
   controls: true,
   autoplay: true,
@@ -41,6 +42,10 @@ const VIDEO_JS_OPTIONS: VideoJSOptions = {
   responsive: true,
 };
 
+if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
+  videojs.registerPlugin('eventTracking', eventTracking);
+}
+
 type Props = {
   volume: number,
   position: number,
@@ -91,49 +96,6 @@ function VideoViewer(props: Props) {
   const [requireRedraw, setRequireRedraw] = useState(false);
   let player;
 
-  useEffect(() => {
-    const currentVideo: HTMLVideoElement | null = document.querySelector('video');
-
-    if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
-      videojs.registerPlugin('eventTracking', eventTracking);
-    }
-
-    function doEnded() {
-      onEndedCb();
-    }
-
-    function doStarted() {
-      onStartedCb();
-    }
-
-    function doPause(e: Event) {
-      // store position e.target.currentTime
-    }
-
-    function doVolume(e: Event) {
-      // $FlowFixMe volume is missing in EventTarget
-      changeVolume(e.target.volume);
-      // $FlowFixMe muted is missing in EventTarget
-      changeMute(e.target.muted);
-    }
-
-    if (currentVideo) {
-      currentVideo.addEventListener('play', doStarted);
-      currentVideo.addEventListener('ended', doEnded);
-      currentVideo.addEventListener('pause', doPause);
-      currentVideo.addEventListener('volumechange', doVolume);
-    }
-    // cleanup function:
-    return () => {
-      if (currentVideo) {
-        currentVideo.removeEventListener('play', doStarted);
-        currentVideo.removeEventListener('ended', doEnded);
-        currentVideo.removeEventListener('pause', doPause);
-        currentVideo.removeEventListener('volumechange', doVolume);
-      }
-    };
-  }, [changeMute, changeVolume, onStartedCb, onEndedCb]);
-
   useEffect(() => {
     const { current: videoNode } = videoRef;
     const videoJsOptions = {
@@ -233,22 +195,38 @@ function VideoViewer(props: Props) {
     }
     function doTrackingFirstPlay(e: Event, data: any) {
       analytics.videoStartEvent(claimId, data.secondsToLoad);
+      onStartedCb();
     }
+
+    function doEnded() {
+      onEndedCb();
+    }
+
+    function doVolume(e: Event) {
+      const isMuted = player.muted();
+      const volume = player.volume();
+      changeVolume(volume);
+      changeMute(isMuted);
+    }
+
     if (player) {
-      player.on('tracking:buffered', (e, d) => doTrackingBuffered(e, d));
+      player.on('tracking:buffered', doTrackingBuffered);
-      player.on('tracking:firstplay', (e, d) => doTrackingFirstPlay(e, d));
+      player.on('tracking:firstplay', doTrackingFirstPlay);
+      player.on('ended', doEnded);
+      player.on('volumechange', doVolume);
 
       // fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)
       // summary: on firefox the focus would stick to the fullscreen button which caused buggy behavior with spacebar
       // $FlowFixMe
       player.on('fullscreenchange', () => document.activeElement && document.activeElement.blur());
     }
+
     return () => {
       if (player) {
         player.off();
       }
     };
-  }, [claimId, player]);
+  }, [claimId, player, changeVolume, changeMute, onEndedCb, onStartedCb]);
 
   useEffect(() => {
     if (player && position) {

ui/util/lbrytv.js

@@ -1,6 +1,5 @@
-const { Lbryio } = require('lbryinc/dist/bundle.es.js');
 const { URL, LBRY_TV_STREAMING_API } = require('../../config');
-const { getCookie, setCookie } = require('../../ui/util/saved-passwords');
+const { getCookie } = require('../../ui/util/saved-passwords');
 
 const CONTINENT_COOKIE = 'continent';
 
@@ -10,26 +9,11 @@ function generateStreamUrl(claimName, claimId, apiUrl, streamingContinent) {
 
   if (continent && prefix.split('//').length > 1) {
     prefix = prefix.replace('//', '//' + continent + '.');
-  } else {
-    Lbryio.call('locale', 'get', {}, 'post').then(result => {
-      const userContinent = getSupportedCDN(result.continent);
-      setCookie(CONTINENT_COOKIE, userContinent, 1);
-    });
   }
 
   return `${prefix}/content/claims/${claimName}/${claimId}/stream`;
 }
 
-function getSupportedCDN(continent) {
-  switch (continent) {
-    case 'NA':
-    case 'EU':
-      return continent;
-    default:
-      return 'NA';
-  }
-}
-
 function generateEmbedUrl(claimName, claimId) {
   return `${URL}/$/embed/${claimName}/${claimId}`;
 }

yarn.lock

@@ -6147,9 +6147,9 @@ lbry-redux@lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#19260fac560daaa4be2d4af372f28109ea96ebf9:
+lbryinc@lbryio/lbryinc#546ecd1f775925d771c4f86fe0e260ba38c25a02:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/19260fac560daaa4be2d4af372f28109ea96ebf9"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/546ecd1f775925d771c4f86fe0e260ba38c25a02"
   dependencies:
     reselect "^3.0.0"