diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss index 353c7b5fe16874cc42a658c422495ed189bd13f6..8fbe332ee96534eb0fad0e439d347748437fc2a9 100755 --- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss @@ -147,14 +147,6 @@ } } - @include mq($small-only) { - button { - /* should be placed after .dropdownContent - 90vh: .dropdownContent height, 85px: navbar, 5rem: actions bar) */ - top: calc(90vh - 85px - 5rem); - height: 10vh; - } - } @include mq($landscape) { button { width: calc(100vw - 4rem); @@ -205,8 +197,7 @@ } @include mq($small-only) { - // use 90% of available height (85px: navbar, 5rem: actions bar) - height: calc(90vh - 85px - 5rem); + height: 90%; width: 100vw; } } diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx index 0c6d51e1908ce982fd325947f46eee6cb2ab166f..031234516d6f759e7fe1f98a920f2e86d363cbf0 100755 --- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx @@ -22,6 +22,7 @@ import { subscribeToStreamStateChange, unsubscribeFromStreamStateChange, } from '/imports/ui/services/bbb-webrtc-sfu/stream-state-service'; +import deviceInfo from '/imports/utils/deviceInfo'; const ALLOW_FULLSCREEN = Meteor.settings.public.app.allowFullscreen; @@ -41,6 +42,7 @@ class VideoListItem extends Component { this.setVideoIsReady = this.setVideoIsReady.bind(this); this.onFullscreenChange = this.onFullscreenChange.bind(this); this.onStreamStateChange = this.onStreamStateChange.bind(this); + this.updateOrientation = this.updateOrientation.bind(this); } onStreamStateChange(e) { @@ -69,6 +71,7 @@ class VideoListItem extends Component { this.videoTag.addEventListener('loadeddata', this.setVideoIsReady); this.videoContainer.addEventListener('fullscreenchange', this.onFullscreenChange); subscribeToStreamStateChange(cameraId, this.onStreamStateChange); + window.addEventListener('resize', this.updateOrientation); } componentDidUpdate() { @@ -99,6 +102,7 @@ class VideoListItem extends Component { this.videoContainer.removeEventListener('fullscreenchange', this.onFullscreenChange); unsubscribeFromStreamStateChange(cameraId, this.onStreamStateChange); onVideoItemUnmount(cameraId); + window.removeEventListener('resize', this.updateOrientation); } onFullscreenChange() { @@ -143,6 +147,10 @@ class VideoListItem extends Component { ]); } + updateOrientation() { + this.setState({ isPortrait: deviceInfo.isPortrait() }); + } + renderFullscreenButton() { const { name } = this.props; const { isFullscreen } = this.state; @@ -165,6 +173,7 @@ class VideoListItem extends Component { videoIsReady, isFullscreen, isStreamHealthy, + isPortrait, } = this.state; const { name, @@ -179,6 +188,8 @@ class VideoListItem extends Component { const shouldRenderReconnect = !isStreamHealthy && videoIsReady; const { isFirefox } = browserInfo; + const { isPhone } = deviceInfo; + const isTethered = isPhone && isPortrait; return ( <div @@ -230,7 +241,7 @@ class VideoListItem extends Component { <div className={styles.info}> {enableVideoMenu && availableActions.length >= 3 ? ( - <Dropdown className={isFirefox ? styles.dropdownFireFox : styles.dropdown}> + <Dropdown tethered={isTethered} placement="right bottom" className={isFirefox ? styles.dropdownFireFox : styles.dropdown}> <DropdownTrigger className={styles.dropdownTrigger}> <span>{name}</span> </DropdownTrigger>