From 64a442e60df5fdd7ae272d90bb83d909a43b4aa2 Mon Sep 17 00:00:00 2001
From: nestordominguez <oscardom80@hotmail.com>
Date: Mon, 27 Jan 2020 11:29:54 -0300
Subject: [PATCH 01/16] edit abandon claim to abandon support (#3514)

* edit abandon claim to abandon support

* set abandon support or claim in title

* add abandon suport claim title to app-strings
---
 static/app-strings.json                                        | 1 +
 .../transactionListTable/internal/transaction-list-item.jsx    | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index c7cdc2e73..14b49b2a1 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -157,6 +157,7 @@
   "Details": "Details",
   "Transaction": "Transaction",
   "Date": "Date",
+  "Abandon Support": "Abandon Support",
   "Abandon Claim": "Abandon Claim",
   "Find New Tags To Follow": "Find New Tags To Follow",
   "Aw shucks!": "Aw shucks!",
diff --git a/ui/component/transactionListTable/internal/transaction-list-item.jsx b/ui/component/transactionListTable/internal/transaction-list-item.jsx
index 8fc89c689..ad2718c97 100644
--- a/ui/component/transactionListTable/internal/transaction-list-item.jsx
+++ b/ui/component/transactionListTable/internal/transaction-list-item.jsx
@@ -28,7 +28,8 @@ class TransactionListItem extends React.PureComponent<Props> {
     if (type === TXN_TYPES.TIP) {
       return <Button button="secondary" icon={ICONS.UNLOCK} onClick={this.abandonClaim} title={__('Unlock Tip')} />;
     }
-    return <Button button="secondary" icon={ICONS.DELETE} onClick={this.abandonClaim} title={__('Abandon Claim')} />;
+    const abandonTitle = type === TXN_TYPES.SUPPORT ? 'Abandon Support' : 'Abandon Claim';
+    return <Button button="secondary" icon={ICONS.DELETE} onClick={this.abandonClaim} title={__(abandonTitle)} />;
   }
 
   abandonClaim() {

From 9544e29d29fbf4500ebc3a661b7fe6b8ef1a9017 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 27 Jan 2020 10:00:33 -0500
Subject: [PATCH 02/16] prevent double navigation when clicking on fileTile
 thumbnails/titles

---
 ui/component/claimPreviewTile/view.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
index ab0a65bd1..e4243d89e 100644
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/ui/component/claimPreviewTile/view.jsx
@@ -53,8 +53,12 @@ function ClaimPreviewTile(props: Props) {
   } = props;
   const shouldFetch = claim === undefined;
   const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
-  const navigateUrl = uri ? formatLbryUrlForWeb(uri) : undefined;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
+  const navigateUrl = uri ? formatLbryUrlForWeb(uri) : undefined;
+  const navLinkProps = {
+    to: navigateUrl,
+    onClick: e => e.stopPropagation(),
+  };
 
   let isChannel;
   let isValid = false;
@@ -142,10 +146,10 @@ function ClaimPreviewTile(props: Props) {
         'claim-preview--channel': isChannel,
       })}
     >
-      <NavLink to={navigateUrl}>
+      <NavLink {...navLinkProps}>
         <FileThumbnail thumbnail={thumbnailUrl} />
       </NavLink>
-      <NavLink to={navigateUrl}>
+      <NavLink {...navLinkProps}>
         <h2 className="claim-tile__title">
           <TruncatedText text={title || (claim && claim.name)} lines={2} />
         </h2>

From 64727e5232506cdeb9e41d1d806ec017076d480f Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Mon, 27 Jan 2020 13:31:53 -0500
Subject: [PATCH 03/16] test player analytics without claimId label

---
 ui/analytics.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/analytics.js b/ui/analytics.js
index 4aea724db..c6ea127d8 100644
--- a/ui/analytics.js
+++ b/ui/analytics.js
@@ -130,10 +130,10 @@ const analytics: Analytics = {
     }
   },
   videoStartEvent: (claimId, duration) => {
-    sendGaTimingEvent('Media', 'TimeToStart', Number((duration * 1000).toFixed(0)), claimId);
+    sendGaTimingEvent('Media', 'TimeToStart', Number((duration * 1000).toFixed(0)));
   },
   videoBufferEvent: (claimId, currentTime) => {
-    sendGaTimingEvent('Media', 'BufferTimestamp', currentTime * 1000, claimId);
+    sendGaTimingEvent('Media', 'BufferTimestamp', currentTime * 1000);
   },
   tagFollowEvent: (tag, following, location) => {
     sendGaEvent(following ? 'Tag-Follow' : 'Tag-Unfollow', tag);

From 2f81c59aaf3a7c4f3d26ff23b9bfab2403e0b283 Mon Sep 17 00:00:00 2001
From: jessopb <36554050+jessopb@users.noreply.github.com>
Date: Mon, 27 Jan 2020 14:24:40 -0500
Subject: [PATCH 04/16] Revert "test player analytics without claimId label"

---
 ui/analytics.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/analytics.js b/ui/analytics.js
index c6ea127d8..4aea724db 100644
--- a/ui/analytics.js
+++ b/ui/analytics.js
@@ -130,10 +130,10 @@ const analytics: Analytics = {
     }
   },
   videoStartEvent: (claimId, duration) => {
-    sendGaTimingEvent('Media', 'TimeToStart', Number((duration * 1000).toFixed(0)));
+    sendGaTimingEvent('Media', 'TimeToStart', Number((duration * 1000).toFixed(0)), claimId);
   },
   videoBufferEvent: (claimId, currentTime) => {
-    sendGaTimingEvent('Media', 'BufferTimestamp', currentTime * 1000);
+    sendGaTimingEvent('Media', 'BufferTimestamp', currentTime * 1000, claimId);
   },
   tagFollowEvent: (tag, following, location) => {
     sendGaEvent(following ? 'Tag-Follow' : 'Tag-Unfollow', tag);

From 28f2a9da0aa60e700257a5ac59bad28e34163f9d Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 27 Jan 2020 15:46:17 -0500
Subject: [PATCH 05/16] hide channel thumbnail on medium screens too

---
 ui/scss/component/_claim-list.scss | 6 ++++++
 ui/scss/init/_vars.scss            | 1 +
 2 files changed, 7 insertions(+)

diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 5d6a374df..ef74b6355 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -302,6 +302,12 @@
     border-bottom-left-radius: 0;
   }
 
