fix: fullscreen related issues (#19)

* feat: use isomorphic-bigscreen

* fix: fullscreen toggle

* refactor: remove emitEvent

packages/griffith/package.json

@@ -24,7 +24,7 @@
   "dependencies": {
     "@babel/runtime": "^7.1.5",
     "aphrodite": "2.2.3",
-    "bigscreen": "2.0.5",
+    "isomorphic-bigscreen": "2.0.5",
     "element-resize-event": "^3.0.3",
     "eventemitter3": "^3.1.0",
     "griffith-message": "^1.1.1",

packages/griffith/src/components/Player/Player.js

@@ -1,8 +1,7 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import {css} from 'aphrodite/no-important'
-import BigScreen from 'bigscreen'
-import noop from 'lodash/noop'
+import BigScreen from 'isomorphic-bigscreen'
 import {EVENTS, ACTIONS} from 'griffith-message'
 import {ua} from 'griffith-utils'
 
@@ -64,6 +63,7 @@ class Player extends Component {
   hideControllerTimeout = null
 
   // refs
+  playerRef = React.createRef()
   videoRef = React.createRef()
 
   static getDerivedStateFromProps = (props, state) => {
@@ -83,8 +83,6 @@ class Player extends Component {
       this.setState({volume: historyVolume})
     }
 
-    this.fullScreenEventsSubscription = this.subscribeFullScreenEvents()
-
     this.pauseActionSubscription = this.props.subscribeAction(
       ACTIONS.PLAYER.PAUSE,
       this.handlePauseAction
@@ -104,24 +102,9 @@ class Player extends Component {
   }
 
   componentWillUnmount() {
-    this.fullScreenEventsSubscription.unsubscribe()
     this.pauseActionSubscription.unsubscribe()
   }
 
-  subscribeFullScreenEvents = () => {
-    const {onEvent} = this.props
-
-    BigScreen.onenter = () => onEvent(EVENTS.PLAYER.ENTER_FULLSCREEN)
-    BigScreen.onexit = () => onEvent(EVENTS.PLAYER.EXIT_FULLSCREEN)
-
-    return {
-      unsubscribe: () => {
-        BigScreen.onenter = noop
-        BigScreen.exit = noop
-      },
-    }
-  }
-
   handlePauseAction = ({dontApplyOnFullScreen} = {}) => {
     if (!this.state.isPlaying) return
 
@@ -274,7 +257,10 @@ class Player extends Component {
 
   handleToggleFullScreen = () => {
     if (BigScreen.enabled) {
-      BigScreen.toggle(this.root)
+      const {onEvent} = this.props
+      const onEnter = () => onEvent(EVENTS.PLAYER.ENTER_FULLSCREEN)
+      const onExit = () => onEvent(EVENTS.PLAYER.EXIT_FULLSCREEN)
+      BigScreen.toggle(this.playerRef.current, onEnter, onExit)
     }
   }
 
@@ -386,6 +372,7 @@ class Player extends Component {
         onMouseDown={this.handleMouseDown}
         onMouseUp={this.handleMouseUp}
         onMouseMove={this.handleShowController}
+        ref={this.playerRef}
       >
         <div className={css(styles.video)}>
           <Video

packages/griffith/src/components/PlayerContainer/PlayerContainer.js

@@ -31,12 +31,7 @@ const PlayerContainer = ({
       <MessageProvider id={id} enableCrossWindow={standalone}>
         <InternalContext.Consumer>
           {({emitEvent, subscribeAction}) => (
-            <VideoSourceProvider
-              onEvent={emitEvent}
-              sources={sources}
-              emitEvent={emitEvent}
-              id={id}
-            >
+            <VideoSourceProvider onEvent={emitEvent} sources={sources} id={id}>
               <LocaleContext.Provider value={locale}>
                 <VideoSourceContext.Consumer>
                   {({currentSrc}) => (

packages/griffith/src/contexts/VideoSource/VideoSourceProvider.js

@@ -12,7 +12,7 @@ export default class VideoSourceProvider extends React.Component {
   static propTypes = {
     onEvent: PropTypes.func.isRequired,
     sources: PropTypes.object,
-    emitEvent: PropTypes.func.isRequired,
+    id: PropTypes.string.isRequired,
   }
 
   state = {

yarn.lock

@@ -5777,6 +5777,13 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-bigscreen@2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isomorphic-bigscreen/-/isomorphic-bigscreen-2.0.5.tgz#4e842a761759307df5dedbef0c442e32bbd3474f"
+  integrity sha512-Rt4mO9tAEa3MUFaf0/x0qeZ070IjYCLf8RzW4CdY54a3gyLxwjN0GfNtfWhDU2yRiW61L2JYhjn+sKcUmMiclg==
+  dependencies:
+    bigscreen "2.0.5"
+
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"