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 { @@ -52,10 +53,12 @@ class FileRender extends React.PureComponent { 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 { } 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 { } } + 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 { } render() { const { isText, uri, currentlyFloating, embedded } = this.props; - const { showAutoplayCountdown } = this.state; + const { showAutoplayCountdown, showEmbededMessage } = this.state; return (
{ 'file-render__embed': embedded, })} > + {embedded && showEmbededMessage && ( +
+
{__('View More on lbry.tv')}
+ +
+
+
+
+
+ )} {!currentlyFloating && showAutoplayCountdown && } }>{this.renderViewer()}
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