embed improvements

- autoplay=true param
- mute on autoplay
- thumb poster on embeds (unless autoplay)
- twitter player card for audio too

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}" />`;

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) => ({
+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(
+export default withRouter(
+  connect(
     select,
     perform
-)(VideoViewer);
+  )(VideoViewer)
+);

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);
       });
     }