From a1e24d6dccdf124ae7fdd95b4606dfc3728b8fb2 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Fri, 31 Jan 2020 13:25:48 -0500
Subject: [PATCH] actually disable autoplay in embeds

---
 ui/component/viewers/videoViewer/view.jsx | 19 ++++++++++++++++---
 ui/page/embedWrapper/view.jsx             | 12 +++++++++++-
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index cd48c50ed..1578e33de 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -1,11 +1,12 @@
 // @flow
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useContext } from 'react';
 import { stopContextMenu } from 'util/context-menu';
 import videojs from 'video.js/dist/alt/video.core.novtt.min.js';
 import 'video.js/dist/alt/video-js-cdn.min.css';
 import eventTracking from 'videojs-event-tracking';
 import isUserTyping from 'util/detect-typing';
 import analytics from 'analytics';
+import { EmbedContext } from 'page/embedWrapper/view';
 
 const F11_KEYCODE = 122;
 const SPACE_BAR_KEYCODE = 32;
@@ -21,8 +22,15 @@ const SEEK_FORWARD_KEYCODE = ARROW_RIGHT_KEYCODE;
 const SEEK_BACKWARD_KEYCODE = ARROW_LEFT_KEYCODE;
 
 const SEEK_STEP = 10; // time to seek in seconds
-
-const VIDEO_JS_OPTIONS: { poster?: string } = {
+type VideoJSOptions = {
+  controls: boolean,
+  autoplay: boolean,
+  preload: string,
+  playbackRates: Array<number>,
+  responsive: boolean,
+  poster?: string,
+};
+const VIDEO_JS_OPTIONS: VideoJSOptions = {
   controls: true,
   autoplay: true,
   preload: 'auto',
@@ -51,6 +59,11 @@ function VideoViewer(props: Props) {
   const claimId = claim && claim.claim_id;
   const videoRef = useRef();
   const isAudio = contentType.includes('audio');
+  const embedded = useContext(EmbedContext);
+  if (embedded) {
+    VIDEO_JS_OPTIONS.autoplay = false;
+  }
+
   let forceTypes = [
     'video/quicktime',
     'application/x-ext-mkv',
diff --git a/ui/page/embedWrapper/view.jsx b/ui/page/embedWrapper/view.jsx
index 1c00a6805..33747c33c 100644
--- a/ui/page/embedWrapper/view.jsx
+++ b/ui/page/embedWrapper/view.jsx
@@ -7,6 +7,8 @@ type Props = {
   resolveUri: string => void,
   claim: Claim,
 };
+// $FlowFixMe apparently flow thinks this is wrong.
+export const EmbedContext = React.createContext();
 const EmbedWrapperPage = (props: Props) => {
   const { resolveUri, claim, uri } = props;
   useEffect(() => {
@@ -15,7 +17,15 @@ const EmbedWrapperPage = (props: Props) => {
     }
   }, []);
 
-  return <div className={'embed__wrapper'}>{claim && <FileRender uri={uri} embedded />}</div>;
+  return (
+    <div className={'embed__wrapper'}>
+      {claim && (
+        <EmbedContext.Provider value>
+          <FileRender uri={uri} embedded />
+        </EmbedContext.Provider>
+      )}
+    </div>
+  );
 };
 
 export default EmbedWrapperPage;