From b3888fe72b628b73395020303db7f35485f7e51d Mon Sep 17 00:00:00 2001 From: amtins Date: Fri, 28 Jul 2023 16:31:37 +0200 Subject: [PATCH 1/7] fix(svg-icons): icon size consistency The icons have been regenerated from the svg files in `videojs/font` to ensure consistency in size. - update icons.svg file --- src/images/icons.svg | 169 ++++++++++++++++++++++--------------------- 1 file changed, 85 insertions(+), 84 deletions(-) diff --git a/src/images/icons.svg b/src/images/icons.svg index 8587c6f5f4..88eed01996 100644 --- a/src/images/icons.svg +++ b/src/images/icons.svg @@ -1,142 +1,143 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - + - + - + - + - + - + - - + + - - + + - - + + - - + + - - + + - - + + - + + - - + + - - + + - - + + - - + + - - + + From e476d3e8b219b70a542aec4d37c02af91e4f70ab Mon Sep 17 00:00:00 2001 From: amtins Date: Fri, 28 Jul 2023 16:56:39 +0200 Subject: [PATCH 2/7] fix(svg-icons): default height and width in css Uses the same reference value from the font size of `font icons` to define the default height and width of `svg icons` --- src/css/_icons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/_icons.scss b/src/css/_icons.scss index 4a106b78af..e242ac1a42 100644 --- a/src/css/_icons.scss +++ b/src/css/_icons.scss @@ -12,8 +12,8 @@ background-position: center; fill: #FFFFFF; - height: 1.5em; - width: 1.5em; + height: 1.8em; + width: 1.8em; // Overwrite any font content &:before { From dd4a01473f50fe9d36247971799a9ae4d6623e22 Mon Sep 17 00:00:00 2001 From: amtins Date: Fri, 28 Jul 2023 17:21:29 +0200 Subject: [PATCH 3/7] fix(big-play-button): default height and width of svg icon Uses the same size as the big-play-button font size and centers the svg icon --- src/css/components/_big-play.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/css/components/_big-play.scss b/src/css/components/_big-play.scss index 4e81900932..4818bca573 100644 --- a/src/css/components/_big-play.scss +++ b/src/css/components/_big-play.scss @@ -31,8 +31,13 @@ } .vjs-big-play-button .vjs-svg-icon { - width: 0.75em; - height: 0.75em; + width: 1em; + height: 1em; + position: absolute; + top: 50%; + left: 50%; + line-height: 1; + transform: translate(-50%, -50%); } .video-js:hover .vjs-big-play-button, From 0ad47950309df8270ecb775815b82e197a5f6bca Mon Sep 17 00:00:00 2001 From: amtins Date: Fri, 28 Jul 2023 17:49:56 +0200 Subject: [PATCH 4/7] fix(volume-control): default height and width of svg icon Uses the same size as the `volume-level` font size and centers the svg icon for both horizontal and vertical display --- src/css/components/_volume.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss index da3019c0ab..7c97422fdf 100644 --- a/src/css/components/_volume.scss +++ b/src/css/components/_volume.scss @@ -143,9 +143,8 @@ .vjs-volume-level .vjs-svg-icon { position: absolute; - width: 0.6em; - height: 0.6em; - top: -0.55em; + width: 0.9em; + height: 0.9em; pointer-events: none; } @@ -169,13 +168,12 @@ // here // Update placement of circle icon when using SVG icons .vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon { - top: -0.15em; right: -0.3em; - line-height: 0.05em; + transform: translateY(-50%); } .vjs-slider-vertical .vjs-volume-level .vjs-svg-icon { - top: -0.9em; - right: -0.15em; + top: -0.55em; + transform: translateX(-50%); } .video-js .vjs-volume-panel.vjs-volume-panel-vertical { From 252796f45e4f8421a22fd3055f36d9fdc0b8edd8 Mon Sep 17 00:00:00 2001 From: amtins Date: Fri, 28 Jul 2023 17:54:48 +0200 Subject: [PATCH 5/7] fix(volume-control): mouse-display overlaps the volume-level svg icon --- src/css/components/_volume.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss index 7c97422fdf..904ec90a07 100644 --- a/src/css/components/_volume.scss +++ b/src/css/components/_volume.scss @@ -146,13 +146,7 @@ width: 0.9em; height: 0.9em; pointer-events: none; -} - -// Due to this icon from Material UI being a bit smaller than the others, -// we will adjust the height and width -.vjs-mute-control .vjs-svg-icon { - width: 1.75em; - height: 1.75em; + z-index: 1; } .vjs-slider-horizontal .vjs-volume-level { From afec7a11af23caf8fddb412c56705019cdbbbe3f Mon Sep 17 00:00:00 2001 From: amtins Date: Fri, 28 Jul 2023 18:22:15 +0200 Subject: [PATCH 6/7] fix(play-progress): default height and width of svg icon Uses the same size as the `play-progress` font size and removes the hover effect --- src/css/components/_progress.scss | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss index abc54329ad..e1c1851009 100644 --- a/src/css/components/_progress.scss +++ b/src/css/components/_progress.scss @@ -91,8 +91,8 @@ position: absolute; top: -0.35em; right: -0.4em; - width: 1em; - height: 1em; + width: 0.9em; + height: 0.9em; pointer-events: none; line-height: 0.15em; z-index: 1; @@ -138,15 +138,6 @@ z-index: 1; } -// Update the size of the progress circle when using SVG icons -.vjs-progress-control:hover .vjs-progress-holder .vjs-play-progress .vjs-svg-icon { - width: 0.8em; - height: 0.8em; - top: -0.25em; - right: -0.5em; - line-height: 0.35em; -} - .video-js .vjs-progress-holder:focus .vjs-time-tooltip { display: none; } From ce8f0644084519fa1b06c9b32a98b9d1d6b0f696 Mon Sep 17 00:00:00 2001 From: amtins Date: Fri, 28 Jul 2023 18:26:52 +0200 Subject: [PATCH 7/7] fix(subtitles-button): default height and width of svg icon Uses the same size as the `subtitles button` font size --- src/css/components/_subs-caps.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/css/components/_subs-caps.scss b/src/css/components/_subs-caps.scss index 878ed8af27..e22a59d2de 100644 --- a/src/css/components/_subs-caps.scss +++ b/src/css/components/_subs-caps.scss @@ -15,7 +15,8 @@ } .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon { - margin-left: 0.3em; + width: 1.5em; + height: 1.5em; } .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {