convert video-provider video-list component

bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.jsx

@@ -1,15 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import cx from 'classnames';
 import _ from 'lodash';
-import { styles } from './styles';
+import Styled from './styles';
 import VideoListItemContainer from './video-list-item/container';
 import AutoplayOverlay from '../../media/autoplay-overlay/component';
 import logger from '/imports/startup/client/logger';
 import playAndRetry from '/imports/utils/mediaElementPlayRetry';
 import VideoService from '/imports/ui/components/video-provider/service';
-import Button from '/imports/ui/components/button/component';
 import { ACTIONS } from '../../layout/enums';
 
 const propTypes = {
@@ -294,7 +292,7 @@ class VideoList extends Component {
     const nextPageDetailedLabel = `${nextPageLabel} (${currentPage}/${numberOfPages})`;
 
     return (
-      <Button
+      <Styled.NextPageButton
         role="button"
         aria-label={nextPageLabel}
         color="primary"
@@ -303,12 +301,7 @@ class VideoList extends Component {
         onClick={VideoService.getNextVideoPage}
         label={nextPageDetailedLabel}
         hideLabel
-        className={
-          cx({
-            [styles.nextPage]: true,
-            [styles.nextPageLRPosition]: position === 'contentRight' || position === 'contentLeft',
-          })
-        }
+        position={position}
       />
     );
   }
@@ -329,7 +322,7 @@ class VideoList extends Component {
     const prevPageDetailedLabel = `${prevPageLabel} (${currentPage}/${numberOfPages})`;
 
     return (
-      <Button
+      <Styled.PreviousPageButton
         role="button"
         aria-label={prevPageLabel}
         color="primary"
@@ -338,12 +331,7 @@ class VideoList extends Component {
         onClick={VideoService.getPreviousVideoPage}
         label={prevPageDetailedLabel}
         hideLabel
-        className={
-          cx({
-            [styles.previousPage]: true,
-            [styles.previousPageLRPosition]: position === 'contentRight' || position === 'contentLeft',
-          })
-        }
+        position={position}
       />
     );
   }
@@ -381,12 +369,9 @@ class VideoList extends Component {
       }
 
       return (
-        <div
+        <Styled.VideoListItem
           key={stream}
-          className={cx({
-            [styles.videoListItem]: true,
-            [styles.focused]: focusedId === stream && numOfStreams > 2,
-          })}
+          focused={focusedId === stream && numOfStreams > 2}
         >
           <VideoListItemContainer
             numOfStreams={numOfStreams}
@@ -402,7 +387,7 @@ class VideoList extends Component {
             onVideoItemUnmount={onVideoItemUnmount}
             swapLayout={swapLayout}
           />
-        </div>
+        </Styled.VideoListItem>
       );
     });
   }
@@ -416,21 +401,12 @@ class VideoList extends Component {
     const { optimalGrid, autoplayBlocked } = this.state;
     const { position } = cameraDock;
 
-    const canvasClassName = cx({
-      [styles.videoCanvas]: true,
-      [styles.videoCanvasLRPosition]: position === 'contentRight' || position === 'contentLeft',
-    });
-
-    const videoListClassName = cx({
-      [styles.videoList]: true,
-    });
-
     return (
-      <div
+      <Styled.VideoCanvas
+        position={position}
         ref={(ref) => {
           this.canvas = ref;
         }}
-        className={canvasClassName}
         style={{
           minHeight: 'inherit',
         }}
@@ -438,11 +414,10 @@ class VideoList extends Component {
         {this.renderPreviousPageButton()}
 
         {!streams.length ? null : (
-          <div
+          <Styled.VideoList
             ref={(ref) => {
               this.grid = ref;
             }}
-            className={videoListClassName}
             style={{
               width: `${optimalGrid.width}px`,
               height: `${optimalGrid.height}px`,
@@ -451,7 +426,7 @@ class VideoList extends Component {
             }}
           >
             {this.renderVideoList()}
-          </div>
+          </Styled.VideoList>
         )}
         {!autoplayBlocked ? null : (
           <AutoplayOverlay
@@ -463,11 +438,11 @@ class VideoList extends Component {
 
         {
           (position === 'contentRight' || position === 'contentLeft')
-          && <div className={styles.break} />
+          && <Styled.Break />
         }
 
         {this.renderNextPageButton()}
-      </div>
+      </Styled.VideoCanvas>
     );
   }
 }

bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.js

@@ -0,0 +1,118 @@
+import styled from 'styled-components';
+import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
+import { mdPaddingX } from '/imports/ui/stylesheets/styled-components/general';
+import { mediumUp } from '/imports/ui/stylesheets/styled-components/breakpoints';
+import { actionsBarHeight, navbarHeight } from '/import/ui/stylesheets/styled-components/general';
+import Button from '/imports/ui/components/button/component';
+
+const NextPageButton = styled(Button)`
+  color: ${colorWhite};
+  width: ${mdPaddingX};
+
+  & > i {
+    [dir="rtl"] & {
+      -webkit-transform: scale(-1, 1);
+      -moz-transform: scale(-1, 1);
+      -ms-transform: scale(-1, 1);
+      -o-transform: scale(-1, 1);
+      transform: scale(-1, 1);
+    }
+  }
+
+  margin-left: 1px;
+
+  @media ${mediumUp} {
+    margin-left: 2px;
+  }
+
+  ${({ position }) => (position === 'contentRight' || position === 'contentLeft') && `
+    order: 3;
+    margin-right: 2px;
+  `}
+`;
+
+const PreviousPageButton = styled(Button)`
+  color: ${colorWhite};
+  width: ${mdPaddingX};
+
+  i {
+    [dir="rtl"] & {
+      -webkit-transform: scale(-1, 1);
+      -moz-transform: scale(-1, 1);
+      -ms-transform: scale(-1, 1);
+      -o-transform: scale(-1, 1);
+      transform: scale(-1, 1);
+    }
+  }
+
+  margin-right: 1px;
+
+  @media ${mediumUp} {
+    margin-right: 2px;
+  }
+
+  ${({ position }) => (position === 'contentRight' || position === 'contentLeft') && `
+    order: 2;
+    margin-left: 2px;
+  `}
+`;
+
+const VideoListItem = styled.div`
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  max-height: 100%;
+
+  ${({ focused }) => focused && `
+    grid-column: 1 / span 2;
+    grid-row: 1 / span 2;
+  `}
+`;
+
+const VideoCanvas = styled.div`
+  position: absolute;
+  width: 100%;
+  min-height: calc((100vh - calc(${navbarHeight} + ${actionsBarHeight})) * 0.2);
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ position }) => (position === 'contentRight' || position === 'contentLeft') && `
+    flex-wrap: wrap;
+    align-content: center;
+    order: 0;
+  `}
+`;
+
+const VideoList = styled.div`
+  display: grid;
+
+  grid-auto-flow: dense;
+  grid-gap: 1px;
+
+  justify-content: center;
+
+  @media ${mediumUp} {
+    grid-gap: 2px;
+  }
+`;
+
+const Break = styled.div`
+  order: 1;
+  flex-basis: 100%;
+  height: 5px;
+`;
+
+export default {
+  NextPageButton,
+  PreviousPageButton,
+  VideoListItem,
+  VideoCanvas,
+  VideoList,
+  Break,
+};

bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx

@@ -7,7 +7,7 @@ import BBBMenu from '/imports/ui/components/menu/component';
 import Icon from '/imports/ui/components/icon/component';
 import FullscreenService from '/imports/ui/components/fullscreen-button/service';
 import FullscreenButtonContainer from '/imports/ui/components/fullscreen-button/container';
-import { styles } from '../styles';
+import { styles } from '../styles.scss';
 import VideoService from '../../service';
 import {
   isStreamStateUnhealthy,

bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js

@@ -21,6 +21,7 @@ const modalMargin = '3rem';
 const titlePositionLeft = '2.2rem';
 const userIndicatorsOffset = '-5px';
 const indicatorPadding = '.45rem'; // used to center presenter indicator icon in Chrome / Firefox / Edge
+const actionsBarHeight = '75px'; // TODO: Change to ActionsBar real height
 
 export {
   borderSizeSmall,
@@ -45,4 +46,5 @@ export {
   titlePositionLeft,
   userIndicatorsOffset,
   indicatorPadding,
+  actionsBarHeight,
 };