-
-
Notifications
You must be signed in to change notification settings - Fork 873
Description
Describe the issue
Video thumbnail sprite preview (hover effect) does not work in MediaCMS v7.2.0. When hovering over video thumbnails, instead of showing an animated preview, a JavaScript error occurs.
To Reproduce
Steps to reproduce the issue:
- Deploy MediaCMS v7.2.0 using Docker (
mediacms/mediacms:full) - Upload a video and let MediaCMS generate sprites
- Navigate to the homepage or video listing page
- Hover over a video thumbnail
- Expected: Animated preview should play
- Actual: JavaScript error occurs, no preview shows
Error Message
Uncaught TypeError: s.requestAnimationFrame is not a function
at n (MediaItemPreviewer.js:1:1)
Stack Trace:
_commons.js:1 Uncaught TypeError: s.requestAnimationFrame is not a function
at n (MediaItemPreviewer.js:1:1)
at o (MediaItemPreviewer.js:1:1)
at e.onMouseEnter (MediaItemPreviewer.js:1:1)
at HTMLLIElement.a (index.js:1:1)
Expected behavior
Animated preview should play
Screenshots
N/A as would need to be a movie
Environment (please complete the following information):
- MediaCMS Version: v7.2.0 (Docker deployment using
mediacms/mediacms:full) - Deployment Method: Docker Compose
- Browser: Observed in Firefox Latest
- Installation: Fresh installation with clean rebuild
Additional context
I think that the bug is in frontend/src/static/js/utils/helpers/dom.js at lines 28-29:
export const requestAnimationFrame =
window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;This polyfill is missing window.requestAnimationFrame (the standard API) at the beginning of the fallback chain. All modern browsers support the standard window.requestAnimationFrame, but the code never checks for it, causing the function to be undefined.
Proposed Fix
Update frontend/src/static/js/utils/helpers/dom.js lines 28-29 to include the standard API:
export const requestAnimationFrame =
window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;