Merge pull request #2331 from lbryio/web-streaming

better web streaming

package.json

@@ -59,8 +59,8 @@
     "hast-util-sanitize": "^1.1.2",
     "keytar": "^4.3.0",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#71dda665759ead555fef0bccef3a0ae653cb4509",
-    "lbryinc": "lbryio/lbryinc#b54e90f3d497f0d91b3bb94dab063f0696775169",
+    "lbry-redux": "lbryio/lbry-redux#f140db38dd73cead9e87549340fa9434da62ba8a",
+    "lbryinc": "lbryio/lbryinc#636f014f421827ab6b74caf334c364a362a1a099",
     "localforage": "^1.7.1",
     "mammoth": "^1.4.6",
     "mime": "^2.3.1",

src/ui/component/fileRender/view.jsx

@@ -93,7 +93,7 @@ class FileRender extends React.PureComponent<Props> {
   }
 
   renderViewer() {
-    const { source, mediaType, currentTheme, poster } = this.props;
+    const { source, mediaType, currentTheme, poster, claim } = this.props;
 
     // Extract relevant data to render file
     const { stream, fileType, contentType, downloadPath, fileName } = source;
@@ -122,12 +122,19 @@ class FileRender extends React.PureComponent<Props> {
       ),
       video: (
         <AudioVideoViewer
+          claim={claim}
           source={{ downloadPath, fileName }}
           contentType={contentType}
           poster={poster}
         />
       ),
-      audio: <AudioVideoViewer source={{ downloadPath, fileName }} contentType={contentType} />,
+      audio: (
+        <AudioVideoViewer
+          claim={claim}
+          source={{ downloadPath, fileName }}
+          contentType={contentType}
+        />
+      ),
       // Add routes to viewer...
     };
 

src/ui/component/fileViewer/internal/player.jsx

@@ -320,7 +320,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { mediaType } = this.props;
+    const { mediaType, claim } = this.props;
     const { fileSource } = this.state;
 
     const isFileType = this.isSupportedFile();
