From 07baa1ddb59356bf42fff8e61fe104cf0af79bad Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Thu, 17 May 2018 17:10:17 +0200
Subject: [Glitch] Open video modal on public UI

Port d9b2f84c92f24067b12be81837240bf6c8930236 to glitch-soc
---
 .../flavours/glitch/containers/media_container.js  | 25 +++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

(limited to 'app/javascript/flavours/glitch/containers/media_container.js')

diff --git a/app/javascript/flavours/glitch/containers/media_container.js b/app/javascript/flavours/glitch/containers/media_container.js
index b79876419..0e1904132 100644
--- a/app/javascript/flavours/glitch/containers/media_container.js
+++ b/app/javascript/flavours/glitch/containers/media_container.js
@@ -8,7 +8,7 @@ import Video from 'flavours/glitch/features/video';
 import Card from 'flavours/glitch/features/status/components/card';
 import ModalRoot from 'flavours/glitch/components/modal_root';
 import MediaModal from 'flavours/glitch/features/ui/components/media_modal';
-import { fromJS } from 'immutable';
+import { List as ImmutableList, fromJS } from 'immutable';
 
 const { localeData, messages } = getLocale();
 addLocaleData(localeData);
@@ -25,6 +25,7 @@ export default class MediaContainer extends PureComponent {
   state = {
     media: null,
     index: null,
+    time: null,
   };
 
   handleOpenMedia = (media, index) => {
@@ -32,9 +33,16 @@ export default class MediaContainer extends PureComponent {
     this.setState({ media, index });
   }
 
+  handleOpenVideo = (video, time) => {
+    const media = ImmutableList([video]);
+
+    document.body.classList.add('media-standalone__body');
+    this.setState({ media, time });
+  }
+
   handleCloseMedia = () => {
     document.body.classList.remove('media-standalone__body');
-    this.setState({ media: null, index: null });
+    this.setState({ media: null, index: null, time: null });
   }
 
   render () {
@@ -51,18 +59,25 @@ export default class MediaContainer extends PureComponent {
             Object.assign(props, {
               ...(media ? { media: fromJS(media) } : {}),
               ...(card  ? { card:  fromJS(card)  } : {}),
+
+              ...(componentName === 'Video' ? {
+                onOpenVideo: this.handleOpenVideo,
+              } : {
+                onOpenMedia: this.handleOpenMedia,
+              }),
             });
 
             return ReactDOM.createPortal(
-              <Component onOpenMedia={this.handleOpenMedia} {...props} key={`media-${i}`} />,
+              <Component {...props} key={`media-${i}`} />,
               component,
             );
           })}
           <ModalRoot onClose={this.handleCloseMedia}>
-            {this.state.media === null || this.state.index === null ? null : (
+            {this.state.media && (
               <MediaModal
                 media={this.state.media}
-                index={this.state.index}
+                index={this.state.index || 0}
+                time={this.state.time}
                 onClose={this.handleCloseMedia}
               />
             )}
-- 
cgit