Skip to content

Video Thumbnail Sprite Preview Not Working #1449

@akulmehta

Description

@akulmehta

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:

  1. Deploy MediaCMS v7.2.0 using Docker (mediacms/mediacms:full)
  2. Upload a video and let MediaCMS generate sprites
  3. Navigate to the homepage or video listing page
  4. Hover over a video thumbnail
  5. Expected: Animated preview should play
  6. 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;

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions