diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index 905be9e4c..22ba2d174 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -9,6 +9,7 @@ const { useServices } = require('stremio/services'); const SeekBar = require('./SeekBar'); const VolumeSlider = require('./VolumeSlider'); const styles = require('./styles'); +const { useBinaryState } = require('stremio/common'); const ControlBar = ({ className, @@ -31,6 +32,7 @@ const ControlBar = ({ }) => { const { chromecast } = useServices(); const [chromecastServiceActive, setChromecastServiceActive] = React.useState(() => chromecast.active); + const [buttonsMenuOpen,,, toogleButtonsMenu] = useBinaryState(false); const onSubtitlesButtonMouseDown = React.useCallback((event) => { event.nativeEvent.subtitlesMenuClosePrevented = true; }, []); @@ -111,21 +113,26 @@ const ControlBar = ({ onVolumeChangeRequested={onVolumeChangeRequested} />
- - - - - +
+ + + + + +
); diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less index 8fb856618..086faba19 100644 --- a/src/routes/Player/ControlBar/styles.less +++ b/src/routes/Player/ControlBar/styles.less @@ -1,6 +1,7 @@ // Copyright (C) 2017-2020 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; +@import (reference) '~stremio/common/screen-sizes.less'; .control-bar-container { padding: 0 1.5rem; @@ -52,5 +53,60 @@ .spacing { flex: 1; } + + .control-bar-buttons-menu-button { + flex: none; + width: 4rem; + height: 4rem; + display: none; + justify-content: center; + align-items: center; + + .icon { + flex: none; + width: 3rem; + height: 2rem; + fill: @color-surface-light5; + } + } + + .control-bar-buttons-menu-container { + display: flex; + flex-direction: row; + } + } +} + +@media only screen and (max-width: @minimum) { + .control-bar-container { + padding: 0; + + .seek-bar { + padding: 0 1.5em; + } + + .control-bar-buttons-container { + gap: 0.5em; + padding: 0 0.5em; + + .control-bar-buttons-menu-button { + display: flex; + } + + .control-bar-buttons-menu-container { + position: absolute; + right: 0.15em; + bottom: 4.5rem; + flex-direction: column; + padding: 0.5em; + background-color: @color-background-dark1; + box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40, + 0 1.1rem 0.85rem @color-background-dark5-20; + + &:not(:global(.open)) { + display: none; + } + } + } } } \ No newline at end of file