@@ -331,7 +331,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     return (
       <React.Fragment>
         {loadingStatus && <LoadingScreen status={loadingStatus} spinner={isLoading} />}
-        {isFileReady && <FileRender source={fileSource} mediaType={mediaType} />}
+        {isFileReady && <FileRender claim={claim} source={fileSource} mediaType={mediaType} />}
         <div
           className="content__view--container"
           style={{ opacity: isLoading ? 0 : 1 }}

src/ui/component/fileViewer/view.jsx

@@ -152,6 +152,7 @@ class FileViewer extends React.PureComponent<Props> {
   playContent() {
     const { play, uri, fileInfo, isDownloading, isLoading } = this.props;
 
+    // @if TARGET='app'
     if (fileInfo || isDownloading || isLoading) {
       // User may have pressed download before clicking play
       this.onFileStartCb = null;
@@ -160,6 +161,7 @@ class FileViewer extends React.PureComponent<Props> {
     if (this.onFileStartCb) {
       this.startTime = Date.now();
     }
+    // @endif
 
     play(uri);
   }

src/ui/component/viewers/audioVideoViewer.jsx

@@ -1,4 +1,5 @@
 // @flow
+import type { Claim } from 'types/claim';
 import React from 'react';
 import { stopContextMenu } from 'util/context-menu';
 import videojs from 'video.js';
@@ -11,6 +12,7 @@ type Props = {
   },
   contentType: string,
   poster?: string,
+  claim: Claim,
 };
 
 class AudioVideoViewer extends React.PureComponent<Props> {
@@ -18,17 +20,9 @@ class AudioVideoViewer extends React.PureComponent<Props> {
   player: ?{ dispose: () => void };
 
   componentDidMount() {
-    const { source, contentType, poster } = this.props;
-    const { downloadPath, fileName } = source;
-
-    const indexOfFileName = downloadPath.indexOf(fileName);
-    const basePath = downloadPath.slice(0, indexOfFileName);
-    const encodedFileName = encodeURIComponent(fileName);
-
-    // We only want to encode the fileName so forward slashes "/" are handled properly by the file system
-    // TODO: Determine changes needed for windows
-    const path = `${basePath}${encodedFileName}`;
+    const { contentType, poster, claim } = this.props;
 
+    const path = `https://api.lbry.tv/content/claims/${claim.name}/${claim.claim_id}/stream.mp4`;
     const sources = [
       {
         src: path,

src/ui/index.jsx

@@ -63,6 +63,7 @@ Lbry.setDaemonConnectionString(SDK_API_URL);
 // We interect with ipcRenderer to get the auth key from a users keyring
 // We keep a local variable for authToken beacuse `ipcRenderer.send` does not
 // contain a response, so there is no way to know when it's been set
+// @if TARGET='app'
 let authToken;
 Lbryio.setOverride(
   'setAuthToken',
@@ -110,6 +111,7 @@ Lbryio.setOverride(
       }
     })
 );
+// @endif
 
 rewards.setCallback('claimFirstRewardSuccess', () => {
   app.store.dispatch(doOpenModal(MODALS.FIRST_REWARD));
@@ -247,7 +249,7 @@ const init = () => {
       document.getElementById('app')
     );
     // @if TARGET='web'
-    // window.sessionStorage.removeItem('loaded');
+    window.sessionStorage.removeItem('loaded');
     // @endif
   }
 

src/ui/page/show/view.jsx

@@ -42,7 +42,7 @@ class ShowPage extends React.PureComponent<Props> {
 
     let innerContent = '';
 
-    if (isResolvingUri || !claim || !claim.name) {
+    if (!claim || (claim && !claim.name)) {
       if (claim && !claim.name) {
         // While testing the normalization changes, Brannon found that `name` was missing sometimes
         // This shouldn't happen, so hopefully this helps track it down

src/ui/redux/actions/content.js

@@ -9,7 +9,6 @@ import { doOpenModal } from 'redux/actions/app';
 import { doNavigate } from 'redux/actions/navigation';
 import { setSubscriptionLatest, doUpdateUnreadSubscriptions } from 'redux/actions/subscriptions';
 import { makeSelectUnreadByChannel } from 'redux/selectors/subscriptions';
-import { selectBadgeNumber } from 'redux/selectors/app';
 import {
   ACTIONS,
   SETTINGS,
@@ -28,12 +27,15 @@ import {
 import { makeSelectCostInfoForUri } from 'lbryinc';
 
 import { makeSelectClientSetting, selectosNotificationsEnabled } from 'redux/selectors/settings';
-import setBadge from 'util/set-badge';
 import analytics from 'analytics';
 
 const DOWNLOAD_POLL_INTERVAL = 250;
 
 export function doUpdateLoadStatus(uri: string, outpoint: string) {
+  // Updates the loading status for a uri as it's downloading
+  // Calls file_list and checks the written_bytes value to see if the number has increased
+  // Not needed on web as users aren't actually downloading the file
+  // @if TARGET='app'
   return (dispatch, getState) => {
     const setNextStatusUpdate = () =>
       setTimeout(() => {
@@ -44,6 +46,7 @@ export function doUpdateLoadStatus(uri: string, outpoint: string) {
           dispatch(doUpdateLoadStatus(uri, outpoint));
         }
       }, DOWNLOAD_POLL_INTERVAL);
+
     Lbry.file_list({
       outpoint,
       full_status: true,
@@ -64,14 +67,6 @@ export function doUpdateLoadStatus(uri: string, outpoint: string) {
           },
         });
 
-        const badgeNumber = selectBadgeNumber(state);
-        setBadge(badgeNumber === 0 ? '' : `${badgeNumber}`);
-
-        // Disabling this for now because it's confusing for new users that don't realize files are actually being downloaded
-        // This should move inside of the app
-        // const totalProgress = selectTotalDownloadProgress(state);
-        // setProgressBar(totalProgress);
-
         const channelUri = makeSelectChannelForClaimUri(uri, true)(state);
         const { claimName: channelName } = parseURI(channelUri);
 
@@ -126,12 +121,11 @@ export function doUpdateLoadStatus(uri: string, outpoint: string) {
           },
         });
 
-        // const totalProgress = selectTotalDownloadProgress(getState());
-        // setProgressBar(totalProgress);
         setNextStatusUpdate();
       }
     });
   };
+  // @endif
 }
 
 export function doStartDownload(uri, outpoint) {

static/index.html

@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <title>lbry.tv</title>
   </head>
 
   <body>

webpack.base.config.js

@@ -25,7 +25,7 @@ const baseConfig = {
         loader: 'babel-loader',
       },
       {
-        test: /\.scss$/,
+        test: /\.s?css$/,
         use: [
           'style-loader', // creates style nodes from JS strings
           'css-loader', // translates CSS into CommonJS
@@ -43,9 +43,7 @@ const baseConfig = {
         },
       },
       {
-        // font/inter includes a basic css file applying the fonts
-        // Everywhere else we use .scss
-        test: /\.(css|woff|woff2)$/,
+        test: /\.(woff|woff2)$/,
         use: {
           loader: 'file-loader',
           options: {

yarn.lock

@@ -5972,17 +5972,17 @@ lazy-val@^1.0.3, lazy-val@^1.0.4:
     tar-stream "^1.6.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#71dda665759ead555fef0bccef3a0ae653cb4509:
+lbry-redux@lbryio/lbry-redux#f140db38dd73cead9e87549340fa9434da62ba8a:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/71dda665759ead555fef0bccef3a0ae653cb4509"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/f140db38dd73cead9e87549340fa9434da62ba8a"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#b54e90f3d497f0d91b3bb94dab063f0696775169:
+lbryinc@lbryio/lbryinc#636f014f421827ab6b74caf334c364a362a1a099:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/b54e90f3d497f0d91b3bb94dab063f0696775169"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/636f014f421827ab6b74caf334c364a362a1a099"
   dependencies:
     bluebird "^3.5.1"
     reselect "^3.0.0"