From ecb2132c36f4811682137fc3c670502f9e9c608e Mon Sep 17 00:00:00 2001 From: "Michael H. Arieli" Date: Sun, 25 Nov 2018 07:09:26 -0800 Subject: [PATCH] Fix bug: Use "screenfull" for cross-browser support for fullscreen --- package.json | 1 + src/client/components/Toolbar.js | 32 ++++---------------------------- yarn.lock | 5 +++++ 3 files changed, 10 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 970820a..053b871 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "redux-logger": "^3.0.6", "redux-promise-middleware": "^4.2.0", "redux-thunk": "^2.2.0", + "screenfull": "^3.3.3", "seamless-immutable": "^7.1.2", "simple-peer": "^8.1.0", "socket.io": "^2.1.1", diff --git a/src/client/components/Toolbar.js b/src/client/components/Toolbar.js index f19b0be..ef1b0c6 100644 --- a/src/client/components/Toolbar.js +++ b/src/client/components/Toolbar.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types' import React from 'react' +import screenfull from 'screenfull' import { MessagePropTypes } from './Chat.js' import { StreamPropType } from './Video.js' @@ -39,35 +40,10 @@ export default class Toolbar extends React.PureComponent { e.currentTarget.classList.toggle('on') } handleFullscreenClick = e => { - const document = window.document - const fs = document.getElementById('container') - if ( - !document.fullscreenElement && - !document.mozFullScreenElement && - !document.webkitFullscreenElement && - !document.msFullscreenElement - ) { - if (fs.requestFullscreen) { - fs.requestFullscreen() - } else if (fs.msRequestFullscreen) { - fs.msRequestFullscreen() - } else if (fs.mozRequestFullScreen) { - fs.mozRequestFullScreen() - } else if (fs.webkitRequestFullscreen) { - fs.webkitRequestFullscreen() - } - } else { - if (document.exitFullscreen) { - document.exitFullscreen() - } else if (document.msExitFullscreen) { - document.msExitFullscreen() - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen() - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen() - } + if (screenfull.enabled) { + screenfull.toggle(e.target) + e.currentTarget.classList.toggle('on') } - e.currentTarget.classList.toggle('on') } handleHangoutClick = e => { window.location.href = '/' diff --git a/yarn.lock b/yarn.lock index f2b35d0..84cca8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6164,6 +6164,11 @@ sax@^1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== +screenfull@^3.3.3: + version "3.3.3" + resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-3.3.3.tgz#8cf7e706aceac2e75131aadcb81b622acfe11d39" + integrity sha512-DzYUuXr+OV2BDvYXaYzlYgJd4WXZZ2CW5NFC7Kw6TUCpzXJAx4MwlVD6CH+Mu6fi8rfAQIQfqdFZ4jtDsEkWig== + scss-tokenizer@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"