convert external-video-player component

bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
 import { defineMessages, injectIntl } from 'react-intl';
-import ReactPlayer from 'react-player';
 import {
   sendMessage,
   onMessage,
@@ -22,7 +21,7 @@ import ArcPlayer from '/imports/ui/components/external-video-player/custom-playe
 import PeerTubePlayer from '/imports/ui/components/external-video-player/custom-players/peertube';
 import { ACTIONS } from '/imports/ui/components/layout/enums';
 
-import { styles } from './styles';
+import Styled from './styles';
 
 const intlMessages = defineMessages({
   autoPlayWarning: {
@@ -38,8 +37,8 @@ const SYNC_INTERVAL_SECONDS = 5;
 const THROTTLE_INTERVAL_SECONDS = 0.5;
 const AUTO_PLAY_BLOCK_DETECTION_TIMEOUT_SECONDS = 5;
 
-ReactPlayer.addCustomPlayer(PeerTubePlayer);
-ReactPlayer.addCustomPlayer(ArcPlayer);
+Styled.VideoPlayer.addCustomPlayer(PeerTubePlayer);
+Styled.VideoPlayer.addCustomPlayer(ArcPlayer);
 
 class VideoPlayer extends Component {
   static clearVideoListeners() {
@@ -200,7 +199,11 @@ class VideoPlayer extends Component {
   }
 
   componentWillUnmount() {
-    const { hidePresentation } = this.props;
+    const {
+      layoutContextDispatch,
+      hidePresentation,
+    } = this.props;
+
     window.removeEventListener('beforeunload', this.onBeforeUnload);
 
     VideoPlayer.clearVideoListeners();
@@ -331,7 +334,7 @@ class VideoPlayer extends Component {
     const intPlayer = this.player && this.player.getInternalPlayer();
     const rate = (intPlayer && intPlayer.getPlaybackRate && intPlayer.getPlaybackRate());
 
-    return typeof(rate) == 'number' ? rate : 1;
+    return typeof (rate) === 'number' ? rate : 1;
   }
 
   setPlaybackRate(rate) {
@@ -514,12 +517,16 @@ class VideoPlayer extends Component {
     const playerName = this.player && this.player.player
       && this.player.player.player && this.player.player.player.constructor.name;
 
-    const mobileHoverToolBarStyle = showHoverToolBar
-      ? styles.showMobileHoverToolbar
-      : styles.dontShowMobileHoverToolbar;
-    const desktopHoverToolBarStyle = styles.hoverToolbar;
+    let toolbarStyle = 'hoverToolbar';
+
+    if (this.isMobile && !showHoverToolBar) {
+      toolbarStyle = 'dontShowMobileHoverToolbar';
+    }
+
+    if (this.isMobile && showHoverToolBar) {
+      toolbarStyle = 'showMobileHoverToolbar';
+    }
 
-    const hoverToolbarStyle = this.isMobile ? mobileHoverToolBarStyle : desktopHoverToolBarStyle;
     return (
       <span
         style={{
@@ -532,24 +539,22 @@ class VideoPlayer extends Component {
           pointerEvents: isResizing ? 'none' : 'inherit',
         }}
       >
-        <div
+        <Styled.VideoPlayerWrapper
           id="video-player"
           data-test="videoPlayer"
-          className={styles.videoPlayerWrapper}
           ref={(ref) => { this.playerParent = ref; }}
         >
           {
             autoPlayBlocked
               ? (
-                <p className={styles.autoPlayWarning}>
+                <Styled.AutoPlayWarning>
                   {intl.formatMessage(intlMessages.autoPlayWarning)}
-                </p>
+                </Styled.AutoPlayWarning>
               )
               : ''
           }
 
-          <ReactPlayer
-            className={styles.videoPlayer}
+          <Styled.VideoPlayer
             url={videoUrl}
             config={this.opts}
             volume={(muted || mutedByEchoTest) ? 0 : volume}
@@ -570,7 +575,10 @@ class VideoPlayer extends Component {
             !isPresenter
               ? [
                 (
-                  <div className={hoverToolbarStyle} key="hover-toolbar-external-video">
+                  <Styled.HoverToolbar
+                    toolbarStyle={toolbarStyle}
+                    key="hover-toolbar-external-video"
+                  >
                     <VolumeSlider
                       hideVolume={this.hideVolume[playerName]}
                       volume={volume}
@@ -583,11 +591,10 @@ class VideoPlayer extends Component {
                       handleReload={this.handleReload}
                       label={intl.formatMessage(intlMessages.refreshLabel)}
                     />
-                  </div>
+                  </Styled.HoverToolbar>
                 ),
                 (this.isMobile && playing) && (
-                  <span
-                    className={styles.mobileControlsOverlay}
+                  <Styled.MobileControlsOverlay
                     key="mobile-overlay-external-video"
                     ref={(ref) => { this.overlay = ref; }}
                     onTouchStart={() => {
@@ -605,7 +612,7 @@ class VideoPlayer extends Component {
               ]
               : null
           }
-        </div>
+        </Styled.VideoPlayerWrapper>
       </span>
     );
   }

bigbluebutton-html5/imports/ui/components/external-video-player/styles.js

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import ReactPlayer from 'react-player';
+
+const VideoPlayerWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+
+const AutoPlayWarning = styled.p`
+  position: absolute;
+  z-index: 100;
+  font-size: x-large;
+  color: white;
+  width: 100%;
+  background-color: rgba(6,23,42,0.5);
+  bottom: 20%;
+  vertical-align: middle;
+  text-align: center;
+  pointer-events: none;
+`;
+
+const VideoPlayer = styled(ReactPlayer)`
+  width: 100%;
+  height: 100%;
+  & > iframe {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-style: none;
+    border-bottom: none;
+  }
+`;
+
+const MobileControlsOverlay = styled.span`
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+`;
+
+const HoverToolbar = styled.div`
+  ${({ toolbarStyle }) => toolbarStyle === 'hoverToolbar' && `
+    display: none;
+
+    :hover > & {
+      display: flex;
+    }
+  `}
+
+  ${({ toolbarStyle }) => toolbarStyle === 'dontShowMobileHoverToolbar' && `
+    display: none;
+  `}
+
+  ${({ toolbarStyle }) => toolbarStyle === 'showMobileHoverToolbar' && `
+    display: flex;
+    z-index: 2;
+  `}
+`;
+
+export default {
+  VideoPlayerWrapper,
+  AutoPlayWarning,
+  VideoPlayer,
+  MobileControlsOverlay,
+  HoverToolbar,
+};

bigbluebutton-html5/imports/ui/components/external-video-player/styles.scss

@@ -1,62 +0,0 @@
-@import "/imports/ui/stylesheets/mixins/focus";
-@import "/imports/ui/stylesheets/variables/_all";
-
-.hoverToolbar {
-  display: none;
-
-  :hover > & {
-    display: flex;
-  }
-}
-
-.mobileControlsOverlay {
-  position: absolute;
-  top:0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-}
-
-.showMobileHoverToolbar {
-  display: flex;
-  z-index: 2;
-}
-.dontShowMobileHoverToolbar {
-  display: none;
-}
-
-.videoPlayerWrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.videoPlayer {
-  width: 100%;
-  height: 100%;
-  & iframe {
-    display: flex;
-    flex-flow: column;
-    flex-grow: 1;
-    flex-shrink: 1;
-    position: relative;
-    overflow-x: hidden;
-    overflow-y: auto;
-    border-style: none;
-    border-bottom: none;
-  }
-}
-
-.autoPlayWarning {
-  position: absolute;
-  z-index: 100;
-  font-size: x-large;
-  color: white;
-  width: 100%;
-  background-color: rgba(6,23,42,0.5);
-  bottom: 20%;
-  vertical-align: middle;
-  text-align: center;
-  pointer-events: none;
-}