From 60e146ff6179c464b64ee153e32efc83d9222e9e Mon Sep 17 00:00:00 2001 From: Arianna Lanz Date: Mon, 13 Apr 2020 10:42:53 -0400 Subject: [PATCH 1/4] make popup sibling of clickable component --- src/components/popup/PopupButton.js | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/popup/PopupButton.js b/src/components/popup/PopupButton.js index 58fe270e..3d658647 100644 --- a/src/components/popup/PopupButton.js +++ b/src/components/popup/PopupButton.js @@ -22,20 +22,24 @@ export default function PopupButton(props) { delete ps.children; delete ps.inline; delete ps.className; + + console.log(props); + return ( - + <> + - + ); } From 62f99ff9fe748cf768adf759426a17be0941b618 Mon Sep 17 00:00:00 2001 From: Omri Bernstein Date: Mon, 13 Apr 2020 11:22:51 -0400 Subject: [PATCH 2/4] Reorganize volume button to have explicit parent div, and explicit sibling styles --- src/components/popup/PopupButton.js | 6 ++--- styles/scss/components/volume.scss | 35 +++++++++++++++++------------ 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/components/popup/PopupButton.js b/src/components/popup/PopupButton.js index 3d658647..e6cb603a 100644 --- a/src/components/popup/PopupButton.js +++ b/src/components/popup/PopupButton.js @@ -23,10 +23,8 @@ export default function PopupButton(props) { delete ps.inline; delete ps.className; - console.log(props); - return ( - <> +
- +
); } diff --git a/styles/scss/components/volume.scss b/styles/scss/components/volume.scss index 8e384a06..66a12a52 100644 --- a/styles/scss/components/volume.scss +++ b/styles/scss/components/volume.scss @@ -77,25 +77,28 @@ // without hitting space bar on the menu button. To do this we're not using // display:none to hide the slider menu by default, and instead setting the // width and height to zero. - .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu { + .video-react-menu-button-popup.video-react-volume-menu-button + .video-react-menu { display: block; width: 0; height: 0; border-top-color: transparent; + position: absolute; } - .video-react-menu-button-popup.video-react-volume-menu-button-vertical .video-react-menu { - left: 0; + .video-react-menu-button-popup.video-react-volume-menu-button-vertical + .video-react-menu { + top: 0; + left: 50%; + transform: translate(-50%, -100%); height: auto; width: inherit; background-color: inherit; border-radius: 4px 4px 0 0; } - .video-react-menu-button-popup.video-react-volume-menu-button-horizontal .video-react-menu { + .video-react-menu-button-popup.video-react-volume-menu-button-horizontal + .video-react-menu { left: -2em; } - .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu-content { + .video-react-menu-button-popup.video-react-volume-menu-button + .video-react-menu > .video-react-menu-content { height: 0; width: 0; @@ -104,29 +107,33 @@ overflow-y: hidden; } - .video-react-volume-menu-button-vertical:hover .video-react-menu-content, - .video-react-volume-menu-button-vertical:focus .video-react-menu-content, - .video-react-volume-menu-button-vertical.video-react-slider-active .video-react-menu-content, - .video-react-volume-menu-button-vertical .video-react-lock-showing .video-react-menu-content { + .video-react-volume-menu-button-vertical:hover + .video-react-menu > .video-react-menu-content, + .video-react-volume-menu-button-vertical:focus + .video-react-menu > .video-react-menu-content, + .video-react-volume-menu-button-vertical.video-react-slider-active + .video-react-menu > .video-react-menu-content, + .video-react-volume-menu-button-vertical .video-react-lock-showing + .video-react-menu > .video-react-menu-content{ height: auto; width: inherit; background-color: transparent; } - .video-react-volume-menu-button-horizontal:hover .video-react-menu-content, - .video-react-volume-menu-button-horizontal:focus .video-react-menu-content, - .video-react-volume-menu-button-horizontal .video-react-slider-active .video-react-menu-content, - .video-react-volume-menu-button-horizontal .video-react-lock-showing .video-react-menu-content { + .video-react-volume-menu-button-horizontal:hover + .video-react-menu > .video-react-menu-content, + .video-react-volume-menu-button-horizontal:focus + .video-react-menu > .video-react-menu-content, + .video-react-volume-menu-button-horizontal .video-react-slider-active + .video-react-menu > .video-react-menu-content, + .video-react-volume-menu-button-horizontal .video-react-lock-showing + .video-react-menu > .video-react-menu-content { height: 2.9em; width: 8em; } - .video-react-volume-menu-button.video-react-menu-button-inline .video-react-menu-content { + .video-react-volume-menu-button.video-react-menu-button-inline + .video-react-menu > .video-react-menu-content { // An inline volume should never have a menu background color. // This protects it from external changes to background colors. background-color: transparent !important; } + .video-react-popup-button-container { + position: relative; + } + } From 02be7efc63e44e4d80f963ccd9438b3566607516 Mon Sep 17 00:00:00 2001 From: Arianna Lanz Date: Mon, 13 Apr 2020 12:03:03 -0400 Subject: [PATCH 3/4] width 100% on video-react-menu --- styles/scss/components/volume.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/styles/scss/components/volume.scss b/styles/scss/components/volume.scss index 66a12a52..f43f7b72 100644 --- a/styles/scss/components/volume.scss +++ b/styles/scss/components/volume.scss @@ -90,9 +90,9 @@ left: 50%; transform: translate(-50%, -100%); height: auto; - width: inherit; background-color: inherit; border-radius: 4px 4px 0 0; + width: 100%; } .video-react-menu-button-popup.video-react-volume-menu-button-horizontal + .video-react-menu { left: -2em; @@ -110,7 +110,8 @@ .video-react-volume-menu-button-vertical:hover + .video-react-menu > .video-react-menu-content, .video-react-volume-menu-button-vertical:focus + .video-react-menu > .video-react-menu-content, .video-react-volume-menu-button-vertical.video-react-slider-active + .video-react-menu > .video-react-menu-content, - .video-react-volume-menu-button-vertical .video-react-lock-showing + .video-react-menu > .video-react-menu-content{ + .video-react-volume-menu-button-vertical .video-react-lock-showing + .video-react-menu > .video-react-menu-content, + .video-react-menu:hover, .video-react-menu:focus { height: auto; width: inherit; background-color: transparent; From 8d21c38a611c97ce3828300db9596515e796881a Mon Sep 17 00:00:00 2001 From: Omri Bernstein Date: Fri, 17 Apr 2020 17:37:04 -0400 Subject: [PATCH 4/4] Align and position volume button and volume bar --- .../control-bar/VolumeMenuButton.js | 25 ++++++++++------- src/components/popup/PopupButton.js | 8 +++--- src/components/volume-control/VolumeBar.js | 2 -- styles/scss/components/control.scss | 1 - styles/scss/components/slider.scss | 1 - styles/scss/components/volume.scss | 27 +++++++++---------- 6 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/components/control-bar/VolumeMenuButton.js b/src/components/control-bar/VolumeMenuButton.js index 1154e208..1e737763 100644 --- a/src/components/control-bar/VolumeMenuButton.js +++ b/src/components/control-bar/VolumeMenuButton.js @@ -83,7 +83,7 @@ class VolumeMenuButton extends Component { } render() { - const { vertical, player, className } = this.props; + const { vertical, player, className, buttonClassName } = this.props; const inline = !vertical; const level = this.volumeLevel; @@ -94,22 +94,29 @@ class VolumeMenuButton extends Component { className={classNames( className, { - 'video-react-volume-menu-button-vertical': vertical, - 'video-react-volume-menu-button-horizontal': !vertical, - 'video-react-vol-muted': player.muted, - 'video-react-vol-0': level === 0 && !player.muted, - 'video-react-vol-1': level === 1, - 'video-react-vol-2': level === 2, - 'video-react-vol-3': level === 3, + 'video-react-volume-menu-vertical': vertical, + 'video-react-volume-menu-horizontal': !vertical, 'video-react-slider-active': this.props.alwaysShowVolume || this.state.active, 'video-react-lock-showing': this.props.alwaysShowVolume || this.state.active }, - 'video-react-volume-menu-button' + 'video-react-volume-menu' )} onClick={this.handleClick} + buttonClassName={classNames( + buttonClassName, + { + 'video-react-vol-muted': player.muted, + 'video-react-vol-0': level === 0 && !player.muted, + 'video-react-vol-1': level === 1, + 'video-react-vol-2': level === 2, + 'video-react-vol-3': level === 3 + }, + 'video-react-volume-menu-button' + )} inline={inline} + aria-label="Volume" > {children} diff --git a/src/components/popup/PopupButton.js b/src/components/popup/PopupButton.js index e6cb603a..e7eef21c 100644 --- a/src/components/popup/PopupButton.js +++ b/src/components/popup/PopupButton.js @@ -17,17 +17,19 @@ const defaultProps = { }; export default function PopupButton(props) { - const { inline, className } = props; + const { inline, className, buttonClassName } = props; const ps = { ...props }; delete ps.children; delete ps.inline; delete ps.className; return ( -
+
.video-react-menu-content { + .video-react-volume-menu .video-react-menu > .video-react-menu-content { height: 0; width: 0; @@ -107,25 +107,24 @@ overflow-y: hidden; } - .video-react-volume-menu-button-vertical:hover + .video-react-menu > .video-react-menu-content, - .video-react-volume-menu-button-vertical:focus + .video-react-menu > .video-react-menu-content, - .video-react-volume-menu-button-vertical.video-react-slider-active + .video-react-menu > .video-react-menu-content, - .video-react-volume-menu-button-vertical .video-react-lock-showing + .video-react-menu > .video-react-menu-content, - .video-react-menu:hover, .video-react-menu:focus { + .video-react-volume-menu:hover .video-react-menu-content, + .video-react-volume-menu:focus-within .video-react-menu-content, + .video-react-volume-menu.video-react-slider-active .video-react-menu-content, + .video-react-volume-menu.video-react-lock-showing .video-react-menu-content { height: auto; width: inherit; background-color: transparent; } - .video-react-volume-menu-button-horizontal:hover + .video-react-menu > .video-react-menu-content, - .video-react-volume-menu-button-horizontal:focus + .video-react-menu > .video-react-menu-content, - .video-react-volume-menu-button-horizontal .video-react-slider-active + .video-react-menu > .video-react-menu-content, - .video-react-volume-menu-button-horizontal .video-react-lock-showing + .video-react-menu > .video-react-menu-content { + .video-react-volume-menu-horizontal:hover .video-react-menu-content, + .video-react-volume-menu-horizontal:focus-within .video-react-menu-content, + .video-react-volume-menu-horizontal.video-react-slider-active .video-react-menu-content, + .video-react-volume-menu-horizontal.video-react-lock-showing .video-react-menu-content { height: 2.9em; width: 8em; } - .video-react-volume-menu-button.video-react-menu-button-inline + .video-react-menu > .video-react-menu-content { + .video-react-volume-menu .video-react-menu > .video-react-menu-content { // An inline volume should never have a menu background color. // This protects it from external changes to background colors. background-color: transparent !important;