From 7218b787460c505faaab10fb966035824375c9a5 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 8 Apr 2020 13:10:33 -0400 Subject: [PATCH] fetch continent cookie on server-side and clean up video effects --- lbrytv/package.json | 4 +- lbrytv/src/routes.js | 27 +++++++++ lbrytv/yarn.lock | 11 ++++ package.json | 2 +- ui/component/viewers/videoViewer/view.jsx | 70 ++++++++--------------- ui/util/lbrytv.js | 18 +----- yarn.lock | 4 +- 7 files changed, 69 insertions(+), 67 deletions(-) diff --git a/lbrytv/package.json b/lbrytv/package.json index ecfcad4f2..d71e2f6cc 100644 --- a/lbrytv/package.json +++ b/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", diff --git a/lbrytv/src/routes.js b/lbrytv/src/routes.js index 4adba398d..b4599121d 100644 --- a/lbrytv/src/routes.js +++ b/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; }); diff --git a/lbrytv/yarn.lock b/lbrytv/yarn.lock index 27ac8d8b2..be899185c 100644 --- a/lbrytv/yarn.lock +++ b/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" diff --git a/package.json b/package.json index 5ff5a8b91..28cb90b9b 100644 --- a/package.json +++ b/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", diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx index fdc09ec53..31c47936b 100644 --- a/ui/component/viewers/videoViewer/view.jsx +++ b/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:firstplay', (e, d) => doTrackingFirstPlay(e, d)); + player.on('tracking:buffered', doTrackingBuffered); + 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) { diff --git a/ui/util/lbrytv.js b/ui/util/lbrytv.js index 80b4ded8a..f5972d189 100644 --- a/ui/util/lbrytv.js +++ b/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}`; } diff --git a/yarn.lock b/yarn.lock index 0dfd37ef5..a00d12988 100644 --- a/yarn.lock +++ b/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"