+  @media (max-width: $breakpoint-medium) {
+    .channel-thumbnail {
+      display: none;
+    }
+  }
+
   @media (max-width: $breakpoint-small) {
     width: calc((100% - var(--spacing-medium) * 1) / 2);
     margin-bottom: var(--spacing-large);
diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss
index 92bfbaaa1..0cd5cf405 100644
--- a/ui/scss/init/_vars.scss
+++ b/ui/scss/init/_vars.scss
@@ -4,6 +4,7 @@ $spacing-width: 36px;
 
 $breakpoint-xsmall: 600px;
 $breakpoint-small: 900px;
+$breakpoint-medium: 1150px;
 
 :root {
   // Width & spacing

From d312a8e8b6b9755d9c1a7689cb91fe040f832bda Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 27 Jan 2020 13:52:25 -0500
Subject: [PATCH 06/16] basic autoplay timer working

---
 ui/component/autoplayCountdown/index.js   | 22 ++++++++
 ui/component/autoplayCountdown/view.jsx   | 66 +++++++++++++++++++++++
 ui/component/fileRender/index.js          |  8 ++-
 ui/component/fileRender/view.jsx          | 25 +++++----
 ui/component/viewers/videoViewer/view.jsx | 18 ++-----
 ui/scss/component/_file-render.scss       | 33 ++++++++++++
 ui/scss/component/section.scss            |  5 ++
 7 files changed, 146 insertions(+), 31 deletions(-)
 create mode 100644 ui/component/autoplayCountdown/index.js
 create mode 100644 ui/component/autoplayCountdown/view.jsx

diff --git a/ui/component/autoplayCountdown/index.js b/ui/component/autoplayCountdown/index.js
new file mode 100644
index 000000000..e7e53d559
--- /dev/null
+++ b/ui/component/autoplayCountdown/index.js
@@ -0,0 +1,22 @@
+import * as SETTINGS from 'constants/settings';
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectNextUnplayedRecommended } from 'redux/selectors/content';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+import RecommendedVideos from './view';
+
+const select = (state, props) => {
+  const nextRecommendedUri = makeSelectNextUnplayedRecommended(props.uri)(state);
+  return {
+    nextRecommendedUri,
+    nextRecommendedClaim: makeSelectClaimForUri(nextRecommendedUri)(state),
+    autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
+  };
+};
+
+const perform = (dispatch, ownProps) => ({});
+
+export default connect(
+  select,
+  perform
+)(RecommendedVideos);
diff --git a/ui/component/autoplayCountdown/view.jsx b/ui/component/autoplayCountdown/view.jsx
new file mode 100644
index 000000000..645cbed1f
--- /dev/null
+++ b/ui/component/autoplayCountdown/view.jsx
@@ -0,0 +1,66 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import UriIndicator from 'component/uriIndicator';
+import { formatLbryUrlForWeb } from 'util/url';
+import { withRouter } from 'react-router';
+
+type Props = {
+  history: { push: string => void },
+  nextRecommendedClaim: ?StreamClaim,
+  nextRecommendedUri: string,
+};
+
+function AutoplayCountdown(props: Props) {
+  const {
+    nextRecommendedUri,
+    nextRecommendedClaim,
+    history: { push },
+  } = props;
+  const nextTitle = nextRecommendedClaim && nextRecommendedClaim.value && nextRecommendedClaim.value.title;
+  const [timer, setTimer] = React.useState(5);
+  const [timerCanceled, setTimerCanceled] = React.useState(false);
+
+  let navigateUrl;
+  if (nextTitle) {
+    navigateUrl = formatLbryUrlForWeb(nextRecommendedUri);
+  }
+
+  React.useEffect(() => {
+    let interval;
+    if (!timerCanceled) {
+      interval = setInterval(() => {
+        const newTime = timer - 1;
+        if (newTime === 0) {
+          push(navigateUrl);
+        } else {
+          setTimer(timer - 1);
+        }
+      }, 1000);
+    }
+    return () => {
+      clearInterval(interval);
+    };
+  }, [timer, navigateUrl, push, timerCanceled]);
+
+  if (timerCanceled) {
+    return null;
+  }
+
+  return (
+    <div className="video-overlay__wrapper">
+      <div className="video-overlay__subtitle">Up Next</div>
+      <div className="video-overlay__title">{nextTitle}</div>
+      <UriIndicator link uri={nextRecommendedUri} />
+
+      <div className="video-overlay__actions">
+        <div className="video-overlay__subtitle">Playing in {timer} seconds</div>
+        <div className="section__actions--centered">
+          <Button label={__('Cancel')} button="secondary" onClick={() => setTimerCanceled(true)} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withRouter(AutoplayCountdown);
diff --git a/ui/component/fileRender/index.js b/ui/component/fileRender/index.js
index f99740d5a..99f1979e1 100644
--- a/ui/component/fileRender/index.js
+++ b/ui/component/fileRender/index.js
@@ -8,13 +8,13 @@ import {
   makeSelectDownloadPathForUri,
   makeSelectFileNameForUri,
 } from 'lbry-redux';
-import { THEME, AUTOPLAY } from 'constants/settings';
+import * as SETTINGS from 'constants/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { makeSelectNextUnplayedRecommended, makeSelectIsText } from 'redux/selectors/content';
+import { makeSelectIsText } from 'redux/selectors/content';
 import FileRender from './view';
 
 const select = (state, props) => ({
-  currentTheme: makeSelectClientSetting(THEME)(state),
+  currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
   claim: makeSelectClaimForUri(props.uri)(state),
   mediaType: makeSelectMediaTypeForUri(props.uri)(state),
   thumbnail: makeSelectThumbnailForUri(props.uri)(state),
@@ -22,8 +22,6 @@ const select = (state, props) => ({
   downloadPath: makeSelectDownloadPathForUri(props.uri)(state),
   fileName: makeSelectFileNameForUri(props.uri)(state),
   streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
-  autoplay: makeSelectClientSetting(AUTOPLAY)(state),
-  nextUnplayed: makeSelectNextUnplayedRecommended(props.uri)(state),
   isText: makeSelectIsText(props.uri)(state),
 });
 
diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index cf00f12f8..e2250db0b 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -8,7 +8,7 @@ import ImageViewer from 'component/viewers/imageViewer';
 import AppViewer from 'component/viewers/appViewer';
 import Button from 'component/button';
 import { withRouter } from 'react-router-dom';
-import { formatLbryUrlForWeb } from 'util/url';
+import AutoplayCountdown from 'component/autoplayCountdown';
 // @if TARGET='web'
 import { generateStreamUrl } from 'util/lbrytv';
 // @endif
@@ -36,16 +36,20 @@ type Props = {
   currentTheme: string,
   downloadPath: string,
   fileName: string,
-  autoplay: boolean,
-  nextFileToPlay: string,
-  nextUnplayed: string,
-  history: { push: string => void },
 };
 
-class FileRender extends React.PureComponent<Props> {
+type State = {
+  showAutoplayCountdown: boolean,
+};
+
+class FileRender extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 
+    this.state = {
+      showAutoplayCountdown: false,
+    };
+
     (this: any).escapeListener = this.escapeListener.bind(this);
     (this: any).onEndedCb = this.onEndedCb.bind(this);
   }
@@ -73,10 +77,7 @@ class FileRender extends React.PureComponent<Props> {
   }
 
   onEndedCb() {
-    const { autoplay, nextUnplayed, history } = this.props;
-    if (autoplay && nextUnplayed) {
-      history.push(formatLbryUrlForWeb(nextUnplayed));
-    }
+    this.setState({ showAutoplayCountdown: true });
   }
 
   renderViewer() {
@@ -188,10 +189,12 @@ class FileRender extends React.PureComponent<Props> {
   }
 
   render() {
-    const { isText } = this.props;
+    const { isText, uri } = this.props;
+    const { showAutoplayCountdown } = this.state;
 
     return (
       <div className={classnames('file-render', { 'file-render--document': isText })}>
+        {showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
         <Suspense fallback={<div />}>{this.renderViewer()}</Suspense>
       </div>
     );
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index b54858be9..cd48c50ed 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -38,7 +38,6 @@ type Props = {
   changeVolume: number => void,
   savePosition: (string, number) => void,
   changeMute: boolean => void,
-  setPlayingUri: (string | null) => void,
   source: string,
   contentType: string,
   thumbnail: string,
@@ -48,18 +47,7 @@ type Props = {
 };
 
 function VideoViewer(props: Props) {
-  const {
-    contentType,
-    source,
-    setPlayingUri,
-    onEndedCB,
-    changeVolume,
-    changeMute,
-    volume,
-    muted,
-    thumbnail,
-    claim,
-  } = props;
+  const { contentType, source, onEndedCB, changeVolume, changeMute, volume, muted, thumbnail, claim } = props;
   const claimId = claim && claim.claim_id;
   const videoRef = useRef();
   const isAudio = contentType.includes('audio');
@@ -85,13 +73,13 @@ function VideoViewer(props: Props) {
     }
 
     function doEnded() {
-      // clear position
-      setPlayingUri(null);
       onEndedCB();
     }
+
     function doPause(e: Event) {
       // store position e.target.currentTime
     }
+
     function doVolume(e: Event) {
       // $FlowFixMe volume is missing in EventTarget
       changeVolume(e.target.volume);
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index c96698934..1613db1d5 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -153,3 +153,36 @@
     }
   }
 }
+
+.video-overlay__wrapper {
+  position: absolute;
+  left: auto;
+  right: auto;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 999;
+  color: var(--color-white);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .button--uri-indicator {
+    color: var(--color-gray-3);
+  }
+}
+
+.video-overlay__title {
+  @extend .section__title;
+  margin-top: var(--spacing-medium);
+  margin-bottom: var(--spacing-small);
+}
+
+.video-overlay__subtitle {
+  color: var(--color-gray-3);
+  margin: var(--spacing-medium) 0;
+}
+.video-overlay__actions {
+  margin-top: var(--spacing-large);
+}
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index bfe266c44..16c3584c5 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -92,6 +92,11 @@
   margin-top: var(--spacing-medium);
 }
 
+.section__actions--centered {
+  @extend .section__actions;
+  justify-content: center;
+}
+
 @media (max-width: $breakpoint-small) {
   .section__actions {
     flex-wrap: wrap;

From f4da12128a0b72b90db14efe236dc1ac824bc9e0 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 27 Jan 2020 14:32:20 -0500
Subject: [PATCH 07/16] disable countdown for floating window

---
 ui/component/autoplayCountdown/index.js |  5 +++-
 ui/component/autoplayCountdown/view.jsx | 12 ++++++--
 ui/component/fileRender/index.js        | 11 ++++++-
 ui/component/fileRender/view.jsx        | 39 +++++++++++++++++++------
 ui/component/floatingViewer/view.jsx    |  6 +++-
 5 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/ui/component/autoplayCountdown/index.js b/ui/component/autoplayCountdown/index.js
index e7e53d559..e965abcc3 100644
--- a/ui/component/autoplayCountdown/index.js
+++ b/ui/component/autoplayCountdown/index.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { makeSelectClaimForUri } from 'lbry-redux';
 import { makeSelectNextUnplayedRecommended } from 'redux/selectors/content';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { doSetPlayingUri } from 'redux/actions/content';
 import RecommendedVideos from './view';
 
 const select = (state, props) => {
@@ -14,7 +15,9 @@ const select = (state, props) => {
   };
 };
 
-const perform = (dispatch, ownProps) => ({});
+const perform = dispatch => ({
+  setPlayingUri: uri => dispatch(doSetPlayingUri(uri)),
+});
 
 export default connect(
   select,
diff --git a/ui/component/autoplayCountdown/view.jsx b/ui/component/autoplayCountdown/view.jsx
index 645cbed1f..4ea1a5861 100644
--- a/ui/component/autoplayCountdown/view.jsx
+++ b/ui/component/autoplayCountdown/view.jsx
@@ -9,12 +9,14 @@ type Props = {
   history: { push: string => void },
   nextRecommendedClaim: ?StreamClaim,
   nextRecommendedUri: string,
+  setPlayingUri: (string | null) => void,
 };
 
 function AutoplayCountdown(props: Props) {
   const {
     nextRecommendedUri,
     nextRecommendedClaim,
+    setPlayingUri,
     history: { push },
   } = props;
   const nextTitle = nextRecommendedClaim && nextRecommendedClaim.value && nextRecommendedClaim.value.title;
@@ -32,6 +34,8 @@ function AutoplayCountdown(props: Props) {
       interval = setInterval(() => {
         const newTime = timer - 1;
         if (newTime === 0) {
+          // Set the playingUri to null so the app doesn't try to make a floating window with the video that just finished
+          setPlayingUri(null);
           push(navigateUrl);
         } else {
           setTimer(timer - 1);
@@ -41,7 +45,7 @@ function AutoplayCountdown(props: Props) {
     return () => {
       clearInterval(interval);
     };
-  }, [timer, navigateUrl, push, timerCanceled]);
+  }, [timer, navigateUrl, push, timerCanceled, setPlayingUri, nextRecommendedUri]);
 
   if (timerCanceled) {
     return null;
@@ -49,12 +53,14 @@ function AutoplayCountdown(props: Props) {
 
   return (
     <div className="video-overlay__wrapper">
-      <div className="video-overlay__subtitle">Up Next</div>
+      <div className="video-overlay__subtitle">{__('Up Next')}</div>
       <div className="video-overlay__title">{nextTitle}</div>
       <UriIndicator link uri={nextRecommendedUri} />
 
       <div className="video-overlay__actions">
-        <div className="video-overlay__subtitle">Playing in {timer} seconds</div>
+        <div className="video-overlay__subtitle">
+          {__('Playing in %seconds_left% seconds', { seconds_left: timer })}
+        </div>
         <div className="section__actions--centered">
           <Button label={__('Cancel')} button="secondary" onClick={() => setTimerCanceled(true)} />
         </div>
diff --git a/ui/component/fileRender/index.js b/ui/component/fileRender/index.js
index 99f1979e1..a9973b57c 100644
--- a/ui/component/fileRender/index.js
+++ b/ui/component/fileRender/index.js
@@ -11,6 +11,7 @@ import {
 import * as SETTINGS from 'constants/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { makeSelectIsText } from 'redux/selectors/content';
+import { doSetPlayingUri } from 'redux/actions/content';
 import FileRender from './view';
 
 const select = (state, props) => ({
@@ -22,7 +23,15 @@ const select = (state, props) => ({
   downloadPath: makeSelectDownloadPathForUri(props.uri)(state),
   fileName: makeSelectFileNameForUri(props.uri)(state),
   streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
+  autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
   isText: makeSelectIsText(props.uri)(state),
 });
 
-export default connect(select)(FileRender);
+const perform = dispatch => ({
+  setPlayingUri: uri => dispatch(doSetPlayingUri(uri)),
+});
+
+export default connect(
+  select,
+  perform
+)(FileRender);
diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index e2250db0b..3545726d0 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -36,6 +36,9 @@ type Props = {
   currentTheme: string,
   downloadPath: string,
   fileName: string,
+  autoplay: boolean,
+  setPlayingUri: (string | null) => void,
+  currentlyFloating: boolean,
 };
 
 type State = {
@@ -51,7 +54,8 @@ class FileRender extends React.PureComponent<Props, State> {
     };
 
     (this: any).escapeListener = this.escapeListener.bind(this);
-    (this: any).onEndedCb = this.onEndedCb.bind(this);
+    (this: any).onEndedAutoplay = this.onEndedAutoplay.bind(this);
+    (this: any).getOnEndedCb = this.getOnEndedCb.bind(this);
   }
 
   componentDidMount() {
@@ -76,8 +80,25 @@ class FileRender extends React.PureComponent<Props, State> {
     remote.getCurrentWindow().setFullScreen(false);
   }
 
-  onEndedCb() {
-    this.setState({ showAutoplayCountdown: true });
+  getOnEndedCb() {
+    const { setPlayingUri, currentlyFloating } = this.props;
+
+    if (!currentlyFloating) {
+      return this.onEndedAutoplay;
+    }
+
+    // if (embeded) {
+    //   return this.onEndedEmbed
+    // }
+
+    return () => setPlayingUri(null);
+  }
+
+  onEndedAutoplay() {
+    const { autoplay } = this.props;
+    if (autoplay) {
+      this.setState({ showAutoplayCountdown: true });
+    }
   }
 
   renderViewer() {
@@ -99,8 +120,8 @@ class FileRender extends React.PureComponent<Props, State> {
       application: <AppViewer uri={uri} />,
       // @endif
 
-      video: <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />,
-      audio: <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />,
+      video: <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.getOnEndedCb()} />,
+      audio: <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.getOnEndedCb()} />,
       image: <ImageViewer uri={uri} source={source} />,
       // Add routes to viewer...
     };
@@ -108,10 +129,10 @@ class FileRender extends React.PureComponent<Props, State> {
     // Supported contentTypes
     const contentTypes = {
       'application/x-ext-mkv': (
-        <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />
+        <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.getOnEndedCb()} />
       ),
       'video/x-matroska': (
-        <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />
+        <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.getOnEndedCb()} />
       ),
       'application/pdf': <PdfViewer source={downloadPath || source} />,
       'text/html': <HtmlViewer source={downloadPath || source} />,
@@ -189,12 +210,12 @@ class FileRender extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { isText, uri } = this.props;
+    const { isText, uri, currentlyFloating } = this.props;
     const { showAutoplayCountdown } = this.state;
 
     return (
       <div className={classnames('file-render', { 'file-render--document': isText })}>
-        {showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
+        {!currentlyFloating && showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
         <Suspense fallback={<div />}>{this.renderViewer()}</Suspense>
       </div>
     );
diff --git a/ui/component/floatingViewer/view.jsx b/ui/component/floatingViewer/view.jsx
index cf0e644dc..51965ff4e 100644
--- a/ui/component/floatingViewer/view.jsx
+++ b/ui/component/floatingViewer/view.jsx
@@ -175,7 +175,11 @@ export default function FileViewer(props: Props) {
             </div>
           )}
 
-          {isReadyToPlay ? <FileRender uri={uri} /> : <LoadingScreen status={loadingMessage} />}
+          {isReadyToPlay ? (
+            <FileRender currentlyFloating={!inline} uri={uri} />
+          ) : (
+            <LoadingScreen status={loadingMessage} />
+          )}
           {!inline && (
             <div className="draggable content__info">
               <div className="claim-preview-title" title={title || uri}>

From 9a370807696f868f1c757edda8e684bf6a6e7f8f Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 27 Jan 2020 15:02:58 -0500
Subject: [PATCH 08/16] clean up mobile styling

---
 ui/component/autoplayCountdown/view.jsx | 10 +++++---
 ui/scss/component/_file-render.scss     | 34 ++++++++++++++++++++++++-
 ui/scss/component/section.scss          |  4 +++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/ui/component/autoplayCountdown/view.jsx b/ui/component/autoplayCountdown/view.jsx
index 4ea1a5861..83121d136 100644
--- a/ui/component/autoplayCountdown/view.jsx
+++ b/ui/component/autoplayCountdown/view.jsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import Button from 'component/button';
 import UriIndicator from 'component/uriIndicator';
+import I18nMessage from 'component/i18nMessage';
 import { formatLbryUrlForWeb } from 'util/url';
 import { withRouter } from 'react-router';
 
@@ -53,16 +54,19 @@ function AutoplayCountdown(props: Props) {
 
   return (
     <div className="video-overlay__wrapper">
-      <div className="video-overlay__subtitle">{__('Up Next')}</div>
+      <div className="video-overlay__subtitle">
+        <I18nMessage tokens={{ channel: <UriIndicator link uri={nextRecommendedUri} /> }}>
+          Up Next by %channel%
+        </I18nMessage>
+      </div>
       <div className="video-overlay__title">{nextTitle}</div>
-      <UriIndicator link uri={nextRecommendedUri} />
 
       <div className="video-overlay__actions">
         <div className="video-overlay__subtitle">
           {__('Playing in %seconds_left% seconds', { seconds_left: timer })}
         </div>
         <div className="section__actions--centered">
-          <Button label={__('Cancel')} button="secondary" onClick={() => setTimerCanceled(true)} />
+          <Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} />
         </div>
       </div>
     </div>
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 1613db1d5..ede2d0eab 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -167,22 +167,54 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: var(--spacing-large);
 
   .button--uri-indicator {
     color: var(--color-gray-3);
   }
+
+  @media (max-width: $breakpoint-small) {
+    align-items: flex-start;
+    padding: var(--spacing-small);
+
+    .button,
+    .video-overlay__subtitle,
+    .video-overlay__actions {
+      font-size: var(--font-small);
+    }
+  }
 }
 
 .video-overlay__title {
-  @extend .section__title;
+  font-size: var(--font-title);
+  font-weight: var(--font-weight-light);
   margin-top: var(--spacing-medium);
   margin-bottom: var(--spacing-small);
+
+  @media (max-width: $breakpoint-small) {
+    margin: 0;
+    font-size: var(--font-medium);
+  }
 }
 
 .video-overlay__subtitle {
   color: var(--color-gray-3);
   margin: var(--spacing-medium) 0;
+  line-height: 1;
+
+  @media (max-width: $breakpoint-small) {
+    margin: 0;
+  }
 }
+
 .video-overlay__actions {
   margin-top: var(--spacing-large);
+
+  .button--link {
+    color: var(--color-white);
+  }
+
+  @media (max-width: $breakpoint-small) {
+    margin-top: var(--spacing-small);
+  }
 }
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 16c3584c5..68ca05e56 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -95,6 +95,10 @@
 .section__actions--centered {
   @extend .section__actions;
   justify-content: center;
+
+  @media (max-width: $breakpoint-small) {
+    justify-content: flex-start;
+  }
 }
 
 @media (max-width: $breakpoint-small) {

From 8e9aa9367dcd7f3e8415845f9a6d6b1a4cb3b7fe Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Mon, 27 Jan 2020 18:17:31 -0500
Subject: [PATCH 09/16] moves Library from menu to sidebar

---
 ui/component/header/view.jsx         |  8 --------
 ui/component/sideNavigation/view.jsx | 10 +++++-----
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index f5afafb13..18fee57f8 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -165,14 +165,6 @@ const Header = (props: Props) => {
                       <Icon aria-hidden icon={ICONS.CHANNEL} />
                       {__('Channels')}
                     </MenuItem>
-
-                    {/* @if TARGET='app' */}
-                    <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.LIBRARY}`)}>
-                      <Icon aria-hidden icon={ICONS.LIBRARY} />
-                      {__('Library')}
-                    </MenuItem>
-                    {/* @endif */}
-
                     <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
                       <Icon aria-hidden icon={ICONS.FEATURED} />
                       {__('Rewards')}
diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index eb2709238..a337a5fe5 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@@ -112,6 +112,11 @@ function SideNavigation(props: Props) {
             {
               ...buildLink(PAGES.DISCOVER, __('All Content'), ICONS.DISCOVER),
             },
+            // @if TARGET='app'
+            {
+              ...buildLink(PAGES.LIBRARY, __('Library'), ICONS.LIBRARY),
+            },
+            // @endif
           ].map(linkProps => (
             <li key={linkProps.navigate}>
               <Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" />
@@ -120,11 +125,6 @@ function SideNavigation(props: Props) {
 
           {expanded &&
             [
-              // @if TARGET='app'
-              {
-                ...buildLink(PAGES.LIBRARY, __('Library'), ICONS.LIBRARY),
-              },
-              // @endif
               {
                 ...buildLink(PAGES.CHANNELS, __('Channels'), ICONS.CHANNEL),
               },

From 77a05caa3b31eb08e54f39cb303a793cc23cd0f0 Mon Sep 17 00:00:00 2001
From: Dalton <dalton.hill2022@gmail.com>
Date: Mon, 27 Jan 2020 20:47:48 -0600
Subject: [PATCH 10/16] prevents the mouse wheel from scrolling the page when
 the user is focused on the lbc form element

fixes mousewheel lbc actions on creating publish
---
 ui/component/channelCreate/view.jsx | 1 +
 ui/component/publishName/view.jsx   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/ui/component/channelCreate/view.jsx b/ui/component/channelCreate/view.jsx
index 9f1caebe1..d2a53ba15 100644
--- a/ui/component/channelCreate/view.jsx
+++ b/ui/component/channelCreate/view.jsx
@@ -147,6 +147,7 @@ class ChannelCreate extends React.PureComponent<Props, State> {
             error={newChannelBidError}
             value={newChannelBid}
             onChange={event => this.handleNewChannelBidChange(parseFloat(event.target.value))}
+            onWheel={e => e.stopPropagation()}
           />
           <div className="card__actions">
             <Button
diff --git a/ui/component/publishName/view.jsx b/ui/component/publishName/view.jsx
index 66b6d1e40..4aa7836ee 100644
--- a/ui/component/publishName/view.jsx
+++ b/ui/component/publishName/view.jsx
@@ -113,6 +113,7 @@ function PublishName(props: Props) {
             error={bidError}
             disabled={!name}
             onChange={event => updatePublishForm({ bid: parseFloat(event.target.value) })}
+            onWheel={e => e.stopPropagation()}
             helper={
               <BidHelpText
                 uri={'lbry://' + name}

From 33672a789bf866b2e8687dbb16f4d95d323a171d Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Mon, 30 Dec 2019 14:54:53 -0500
Subject: [PATCH 11/16] app plays embed in iframe

make player full screen and prepared for overlay actions

small changes

cleanup
---
 lbrytv/src/routes.js                          | 10 ++----
 static/app-strings.json                       |  5 +++
 .../{embedArea => embedTextArea}/index.js     |  4 +--
 .../{embedArea => embedTextArea}/view.jsx     |  2 +-
 ui/component/fileRender/view.jsx              | 17 ++++++++--
 ui/component/router/view.jsx                  |  4 +++
 ui/component/socialShare/view.jsx             |  4 +--
 ui/constants/pages.js                         |  1 +
 ui/effects/use-persisted-state.js             | 10 ++++--
 ui/i18n.js                                    | 10 +++++-
 ui/page/embedWrapper/index.js                 | 26 ++++++++++++++++
 ui/page/embedWrapper/view.jsx                 | 31 +++++++++++++++++++
 ui/redux/reducers/app.js                      |  4 ++-
 ui/redux/reducers/settings.js                 | 25 ++++++++-------
 ui/scss/all.scss                              |  1 +
 ui/scss/component/_embed-player.scss          |  9 ++++++
 ui/scss/component/_file-render.scss           | 25 +++++++++++++++
 17 files changed, 156 insertions(+), 32 deletions(-)
 rename ui/component/{embedArea => embedTextArea}/index.js (70%)
 rename ui/component/{embedArea => embedTextArea}/view.jsx (96%)
 create mode 100644 ui/page/embedWrapper/index.js
 create mode 100644 ui/page/embedWrapper/view.jsx
 create mode 100644 ui/scss/component/_embed-player.scss

diff --git a/lbrytv/src/routes.js b/lbrytv/src/routes.js
index 12b1eda0e..6bf96dbb8 100644
--- a/lbrytv/src/routes.js
+++ b/lbrytv/src/routes.js
@@ -1,16 +1,10 @@
 const { getHtml } = require('./html');
-const { generateStreamUrl, generateDownloadUrl } = require('../../ui/util/lbrytv');
+const { generateDownloadUrl } = require('../../ui/util/lbrytv');
+const { LBRY_TV_API } = require('../../config');
 const Router = require('@koa/router');
-const send = require('koa-send');
 
 const router = new Router();
 
-router.get(`/$/embed/:claimName/:claimId`, async ctx => {
-  const { claimName, claimId } = ctx.params;
-  const streamUrl = generateStreamUrl(claimName, claimId);
-  ctx.redirect(streamUrl);
-});
-
 router.get(`/$/download/:claimName/:claimId`, async ctx => {
   const { claimName, claimId } = ctx.params;
   const downloadUrl = generateDownloadUrl(claimName, claimId);
diff --git a/static/app-strings.json b/static/app-strings.json
index 14b49b2a1..cf0416b11 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -912,6 +912,7 @@
   "%claimsInChannel% publish": "%claimsInChannel% publish",
   "Publishing": "Publishing",
   "Update published": "Update published",
+<<<<<<< HEAD
   "Delete this file from my computer": "Delete this file from my computer",
   "Are you sure you'd like to remove %title% from LBRY?": "Are you sure you'd like to remove %title% from LBRY?",
   "This will increase the overall bid amount for %title%, which will boost its ability to be discovered while active.": "This will increase the overall bid amount for %title%, which will boost its ability to be discovered while active.",
@@ -919,3 +920,7 @@
   "You deposited %amount% LBC as a support!": "You deposited %amount% LBC as a support!",
   "LBRY Link": "LBRY Link"
 }
+=======
+  "Install Now": "Install Now"
+}
+>>>>>>> app plays embed in iframe
diff --git a/ui/component/embedArea/index.js b/ui/component/embedTextArea/index.js
similarity index 70%
rename from ui/component/embedArea/index.js
rename to ui/component/embedTextArea/index.js
index 263e761f4..78059cb26 100644
--- a/ui/component/embedArea/index.js
+++ b/ui/component/embedTextArea/index.js
@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
 import { doToast } from 'lbry-redux';
-import EmbedArea from './view';
+import EmbedTextArea from './view';
 
 export default connect(
   null,
   {
     doToast,
   }
-)(EmbedArea);
+)(EmbedTextArea);
diff --git a/ui/component/embedArea/view.jsx b/ui/component/embedTextArea/view.jsx
similarity index 96%
rename from ui/component/embedArea/view.jsx
rename to ui/component/embedTextArea/view.jsx
index d1be7fb74..2b2df6807 100644
--- a/ui/component/embedArea/view.jsx
+++ b/ui/component/embedTextArea/view.jsx
@@ -13,7 +13,7 @@ type Props = {
   claim: Claim,
 };
 
-export default function EmbedArea(props: Props) {
+export default function EmbedTextArea(props: Props) {
   const { doToast, snackMessage, label, claim } = props;
   const { claim_id: claimId, name } = claim;
   const input = useRef();
diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index 3545726d0..0548df1af 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -31,6 +31,7 @@ type Props = {
   mediaType: string,
   isText: true,
   streamingUrl: string,
+  embedUrl?: string,
   contentType: string,
   claim: StreamClaim,
   currentTheme: string,
@@ -102,12 +103,23 @@ class FileRender extends React.PureComponent<Props, State> {
   }
 
   renderViewer() {
-    const { mediaType, currentTheme, claim, contentType, downloadPath, fileName, streamingUrl, uri } = this.props;
+    const {
+      mediaType,
+      currentTheme,
+      claim,
+      contentType,
+      downloadPath,
+      fileName,
+      streamingUrl,
+      embedUrl,
+      uri,
+    } = this.props;
     const fileType = fileName && path.extname(fileName).substring(1);
+    const streamUrl = embedUrl || streamingUrl;
 
     // Ideally the lbrytv api server would just replace the streaming_url returned by the sdk so we don't need this check
     // https://github.com/lbryio/lbrytv/issues/51
-    const source = IS_WEB ? generateStreamUrl(claim.name, claim.claim_id) : streamingUrl;
+    const source = IS_WEB ? generateStreamUrl(claim.name, claim.claim_id) : streamUrl;
 
     // Human-readable files (scripts and plain-text files)
     const readableFiles = ['text', 'document', 'script'];
@@ -208,7 +220,6 @@ class FileRender extends React.PureComponent<Props, State> {
     // Return viewer
     return viewer || unsupported;
   }
-
   render() {
     const { isText, uri, currentlyFloating } = this.props;
     const { showAutoplayCountdown } = this.state;
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index bb7cba172..646b3daed 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -28,6 +28,7 @@ import FourOhFourPage from 'page/fourOhFour';
 import SignInPage from 'page/signIn';
 import SignInVerifyPage from 'page/signInVerify';
 import ChannelsPage from 'page/channels';
+import EmbedWrapperPage from 'page/embedWrapper';
 
 // Tell the browser we are handling scroll restoration
 if ('scrollRestoration' in history) {
@@ -105,6 +106,9 @@ function AppRouter(props: Props) {
       <PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
 
+      <Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
+      <Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />
+
       {/* Below need to go at the end to make sure we don't match any of our pages first */}
       <Route path="/:claimName" exact component={ShowPage} />
       <Route path="/:claimName/:streamName" exact component={ShowPage} />
diff --git a/ui/component/socialShare/view.jsx b/ui/component/socialShare/view.jsx
index fa70ce64f..679d65d18 100644
--- a/ui/component/socialShare/view.jsx
+++ b/ui/component/socialShare/view.jsx
@@ -3,7 +3,7 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import Button from 'component/button';
 import CopyableText from 'component/copyableText';
-import EmbedArea from 'component/embedArea';
+import EmbedTextArea from 'component/embedTextArea';
 
 type Props = {
   claim: Claim,
@@ -58,7 +58,7 @@ class SocialShare extends React.PureComponent<Props> {
             href={`https://twitter.com/intent/tweet?text=${encodedLbryURL}`}
           />
         </div>
-        {webShareable && !isChannel && <EmbedArea label={__('Embedded')} claim={claim} noSnackbar />}
+        {webShareable && !isChannel && <EmbedTextArea label={__('Embedded')} claim={claim} noSnackbar />}
       </React.Fragment>
     );
   }
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index b94baa99e..5084f982d 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -27,3 +27,4 @@ exports.CHANNELS_FOLLOWING_MANAGE = 'following/channels/manage';
 exports.WALLET = 'wallet';
 exports.BLOCKED = 'blocked';
 exports.CHANNELS = 'channels';
+exports.EMBED = 'embed';
diff --git a/ui/effects/use-persisted-state.js b/ui/effects/use-persisted-state.js
index 466572eb2..c929a45aa 100644
--- a/ui/effects/use-persisted-state.js
+++ b/ui/effects/use-persisted-state.js
@@ -3,7 +3,13 @@ import { useState, useEffect } from 'react';
 export default function usePersistedState(key, firstTimeDefault) {
   // If no key is passed in, act as a normal `useState`
   let defaultValue;
-  if (key) {
+  let localStorageAvailable;
+  try {
+    localStorageAvailable = Boolean(window.localStorage);
+  } catch (e) {
+    localStorageAvailable = false;
+  }
+  if (key && localStorageAvailable) {
     let item = localStorage.getItem(key);
 
     if (item) {
@@ -27,7 +33,7 @@ export default function usePersistedState(key, firstTimeDefault) {
   const [value, setValue] = useState(defaultValue);
 
   useEffect(() => {
-    if (key) {
+    if (key && localStorageAvailable) {
       localStorage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : value);
     }
   }, [key, value]);
diff --git a/ui/i18n.js b/ui/i18n.js
index dde2402ce..b019e1510 100644
--- a/ui/i18n.js
+++ b/ui/i18n.js
@@ -4,6 +4,12 @@ let fs = require('fs');
 
 const isProduction = process.env.NODE_ENV === 'production';
 let knownMessages = null;
+let localStorageAvailable;
+try {
+  localStorageAvailable = Boolean(window.localStorage);
+} catch (e) {
+  localStorageAvailable = false;
+}
 
 window.i18n_messages = window.i18n_messages || {};
 
@@ -44,7 +50,9 @@ function saveMessage(message) {
 // @endif
 
 export function __(message, tokens) {
-  const language = window.localStorage.getItem('language') || 'en';
+  const language = localStorageAvailable
+    ? window.localStorage.getItem('language') || 'en'
+    : window.navigator.language.slice(0, 2) || 'en';
 
   if (!isProduction) {
     saveMessage(message);
diff --git a/ui/page/embedWrapper/index.js b/ui/page/embedWrapper/index.js
new file mode 100644
index 000000000..0894cf847
--- /dev/null
+++ b/ui/page/embedWrapper/index.js
@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import EmbedWrapperPage from './view';
+import { doResolveUri, makeSelectClaimForUri } from 'lbry-redux';
+import { generateStreamUrl } from 'util/lbrytv';
+
+const select = (state, props) => {
+  const PROTOCOL = 'lbry://';
+  const { match } = props;
+  const { params } = match;
+  const { claimName, claimId } = params;
+  const uri = PROTOCOL + claimName + (claimId ? `#${claimId}` : '');
+  return {
+    uri,
+    claim: makeSelectClaimForUri(uri)(state),
+    streamUrl: generateStreamUrl(claimName, claimId),
+  };
+};
+
+const perform = dispatch => ({
+  resolveUri: uri => dispatch(doResolveUri(uri)),
+});
+
+export default connect(
+  select,
+  perform
+)(EmbedWrapperPage);
diff --git a/ui/page/embedWrapper/view.jsx b/ui/page/embedWrapper/view.jsx
new file mode 100644
index 000000000..0e9d78e70
--- /dev/null
+++ b/ui/page/embedWrapper/view.jsx
@@ -0,0 +1,31 @@
+// @flow
+import React, { useEffect } from 'react';
+import FileRender from 'component/fileRender';
+import Spinner from 'component/spinner';
+
+type Props = {
+  uri: string,
+  resolveUri: string => void,
+  claim: Claim,
+  streamUrl: string,
+};
+const EmbedWrapperPage = (props: Props) => {
+  const { resolveUri, claim, uri, streamUrl } = props;
+  useEffect(() => {
+    if (resolveUri && uri) {
+      resolveUri(uri);
+    }
+  }, []);
+
+  if (uri && claim) {
+    return (
+      <div className={'embed__wrapper'}>
+        <FileRender uri={uri} embedUrl={streamUrl} />
+      </div>
+    );
+  } else {
+    return <Spinner />;
+  }
+};
+
+export default EmbedWrapperPage;
diff --git a/ui/redux/reducers/app.js b/ui/redux/reducers/app.js
index 5746fddd3..c68cc00e7 100644
--- a/ui/redux/reducers/app.js
+++ b/ui/redux/reducers/app.js
@@ -45,12 +45,14 @@ const defaultState: AppState = {
   modal: null,
   modalProps: {},
   platform: process.platform,
-  upgradeSkipped: sessionStorage.getItem('upgradeSkipped') === 'true',
   daemonVersionMatched: null,
   daemonReady: false,
   hasSignature: false,
   badgeNumber: 0,
+  // @if TARGET='app'
+  upgradeSkipped: sessionStorage.getItem('upgradeSkipped') === 'true',
   volume: Number(sessionStorage.getItem('volume')) || 1,
+  // @endif
   muted: false,
   autoUpdateDownloaded: false,
   autoUpdateDeclined: false,
diff --git a/ui/redux/reducers/settings.js b/ui/redux/reducers/settings.js
index 65baba55a..ae23dc6c3 100644
--- a/ui/redux/reducers/settings.js
+++ b/ui/redux/reducers/settings.js
@@ -5,6 +5,14 @@ import SUPPORTED_LANGUAGES from 'constants/supported_languages';
 import { ACTIONS as LBRY_REDUX_ACTIONS, SHARED_PREFERENCES } from 'lbry-redux';
 
 const reducers = {};
+let settingLanguage = [];
+try {
+  let appLanguage = window.localStorage.getItem(SETTINGS.LANGUAGE);
+  settingLanguage.push(appLanguage);
+} catch (e) {}
+settingLanguage.push(window.navigator.language.slice(0, 2));
+settingLanguage.push('en');
+
 const defaultState = {
   isNight: false,
   loadedLanguages: [...Object.keys(window.i18n_messages), 'en'] || ['en'],
@@ -21,11 +29,7 @@ const defaultState = {
     [SETTINGS.ENABLE_SYNC]: true,
 
     // UI
-    [SETTINGS.LANGUAGE]: [
-      window.localStorage.getItem(SETTINGS.LANGUAGE),
-      window.navigator.language.slice(0, 2),
-      'en',
-    ].find(language => SUPPORTED_LANGUAGES[language]),
+    [SETTINGS.LANGUAGE]: settingLanguage.find(language => SUPPORTED_LANGUAGES[language]),
     [SETTINGS.THEME]: __('light'),
     [SETTINGS.THEMES]: [__('light'), __('dark')],
     [SETTINGS.SUPPORT_OPTION]: false,
@@ -111,7 +115,7 @@ reducers[LBRY_REDUX_ACTIONS.SHARED_PREFERENCE_SET] = (state, action) => {
   return Object.assign({}, state, {
     sharedPreferences,
   });
-}
+};
 
 reducers[ACTIONS.CLIENT_SETTING_CHANGED] = (state, action) => {
   const { key, value } = action.data;
@@ -124,10 +128,7 @@ reducers[ACTIONS.CLIENT_SETTING_CHANGED] = (state, action) => {
   });
 };
 
-reducers[LBRY_REDUX_ACTIONS.USER_STATE_POPULATE] = (
-  state,
-  action,
-) => {
+reducers[LBRY_REDUX_ACTIONS.USER_STATE_POPULATE] = (state, action) => {
   const { settings: sharedPreferences } = action.data;
 
   // process clientSettings and daemonSettings
@@ -135,8 +136,8 @@ reducers[LBRY_REDUX_ACTIONS.USER_STATE_POPULATE] = (
 };
 
 reducers[LBRY_REDUX_ACTIONS.SAVE_CUSTOM_WALLET_SERVERS] = (state, action) => {
-  return Object.assign({}, state, {customWalletServers: action.data});
-}
+  return Object.assign({}, state, { customWalletServers: action.data });
+};
 
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index f1953157c..79e84e598 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -15,6 +15,7 @@
 @import 'component/comments';
 @import 'component/content';
 @import 'component/dat-gui';
+@import 'component/embed-player';
 @import 'component/expandable';
 @import 'component/file-properties';
 @import 'component/file-render';
diff --git a/ui/scss/component/_embed-player.scss b/ui/scss/component/_embed-player.scss
new file mode 100644
index 000000000..0f5872278
--- /dev/null
+++ b/ui/scss/component/_embed-player.scss
@@ -0,0 +1,9 @@
+.embed__wrapper {
+  height: 100vh;
+  width: 100vw;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index ede2d0eab..820e9b39d 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -154,6 +154,7 @@
   }
 }
 
+<<<<<<< HEAD
 .video-overlay__wrapper {
   position: absolute;
   left: auto;
@@ -218,3 +219,27 @@
     margin-top: var(--spacing-small);
   }
 }
+=======
+.file-render__embed {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  .video-js {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .vjs-big-play-button {
+      @extend .button--icon;
+      @extend .button--play;
+      border: none;
+      position: static;
+      z-index: 2;
+
+      .vjs-icon-placeholder {
+        display: none;
+      }
+    }
+  }
+}
+>>>>>>> app plays embed in iframe

From 3e40838ae3553ffbd74a33301f4cbbe3a91b9d13 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Mon, 27 Jan 2020 16:37:54 -0500
Subject: [PATCH 12/16] add review changes

---
 ui/component/fileRender/view.jsx | 27 +++++++++++----------------
 ui/page/embedWrapper/index.js    |  7 ++-----
 ui/page/embedWrapper/view.jsx    |  5 ++---
 ui/redux/reducers/app.js         |  6 +++++-
 4 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index 0548df1af..c9d392da4 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -31,7 +31,7 @@ type Props = {
   mediaType: string,
   isText: true,
   streamingUrl: string,
-  embedUrl?: string,
+  embedded?: boolean,
   contentType: string,
   claim: StreamClaim,
   currentTheme: string,
@@ -103,23 +103,12 @@ class FileRender extends React.PureComponent<Props, State> {
   }
 
   renderViewer() {
-    const {
-      mediaType,
-      currentTheme,
-      claim,
-      contentType,
-      downloadPath,
-      fileName,
-      streamingUrl,
-      embedUrl,
-      uri,
-    } = this.props;
+    const { mediaType, currentTheme, claim, contentType, downloadPath, fileName, streamingUrl, uri } = this.props;
     const fileType = fileName && path.extname(fileName).substring(1);
-    const streamUrl = embedUrl || streamingUrl;
 
     // Ideally the lbrytv api server would just replace the streaming_url returned by the sdk so we don't need this check
     // https://github.com/lbryio/lbrytv/issues/51
-    const source = IS_WEB ? generateStreamUrl(claim.name, claim.claim_id) : streamUrl;
+    const source = IS_WEB ? generateStreamUrl(claim.name, claim.claim_id) : streamingUrl;
 
     // Human-readable files (scripts and plain-text files)
     const readableFiles = ['text', 'document', 'script'];
@@ -221,11 +210,17 @@ class FileRender extends React.PureComponent<Props, State> {
     return viewer || unsupported;
   }
   render() {
-    const { isText, uri, currentlyFloating } = this.props;
+    const { isText, uri, currentlyFloating, embedded } = this.props;
     const { showAutoplayCountdown } = this.state;
 
     return (
-      <div className={classnames('file-render', { 'file-render--document': isText })}>
+      <div
+        className={classnames({
+          'file-render': !embedded,
+          'file-render--document': isText && !embedded,
+          'file-render__embed': embedded,
+        })}
+      >
         {!currentlyFloating && showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
         <Suspense fallback={<div />}>{this.renderViewer()}</Suspense>
       </div>
diff --git a/ui/page/embedWrapper/index.js b/ui/page/embedWrapper/index.js
index 0894cf847..fd7ac0ec8 100644
--- a/ui/page/embedWrapper/index.js
+++ b/ui/page/embedWrapper/index.js
@@ -1,18 +1,15 @@
 import { connect } from 'react-redux';
 import EmbedWrapperPage from './view';
-import { doResolveUri, makeSelectClaimForUri } from 'lbry-redux';
-import { generateStreamUrl } from 'util/lbrytv';
+import { doResolveUri, makeSelectClaimForUri, buildURI } from 'lbry-redux';
 
 const select = (state, props) => {
-  const PROTOCOL = 'lbry://';
   const { match } = props;
   const { params } = match;
   const { claimName, claimId } = params;
-  const uri = PROTOCOL + claimName + (claimId ? `#${claimId}` : '');
+  const uri = claimName && claimId ? buildURI({ claimName, claimId }) : '';
   return {
     uri,
     claim: makeSelectClaimForUri(uri)(state),
-    streamUrl: generateStreamUrl(claimName, claimId),
   };
 };
 
diff --git a/ui/page/embedWrapper/view.jsx b/ui/page/embedWrapper/view.jsx
index 0e9d78e70..74daaa11e 100644
--- a/ui/page/embedWrapper/view.jsx
+++ b/ui/page/embedWrapper/view.jsx
@@ -7,10 +7,9 @@ type Props = {
   uri: string,
   resolveUri: string => void,
   claim: Claim,
-  streamUrl: string,
 };
 const EmbedWrapperPage = (props: Props) => {
-  const { resolveUri, claim, uri, streamUrl } = props;
+  const { resolveUri, claim, uri } = props;
   useEffect(() => {
     if (resolveUri && uri) {
       resolveUri(uri);
@@ -20,7 +19,7 @@ const EmbedWrapperPage = (props: Props) => {
   if (uri && claim) {
     return (
       <div className={'embed__wrapper'}>
-        <FileRender uri={uri} embedUrl={streamUrl} />
+        <FileRender uri={uri} embedded />
       </div>
     );
   } else {
diff --git a/ui/redux/reducers/app.js b/ui/redux/reducers/app.js
index c68cc00e7..a6a5cec2c 100644
--- a/ui/redux/reducers/app.js
+++ b/ui/redux/reducers/app.js
@@ -49,9 +49,9 @@ const defaultState: AppState = {
   daemonReady: false,
   hasSignature: false,
   badgeNumber: 0,
+  volume: 1,
   // @if TARGET='app'
   upgradeSkipped: sessionStorage.getItem('upgradeSkipped') === 'true',
-  volume: Number(sessionStorage.getItem('volume')) || 1,
   // @endif
   muted: false,
   autoUpdateDownloaded: false,
@@ -73,6 +73,10 @@ const defaultState: AppState = {
 
 // @@router comes from react-router
 // This action is dispatched any time a user navigates forward or back
+try {
+  defaultState.volume = Number(sessionStorage.getItem('volume'));
+} catch (e) {}
+
 reducers['@@router/LOCATION_CHANGE'] = (state, action) => {
   const { currentScroll } = state;
   const scrollHistory = (state.scrollHistory && state.scrollHistory.slice()) || [];

From 94c41655a9c02af85b83d62836656e3be6a29f77 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 28 Jan 2020 10:18:33 -0500
Subject: [PATCH 13/16] add link to lbry.tv after content is finished playing

---
 static/app-strings.json             |  5 ---
 ui/component/fileRender/view.jsx    | 30 ++++++++++++++----
 ui/scss/component/_file-render.scss | 49 ++++++++++++++---------------
 3 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index cf0416b11..14b49b2a1 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -912,7 +912,6 @@
   "%claimsInChannel% publish": "%claimsInChannel% publish",
   "Publishing": "Publishing",
   "Update published": "Update published",
-<<<<<<< HEAD
   "Delete this file from my computer": "Delete this file from my computer",
   "Are you sure you'd like to remove %title% from LBRY?": "Are you sure you'd like to remove %title% from LBRY?",
   "This will increase the overall bid amount for %title%, which will boost its ability to be discovered while active.": "This will increase the overall bid amount for %title%, which will boost its ability to be discovered while active.",
@@ -920,7 +919,3 @@
   "You deposited %amount% LBC as a support!": "You deposited %amount% LBC as a support!",
   "LBRY Link": "LBRY Link"
 }
-=======
-  "Install Now": "Install Now"
-}
->>>>>>> app plays embed in iframe
diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index c9d392da4..d94dc6efd 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -44,6 +44,7 @@ type Props = {
 
 type State = {
   showAutoplayCountdown: boolean,
+  showEmbededMessage: boolean,
 };
 
 class FileRender extends React.PureComponent<Props, State> {
@@ -52,10 +53,12 @@ class FileRender extends React.PureComponent<Props, State> {
 
     this.state = {
       showAutoplayCountdown: false,
+      showEmbededMessage: false,
     };
 
     (this: any).escapeListener = this.escapeListener.bind(this);
     (this: any).onEndedAutoplay = this.onEndedAutoplay.bind(this);
+    (this: any).onEndedEmbedded = this.onEndedEmbedded.bind(this);
     (this: any).getOnEndedCb = this.getOnEndedCb.bind(this);
   }
 
@@ -82,16 +85,16 @@ class FileRender extends React.PureComponent<Props, State> {
   }
 
   getOnEndedCb() {
-    const { setPlayingUri, currentlyFloating } = this.props;
+    const { setPlayingUri, currentlyFloating, embedded } = this.props;
+
+    if (embedded) {
+      return this.onEndedEmbedded;
+    }
 
     if (!currentlyFloating) {
       return this.onEndedAutoplay;
     }
 
-    // if (embeded) {
-    //   return this.onEndedEmbed
-    // }
-
     return () => setPlayingUri(null);
   }
 
@@ -102,6 +105,10 @@ class FileRender extends React.PureComponent<Props, State> {
     }
   }
 
+  onEndedEmbedded() {
+    this.setState({ showEmbededMessage: true });
+  }
+
   renderViewer() {
     const { mediaType, currentTheme, claim, contentType, downloadPath, fileName, streamingUrl, uri } = this.props;
     const fileType = fileName && path.extname(fileName).substring(1);
@@ -211,7 +218,7 @@ class FileRender extends React.PureComponent<Props, State> {
   }
   render() {
     const { isText, uri, currentlyFloating, embedded } = this.props;
-    const { showAutoplayCountdown } = this.state;
+    const { showAutoplayCountdown, showEmbededMessage } = this.state;
 
     return (
       <div
@@ -221,6 +228,17 @@ class FileRender extends React.PureComponent<Props, State> {
           'file-render__embed': embedded,
         })}
       >
+        {embedded && showEmbededMessage && (
+          <div className="video-overlay__wrapper">
+            <div className="video-overlay__title">{__('View More on lbry.tv')}</div>
+
+            <div className="video-overlay__actions">
+              <div className="section__actions--centered">
+                <Button label={__('Explore')} button="primary" href="https://lbry.tv" />
+              </div>
+            </div>
+          </div>
+        )}
         {!currentlyFloating && showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
         <Suspense fallback={<div />}>{this.renderViewer()}</Suspense>
       </div>
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 820e9b39d..d767c9abc 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -154,7 +154,30 @@
   }
 }
 
-<<<<<<< HEAD
+.file-render__embed {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+
+  .video-js {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .vjs-big-play-button {
+      @extend .button--icon;
+      @extend .button--play;
+      border: none;
+      position: static;
+      z-index: 2;
+
+      .vjs-icon-placeholder {
+        display: none;
+      }
+    }
+  }
+}
+
 .video-overlay__wrapper {
   position: absolute;
   left: auto;
@@ -219,27 +242,3 @@
     margin-top: var(--spacing-small);
   }
 }
-=======
-.file-render__embed {
-  height: 100%;
-  width: 100%;
-  position: fixed;
-  .video-js {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .vjs-big-play-button {
-      @extend .button--icon;
-      @extend .button--play;
-      border: none;
-      position: static;
-      z-index: 2;
-
-      .vjs-icon-placeholder {
-        display: none;
-      }
-    }
-  }
-}
->>>>>>> app plays embed in iframe

From 3aa04f278ba996b2fe28c7842cb0b6a9291ee3c9 Mon Sep 17 00:00:00 2001
From: Thomas Zarebczan <thomas.zarebczan@gmail.com>
Date: Mon, 27 Jan 2020 14:38:08 -0500
Subject: [PATCH 14/16] fix: fix hack on New + following/tags page

Would never hit the 2nd condition.
---
 ui/component/claimListDiscover/view.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx
index 36b762a9d..fb80b16d7 100644
--- a/ui/component/claimListDiscover/view.jsx
+++ b/ui/component/claimListDiscover/view.jsx
@@ -116,20 +116,20 @@ function ClaimListDiscover(props: Props) {
     // For more than 20, drop it down to 6 months
     // This helps with timeout issues for users that are following a ton of stuff
     // https://github.com/lbryio/lbry-sdk/issues/2420
-    if (options.channel_ids.length > 10 || options.any_tags.length > 10) {
-      options.release_time = `>${Math.floor(
-        moment()
-          .subtract(1, TIME_YEAR)
-          .startOf('week')
-          .unix()
-      )}`;
-    } else if (options.channel_ids.length > 20 || options.any_tags.length > 20) {
+    if (options.channel_ids.length > 20 || options.any_tags.length > 20) {
       options.release_time = `>${Math.floor(
         moment()
           .subtract(6, TIME_MONTH)
           .startOf('week')
           .unix()
       )}`;
+    } else if (options.channel_ids.length > 10 || options.any_tags.length > 10) {
+      options.release_time = `>${Math.floor(
+        moment()
+          .subtract(1, TIME_YEAR)
+          .startOf('week')
+          .unix()
+      )}`;
     }
   }
 

From d5d553d51a37baf52b0d703eae366d87f4475c26 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 28 Jan 2020 10:49:52 -0500
Subject: [PATCH 15/16] make search bar higher contrast to see if it does
 anything

---
 ui/scss/component/_wunderbar.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss
index 214bf4966..6f3df429d 100644
--- a/ui/scss/component/_wunderbar.scss
+++ b/ui/scss/component/_wunderbar.scss
@@ -15,7 +15,7 @@
     height: 100%;
     position: absolute;
     z-index: 1;
-    stroke: var(--color-input-placeholder);
+    stroke: white;
   }
 }
 
@@ -53,6 +53,13 @@
   padding-right: var(--spacing-small);
   padding-left: 2.5rem;
   transition: all 0.2s;
+  background-color: #677e87;
+  color: white;
+
+  &::placeholder {
+    color: white;
+    opacity: 0.8;
+  }
 
   &:focus {
     border-radius: var(--border-radius);

From 980583687fad832bdb426bdd0dd455938b42aad9 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 28 Jan 2020 11:00:39 -0500
Subject: [PATCH 16/16] add src attribute for embed links

---
 ui/component/fileRender/view.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index d94dc6efd..e47bfa6e7 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -234,7 +234,7 @@ class FileRender extends React.PureComponent<Props, State> {
 
             <div className="video-overlay__actions">
               <div className="section__actions--centered">
-                <Button label={__('Explore')} button="primary" href="https://lbry.tv" />
+                <Button label={__('Explore')} button="primary" href="https://lbry.tv?src=embed" />
               </div>
             </div>
           </div>