CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 07:28:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

Hide time tooltip, mouse display, and sprite preview for audio files

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-10-13 01:14:15 +03:00
parent cd9fc51619
commit cf1b84d538
2 changed files with 26 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend-tools/video-js/src/components/video-player/VideoJSPlayer.css
View File

@ -17,3 +17,13 @@ button {
.video-js .vjs-time-control.vjs-time-divider {
display: none !important;
}
/* Hide time tooltip, mouse display, and sprite preview for audio files */
.video-js.vjs-audio-type .vjs-time-tooltip,
.video-js.vjs-audio-type .vjs-mouse-display,
.video-js.vjs-audio-type .vjs-sprite-preview-tooltip,
.video-js.vjs-audio-type .chapter-image-sprite {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}

102
frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
View File

@ -1247,8 +1247,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
],
// VIDEO
media_type: 'video',
original_media_url:
media_type: 'audio',
_original_media_url:
'/media/original/user/markos/db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4',
_hls_info: {
master_file: '/media/hls/5073e97457004961a163c5b504e2d7e8/master.m3u8',
@ -1264,83 +1264,6 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
'360_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-5/stream.m3u8',
},
hls_info: {},
/* hls_info: {
master_file: '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/master.m3u8',
'240_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-1/iframes.m3u8',
'480_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-2/iframes.m3u8',
'1080_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-3/iframes.m3u8',
'360_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-4/iframes.m3u8',
'720_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-5/iframes.m3u8',
'240_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-1/stream.m3u8',
'480_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-2/stream.m3u8',
'1080_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-3/stream.m3u8',
'360_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-4/stream.m3u8',
'720_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-5/stream.m3u8',
}, */
/* encodings_info: {
144: {
h264: {
title: 'h264-144',
url: '/media/encoded/23/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
progress: 100,
size: '0.8MB',
encoding_id: 245,
status: 'success',
},
},
240: {
h264: {
title: 'h264-240',
url: '/media/encoded/2/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
progress: 100,
size: '2.0MB',
encoding_id: 246,
status: 'success',
},
},
360: {
h264: {
title: 'h264-360',
url: '/media/encoded/3/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
progress: 100,
size: '3.5MB',
encoding_id: 247,
status: 'success',
},
},
480: {
h264: {
title: 'h264-480',
url: '/media/encoded/13/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
progress: 100,
size: '7.0MB',
encoding_id: 248,
status: 'success',
},
},
720: {
h264: {
title: 'h264-720',
url: '/media/encoded/10/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
progress: 100,
size: '15.1MB',
encoding_id: 249,
status: 'success',
},
},
1080: {
h264: {
title: 'h264-1080',
url: '/media/encoded/7/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
progress: 100,
size: '27.5MB',
encoding_id: 250,
status: 'success',
},
},
1440: {},
2160: {},
}, */
encodings_info: {},
___encodings_info: {
144: {
@ -1713,14 +1636,14 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// Default sample video
return [
{
/* {
src: '/videos/sample-video-white.mp4',
type: 'video/mp4',
},
/* {
}, */
{
src: '/videos/sample-video.mp3',
type: 'audio/mpeg',
}, */
},
];
};
@ -2253,6 +2176,12 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// Set up auto-save for preference changes
userPreferences.current.setupAutoSave(playerRef.current);
// Add class for audio files to enable audio-specific styling
console.log('mediaData.media_type', mediaData.data?.media_type);
if (mediaData.data?.media_type === 'audio') {
playerRef.current.addClass('vjs-audio-type');
}
// Enable tooltips for all standard VideoJS buttons
enableStandardButtonTooltips(playerRef.current);
@ -3348,16 +3277,17 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// Check if we have chapters
const hasChapters = chaptersData && chaptersData.length > 0;
if (hasChapters) {
// Skip sprite preview and chapter markers for audio files
if (hasChapters && mediaData.media_type !== 'audio') {
// Use original ChapterMarkers with sprite functionality when chapters exist
const chapterMarkers = new ChapterMarkers(playerRef.current, {
previewSprite: mediaData.previewSprite,
isTouchDevice: isTouchDevice,
});
seekBar.addChild(chapterMarkers);
} else if (mediaData.previewSprite && !isTouchDevice) {
} else if (mediaData.previewSprite && !isTouchDevice && mediaData.media_type !== 'audio') {
// Use separate SpritePreview component only when no chapters but sprite data exists
// Skip on touch devices to avoid unwanted tooltips
// Skip on touch devices and audio files to avoid unwanted tooltips
const spritePreview = new SpritePreview(playerRef.current, {
previewSprite: mediaData.previewSprite,
isTouchDevice: isTouchDevice,