From 26c2413f12bf6067d69697f893dab78670692fb0 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Mon, 6 Oct 2025 17:12:59 +0300 Subject: [PATCH] Add SVG icons to AutoplayToggleButton Replaces font icon classes with inline SVG icons for the autoplay toggle button, providing distinct icons for ON and OFF states. Updates CSS for SVG sizing and removes focus outlines for improved appearance and accessibility. --- .../controls/AutoplayToggleButton.css | 14 +++++++++ .../controls/AutoplayToggleButton.js | 29 ++++++++++++++++--- 2 files changed, 39 insertions(+), 4 deletions(-) diff --git a/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.css b/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.css index 7a985502..b334fc5d 100644 --- a/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.css +++ b/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.css @@ -6,6 +6,13 @@ line-height: 1; } +/* SVG icon styles for autoplay button - match VideoJS icon dimensions */ +.vjs-autoplay-toggle .vjs-autoplay-icon svg { + width: 2.5em; + height: 2.5em; + display: block; +} + /* Use play icon when autoplay is OFF (clicking will turn it ON) */ .vjs-autoplay-toggle .vjs-icon-play:before { content: "\f101"; /* VideoJS play icon */ @@ -20,6 +27,13 @@ position: relative; } +/* Remove focus outline/border */ +.video-js .vjs-autoplay-toggle:focus { + outline: none !important; + border: none !important; + box-shadow: none !important; +} + .video-js .vjs-autoplay-toggle .vjs-hover-display, .video-js .vjs-autoplay-toggle .vjs-tooltip, .video-js .vjs-autoplay-toggle .vjs-tooltip-text { diff --git a/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js b/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js index 46082dbb..932d4b78 100644 --- a/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js +++ b/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js @@ -1,5 +1,5 @@ import videojs from 'video.js'; -// import './AutoplayToggleButton.css'; +import './AutoplayToggleButton.css'; const Button = videojs.getComponent('Button'); @@ -70,13 +70,34 @@ class AutoplayToggleButton extends Button { updateIconClass() { // Remove existing icon classes - this.iconSpan.className = 'vjs-icon-placeholder vjs-autoplay-icon'; + this.iconSpan.className = 'vjs-icon-placeholder vjs-svg-icon vjs-autoplay-icon__OFFF'; + this.iconSpan.style.position = 'relative'; + this.iconSpan.style.top = '2px'; + // Add appropriate icon class based on state // Add appropriate icon class based on state if (this.isAutoplayEnabled) { - this.iconSpan.classList.add('vjs-icon-spinner'); + // this.iconSpan.classList.add('vjs-icon-spinner'); + this.iconSpan.innerHTML = ` + + + + + + + +`; } else { - this.iconSpan.classList.add('vjs-icon-play-circle'); + // this.iconSpan.classList.add('vjs-icon-play-circle'); + this.iconSpan.innerHTML = ` + + + + + + + +`; } }