From 9f1d4e3688e0a4ab35ca8f742b555c8a5e7b43c4 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Tue, 4 Feb 2020 16:14:08 -0500
Subject: [PATCH] embed improvements - autoplay=true param - mute on autoplay -
 thumb poster on embeds (unless autoplay) - twitter player card for audio too

---
 lbrytv/src/html.js                        |  5 +++-
 ui/component/viewers/videoViewer/index.js | 33 ++++++++++++++---------
 ui/component/viewers/videoViewer/view.jsx | 29 ++++++++++++++++----
 3 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/lbrytv/src/html.js b/lbrytv/src/html.js
index 26d597e0f..febd9c5ef 100644
--- a/lbrytv/src/html.js
+++ b/lbrytv/src/html.js
@@ -88,7 +88,10 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
   // below should be canonical_url, but not provided by chainquery yet
   head += `<meta property="og:url" content="${URL}/${claim.name}:${claim.claim_id}"/>`;
 
-  if (claim.source_media_type && claim.source_media_type.startsWith('video/')) {
+  if (
+    claim.source_media_type &&
+    (claim.source_media_type.startsWith('video/') || claim.source_media_type.startsWith('audio/'))
+  ) {
     const videoUrl = generateEmbedUrl(claim.name, claim.claim_id);
     head += `<meta property="og:video" content="${videoUrl}" />`;
     head += `<meta property="og:video:secure_url" content="${videoUrl}" />`;
diff --git a/ui/component/viewers/videoViewer/index.js b/ui/component/viewers/videoViewer/index.js
index 78a38982b..7604402a1 100644
--- a/ui/component/viewers/videoViewer/index.js
+++ b/ui/component/viewers/videoViewer/index.js
@@ -5,15 +5,22 @@ import { selectVolume, selectMute } from 'redux/selectors/app';
 import { savePosition, doSetPlayingUri } from 'redux/actions/content';
 import { makeSelectContentPositionForUri } from 'redux/selectors/content';
 import VideoViewer from './view';
+import { withRouter } from 'react-router';
 
-const select = (state, props) => ({
-  volume: selectVolume(state),
-  position: makeSelectContentPositionForUri(props.uri)(state),
-  muted: selectMute(state),
-  hasFileInfo: Boolean(makeSelectFileInfoForUri(props.uri)(state)),
-  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
-  claim: makeSelectClaimForUri(props.uri)(state),
-});
+const select = (state, props) => {
+  const { search } = props.location;
+  const urlParams = new URLSearchParams(search);
+  const autoplay = urlParams.get('autoplay');
+  return {
+    autoplayParam: autoplay,
+    volume: selectVolume(state),
+    position: makeSelectContentPositionForUri(props.uri)(state),
+    muted: selectMute(state),
+    hasFileInfo: Boolean(makeSelectFileInfoForUri(props.uri)(state)),
+    thumbnail: makeSelectThumbnailForUri(props.uri)(state),
+    claim: makeSelectClaimForUri(props.uri)(state),
+  };
+};
 
 const perform = dispatch => ({
   changeVolume: volume => dispatch(doChangeVolume(volume)),
@@ -22,7 +29,9 @@ const perform = dispatch => ({
   setPlayingUri: uri => dispatch(doSetPlayingUri(uri)),
 });
 
-export default connect(
-  select,
-  perform
-)(VideoViewer);
+export default withRouter(
+  connect(
+    select,
+    perform
+  )(VideoViewer)
+);
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index dde1462df..282914673 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -29,6 +29,8 @@ type VideoJSOptions = {
   playbackRates: Array<number>,
   responsive: boolean,
   poster?: string,
+  muted?: boolean,
+  poseter?: string,
 };
 const VIDEO_JS_OPTIONS: VideoJSOptions = {
   controls: true,
@@ -52,18 +54,34 @@ type Props = {
   hasFileInfo: boolean,
   onEndedCB: any,
   claim: Claim,
+  autoplayParam: ?boolean,
 };
 
 function VideoViewer(props: Props) {
-  const { contentType, source, onEndedCB, changeVolume, changeMute, volume, muted, thumbnail, claim } = props;
+  const {
+    contentType,
+    source,
+    onEndedCB,
+    changeVolume,
+    changeMute,
+    volume,
+    muted,
+    thumbnail,
+    claim,
+    autoplayParam,
+  } = props;
   const claimId = claim && claim.claim_id;
   const videoRef = useRef();
   const isAudio = contentType.includes('audio');
   const embedded = useContext(EmbedContext);
-  if (embedded) {
+  if (embedded && !autoplayParam) {
     VIDEO_JS_OPTIONS.autoplay = false;
   }
 
+  if (autoplayParam) {
+    VIDEO_JS_OPTIONS.muted = true;
+  }
+
   let forceTypes = [
     'video/quicktime',
     'application/x-ext-mkv',
@@ -128,14 +146,15 @@ function VideoViewer(props: Props) {
       plugins: { eventTracking: true },
     };
 
-    if (isAudio) {
+    // thumb looks bad in app, and if autoplay, flashing poster is annoying
+    if (isAudio || (embedded && !autoplayParam)) {
       videoJsOptions.poster = thumbnail;
     }
 
     if (!requireRedraw) {
       player = videojs(videoNode, videoJsOptions, function() {
-        player.volume(volume);
-        player.muted(muted);
+        if (!autoplayParam) player.volume(volume);
+        player.muted(autoplayParam || muted);
       });
     }