Merge pull request bemusic#495 from bemusic/no-auto-fullscreen

No auto fullscreen

CHANGELOG.md

@@ -7,7 +7,14 @@
 
 ## Unreleased
 
-This release mostly contains a lot of internal changes.
+This update took a really long time as I (dtinth) was busy with other things in
+life. Also, this release contains many internal changes to the code
+infrastructure, which is, you know, the less exciting parts of the work.
+
+### New stuff
+
+- **Full-screen button** is displayed at the top-right corner inside the game.
+  Automatic full-screen has been removed. [#495], by [@dtinth]
 
 ### Improvements
 
@@ -53,7 +60,8 @@ This release mostly contains a lot of internal changes.
 
 #### `bms@3.1.0`
 
-- [New feature] `BMS.Reader.read` and `BMS.Reader.readAsync` now takes an optional options object, allowing you to force file encoding.
+- [New feature] `BMS.Reader.read` and `BMS.Reader.readAsync` now takes an
+  optional options object, allowing you to force file encoding.
 
 #### `bmson@4.0.0`
 
@@ -87,6 +95,7 @@ This release mostly contains a lot of internal changes.
 - [Improvement] File encoding can be forced through file name extension.
 
 [bemusic/bms-js#28]: https://github.com/bemusic/bms-js/pull/28
+[#495]: https://github.com/bemusic/bemuse/pull/495
 [#483]: https://github.com/bemusic/bemuse/pull/483
 [#485]: https://github.com/bemusic/bemuse/pull/485
 [#487]: https://github.com/bemusic/bemuse/pull/487

package.json

@@ -200,7 +200,6 @@
     "redux": "^3.7.2",
     "reselect": "^2.5.1",
     "rxjs": "^5.0.0-beta.9",
-    "screenfull": "^3.0.0",
     "test-bed": "^0.77.77",
     "throat": "^2.0.2",
     "timesynchro": "^1.0.1",

src/app/index.js

@@ -75,6 +75,8 @@ export function main () {
   let timeSynchroServer =
     getTimeSynchroServer() || 'wss://timesynchro.herokuapp.com/'
   if (timeSynchroServer) now.synchronize(timeSynchroServer)
+
+  trackFullscreenEvents()
 }
 
 function displayFirstScene () {
@@ -114,6 +116,19 @@ function registerServiceWorker () {
   return navigator.serviceWorker.register(url)
 }
 
+function trackFullscreenEvents () {
+  let fullscreen = false
+  document.addEventListener('fullscreenchange', () => {
+    if (document.fullscreenElement && !fullscreen) {
+      fullscreen = true
+      Analytics.send('fullscreen', 'enter')
+    } else if (!document.fullscreenElement && fullscreen) {
+      fullscreen = false
+      Analytics.send('fullscreen', 'exit')
+    }
+  })
+}
+
 window.addEventListener('beforeunload', () => {
   Analytics.send('app', 'quit')
 })

src/app/ui/MusicSelectScene.jsx

@@ -11,7 +11,6 @@ import ReactDOM from 'react-dom'
 import SCENE_MANAGER from 'bemuse/scene-manager'
 import Scene from 'bemuse/ui/Scene'
 import SceneHeading from 'bemuse/ui/SceneHeading'
-import SceneToolbar from 'bemuse/ui/SceneToolbar'
 import c from 'classnames'
 import compose from 'recompose/compose'
 import getPreviewUrl from 'bemuse/music-collection/getPreviewUrl'

src/app/ui/TitleScene.jsx

@@ -7,12 +7,10 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import SCENE_MANAGER from 'bemuse/scene-manager'
 import Scene from 'bemuse/ui/Scene'
-import screenfull from 'screenfull'
 import version from 'bemuse/utils/version'
 import { hot } from 'react-hot-loader'
 import { compose } from 'recompose'
 import { connect } from 'react-redux'
-import { shouldDisableFullScreen } from 'bemuse/devtools/query-flags'
 import connectIO from 'bemuse/impure-react/connectIO'
 
 import * as Analytics from '../analytics'
@@ -134,7 +132,7 @@ class TitleScene extends React.Component {
     )
   }
 
-  openLink = (e) => {
+  openLink = e => {
     e.preventDefault()
     window.open(
       $(e.target)
@@ -144,20 +142,14 @@ class TitleScene extends React.Component {
     )
   }
 
-  openTwitterLink = (e) => {
+  openTwitterLink = e => {
     this.openLink(e)
     if (this.props.onTwitterButtonClick) this.props.onTwitterButtonClick()
   }
 
   enterGame () {
     SCENE_MANAGER.push(<ModeSelectScene />).done()
     Analytics.send('TitleScene', 'enter game')
-    // go fullscreen
-    if (screenfull.enabled && !shouldDisableFullScreen()) {
-      let safari =
-        /Safari/.test(navigator.userAgent) && !/Chrom/.test(navigator.userAgent)
-      if (!safari) screenfull.request()
-    }
   }
 
   showAbout () {

src/app/ui/Toolbar.jsx

@@ -13,15 +13,19 @@ import Toggle from 'react-toggled'
 function Toolbar ({ items }) {
   return (
     <WindowSize
-      render={({ width, height }) => (
-        console.log(width, height),
-        width < 720
-          ? <MobileToolbar items={items} />
-          : <DesktopToolbar items={items} />
-      )}
+      render={({ width, height }) =>
+        width < 720 ? (
+          <MobileToolbar items={items} />
+        ) : (
+          <DesktopToolbar items={items} />
+        )
+      }
     />
   )
 }
+Toolbar.propTypes = {
+  items: PropTypes.array
+}
 
 const defaultOptions = {
   href: 'javascript://bemuse.ninja',
@@ -49,9 +53,15 @@ class DesktopToolbar extends React.PureComponent {
       <SceneToolbar>
         {this.props.items.map((element, index) => {
           if (element.type === 'item') {
-            return <React.Fragment key={index}>{this.renderItem(element)}</React.Fragment>
+            return (
+              <React.Fragment key={index}>
+                {this.renderItem(element)}
+              </React.Fragment>
+            )
           } else {
-            return <React.Fragment key={index}>{this.renderSpacer()}</React.Fragment>
+            return (
+              <React.Fragment key={index}>{this.renderSpacer()}</React.Fragment>
+            )
           }
         })}
       </SceneToolbar>
@@ -91,24 +101,32 @@ class MobileToolbar extends React.PureComponent {
   }
   render () {
     return (
-      <Toggle>{({ on, getTogglerProps }) => (
-        <React.Fragment>
-          <FloatingMobileMenu visible={on}>
-            {this.props.items.map((element, index) => {
-              if (element.type === 'item') {
-                return <React.Fragment key={index}>{this.renderItem(element)}</React.Fragment>
-              } else {
-                return <React.Fragment key={index}>{this.renderSeparator()}</React.Fragment>
-              }
-            })}
-          </FloatingMobileMenu>
-          <FloatingMobileButton
-            buttonProps={getTogglerProps()}
-          >
-            <Icon name='bars' />
-          </FloatingMobileButton>
-        </React.Fragment>
-      )}</Toggle>
+      <Toggle>
+        {({ on, getTogglerProps }) => (
+          <React.Fragment>
+            <FloatingMobileMenu visible={on}>
+              {this.props.items.map((element, index) => {
+                if (element.type === 'item') {
+                  return (
+                    <React.Fragment key={index}>
+                      {this.renderItem(element)}
+                    </React.Fragment>
+                  )
+                } else {
+                  return (
+                    <React.Fragment key={index}>
+                      {this.renderSeparator()}
+                    </React.Fragment>
+                  )
+                }
+              })}
+            </FloatingMobileMenu>
+            <FloatingMobileButton buttonProps={getTogglerProps()}>
+              <Icon name='bars' />
+            </FloatingMobileButton>
+          </React.Fragment>
+        )}
+      </Toggle>
     )
   }
   renderItem (item) {

src/game/display/game-display.scss

@@ -61,14 +61,22 @@
   &--touch-buttons {
     position: fixed;
     transform: translateZ(0);
-    top: 0; left: 0;
+    top: 0;
     opacity: 0;
     z-index: 110;
   }
   &--touch-buttons.is-visible {
     opacity: 1;
   }
-  &--touch-escape-button, &--touch-replay-button {
+  &--touch-buttons.is-left {
+    left: 0;
+  }
+  &--touch-buttons.is-right {
+    right: 0;
+  }
+  &--touch-escape-button,
+  &--touch-replay-button,
+  &--touch-fullscreen-button {
     position: absolute;
     top: 12px;
     margin: 0;
@@ -78,6 +86,7 @@
     height: 32px;
     background: transparent center center no-repeat;
     background-size: 32px 32px;
+    cursor: pointer;
   }
   &--touch-escape-button {
     background-image: url(./touch-escape.png);
@@ -87,6 +96,13 @@
     background-image: url(./touch-replay.png);
     left: 56px;
   }
+  &--touch-fullscreen-button {
+    background-image: url(./touch-fullscreen.png);
+    right: 12px;
+    :root:fullscreen & {
+      display: none;
+    }
+  }
 }
 
 @keyframes game-display--bg-default {

src/game/display/index.js

@@ -4,6 +4,7 @@ import $ from 'jquery'
 
 import PlayerDisplay from './player-display'
 import formatTime from '../../utils/formatTime'
+import { shouldDisableFullScreen } from 'bemuse/devtools/query-flags'
 
 export class GameDisplay {
   constructor ({ game, context, backgroundImagePromise, video }) {
@@ -23,6 +24,7 @@ export class GameDisplay {
     this._createTouchEscapeButton({
       displayByDefault: skinData.mainInputDevice === 'touch'
     })
+    this._createFullScreenButton()
   }
   setEscapeHandler (escapeHandler) {
     this._onEscape = escapeHandler
@@ -116,36 +118,48 @@ export class GameDisplay {
   }
   _createTouchEscapeButton ({ displayByDefault }) {
     const touchButtons = document.createElement('div')
-    touchButtons.className = 'game-display--touch-buttons'
+    touchButtons.className = 'game-display--touch-buttons is-left'
     this.wrapper.appendChild(touchButtons)
     if (displayByDefault) {
       touchButtons.classList.add('is-visible')
     } else {
       let shown = false
-      this.wrapper.addEventListener('touchstart', () => {
-        if (shown) return
-        shown = true
-        touchButtons.classList.add('is-visible')
-      }, true)
-    }
-    const createTouchButton = (className, onClick) => {
-      let button = document.createElement('button')
-      button.addEventListener(
+      this.wrapper.addEventListener(
         'touchstart',
-        e => {
-          e.stopPropagation()
+        () => {
+          if (shown) return
+          shown = true
+          touchButtons.classList.add('is-visible')
         },
         true
       )
-      button.onclick = e => {
-        e.preventDefault()
-        onClick()
-      }
-      button.className = className
+    }
+    const addTouchButton = (className, onClick) => {
+      let button = createTouchButton(onClick, className)
       touchButtons.appendChild(button)
     }
-    createTouchButton('game-display--touch-escape-button', () => this._onEscape())
-    createTouchButton('game-display--touch-replay-button', () => this._onReplay())
+    addTouchButton('game-display--touch-escape-button', () => this._onEscape())
+    addTouchButton('game-display--touch-replay-button', () => this._onReplay())
+  }
+
+  _createFullScreenButton () {
+    if (
+      shouldDisableFullScreen() ||
+      !document.documentElement.requestFullscreen
+    ) {
+      return
+    }
+    const touchButtons = document.createElement('div')
+    touchButtons.className = 'game-display--touch-buttons is-visible is-right'
+    this.wrapper.appendChild(touchButtons)
+    const onClick = () => {
+      document.documentElement.requestFullscreen()
+    }
+    const button = createTouchButton(
+      onClick,
+      'game-display--touch-fullscreen-button'
+    )
+    touchButtons.appendChild(button)
   }
   get context () {
     return this._context
@@ -158,4 +172,21 @@ export class GameDisplay {
   }
 }
 
+function createTouchButton (onClick, className) {
+  let button = document.createElement('button')
+  button.addEventListener(
+    'touchstart',
+    e => {
+      e.stopPropagation()
+    },
+    true
+  )
+  button.onclick = e => {
+    e.preventDefault()
+    onClick()
+  }
+  button.className = className
+  return button
+}
+
 export default GameDisplay

yarn.lock

@@ -12038,10 +12038,6 @@ schema-utils@^0.4.5:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
-screenfull@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-3.0.2.tgz#9fbcce07bad4c680a8f90f2bfc9c41788af55d0c"
-
 script-loader@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/script-loader/-/script-loader-0.7.0.tgz#685dc7e7069e0dee7a92674f0ebc5b0f55baa5ec"