From 4acdec747499e70a7b1ce2b8eeb6c912f4d592f6 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Fri, 10 Oct 2025 01:01:23 +0300 Subject: [PATCH] Adjust control bar font size for touch devices Added a separate mobileFontSize to PlayerConfig and updated AutoplayToggleButton, NextVideoButton, and VideoJSPlayer to use a smaller font size for control bar icons and text on touch devices. This improves UI consistency and usability across device types. --- .../controls/AutoplayToggleButton.js | 11 +++++++---- .../components/controls/NextVideoButton.js | 19 +++++++++++++++---- .../components/video-player/VideoJSPlayer.jsx | 4 ++-- .../video-js/src/config/playerConfig.js | 2 ++ 4 files changed, 26 insertions(+), 10 deletions(-) diff --git a/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js b/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js index 101f20fb..54f2b43e 100644 --- a/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js +++ b/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js @@ -15,12 +15,15 @@ class AutoplayToggleButton extends Button { 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0; - + /* if (isTouchDevice) { // Hide the button on touch devices this.hide(); return; - } + } */ + + // Store the appropriate font size based on device type + this.iconSize = isTouchDevice ? PlayerConfig.controlBar.mobileFontSize : PlayerConfig.controlBar.fontSize; this.userPreferences = options.userPreferences; // Get autoplay preference from localStorage, default to false if not set @@ -80,7 +83,7 @@ class AutoplayToggleButton extends Button { if (this.isAutoplayEnabled) { // this.iconSpan.classList.add('vjs-icon-spinner'); this.iconSpan.innerHTML = ` - + @@ -91,7 +94,7 @@ class AutoplayToggleButton extends Button { } else { // this.iconSpan.classList.add('vjs-icon-play-circle'); this.iconSpan.innerHTML = ` - + diff --git a/frontend-tools/video-js/src/components/controls/NextVideoButton.js b/frontend-tools/video-js/src/components/controls/NextVideoButton.js index 29ed7e7b..2accb05c 100644 --- a/frontend-tools/video-js/src/components/controls/NextVideoButton.js +++ b/frontend-tools/video-js/src/components/controls/NextVideoButton.js @@ -9,6 +9,15 @@ class NextVideoButton extends Button { constructor(player, options) { super(player, options); // this.nextLink = options.nextLink || ''; + // Check if this is a touch device + const isTouchDevice = + options.isTouchDevice || + 'ontouchstart' in window || + navigator.maxTouchPoints > 0 || + navigator.msMaxTouchPoints > 0; + + // Store the appropriate font size based on device type + this.iconSize = isTouchDevice ? PlayerConfig.controlBar.mobileFontSize : PlayerConfig.controlBar.fontSize; } createEl() { @@ -36,10 +45,12 @@ class NextVideoButton extends Button { // Create custom icon span with SVG const customIconSpan = videojs.dom.createEl('span'); - customIconSpan.innerHTML = ` - - - `; + setTimeout(() => { + customIconSpan.innerHTML = ` + + + `; + }, 0); // Append spans to button in Video.js standard order button.appendChild(iconPlaceholder); diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx index fcec3440..88239f09 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -2495,7 +2495,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) { if (controlBarEl) { // Style control bar using config values controlBarEl.style.height = `${PlayerConfig.controlBar.height}em`; - controlBarEl.style.fontSize = `${PlayerConfig.controlBar.fontSize}px`; + controlBarEl.style.fontSize = `${isTouchDevice ? PlayerConfig.controlBar.mobileFontSize : PlayerConfig.controlBar.fontSize}px`; controlBarEl.style.backgroundColor = PlayerConfig.controlBar.backgroundColor; // Apply same line height to time-related controls @@ -2784,7 +2784,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) { if (!isEmbedPlayer && (mediaData?.nextLink || isDevMode)) { // it seems that the nextLink is not always available, and it is need the this.player().trigger('nextVideo'); from NextVideoButton.js // TODO: remove the 1===1 and the mediaData?.nextLink const nextVideoButton = new NextVideoButton(playerRef.current, { - nextLink: mediaData.nextLink, + isTouchDevice: isTouchDevice, }); const playToggleIndex = controlBar.children().indexOf(playToggle); // Insert it after play button controlBar.addChild(nextVideoButton, {}, playToggleIndex + 1); // After time display diff --git a/frontend-tools/video-js/src/config/playerConfig.js b/frontend-tools/video-js/src/config/playerConfig.js index 970b25f1..11324ebd 100644 --- a/frontend-tools/video-js/src/config/playerConfig.js +++ b/frontend-tools/video-js/src/config/playerConfig.js @@ -39,6 +39,8 @@ const PlayerConfig = { // Font size in em units fontSize: 16, + + mobileFontSize: 12, }, };