TMS-1172: Add video possibility to hero-museum layout

[eebbi]

Severa-ID: 2108
Severa-kuvaus: TMS-1172 Kehitystä heron videoon, tietyt teemat
Task: https://hiondigital.atlassian.net/browse/TMS-1172

Description

Add video-possibility to hero-layout

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

[gemini-code-assist]

Summary of Changes

Hello @eebbi, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces comprehensive video capabilities to the hero-museum layout. It integrates new backend fields for video management with frontend JavaScript and template changes to display and control the video player, providing a richer media experience for this specific hero section. The PR description notes this as a breaking change, likely due to the introduction of new fields and potential impact on existing content structures.

Highlights

• Extend Hero JS functionality: The Hero JavaScript class has been updated to apply its video control logic to both .hero and the new .hero-museum elements, ensuring consistent behavior across both hero layouts. This includes modifying the cache() and docReady() methods to target both selectors.
• Introduce new ACF fields: New Advanced Custom Fields (video_file, video_caption, autoplay_video) have been added to the HeroMuseumFields class. These fields allow content editors to upload an MP4 video, provide an accessibility caption, and configure autoplay behavior directly from the WordPress admin interface.
• Integrate video player into template: The layout-hero-museum.dust template has been significantly updated to conditionally render an HTML5 video player. This includes full video controls (play, pause, stop, volume, mute) and accessibility features like a screen-reader-only caption, which are displayed when a video file is provided.
• Accessibility and UX improvements: The embedded video player includes loop, muted, and playsinline attributes for a seamless background video experience. Controls are conditionally displayed based on the autoplay_video setting, enhancing user experience and providing necessary accessibility features.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces video functionality to the hero-museum layout. The changes include JavaScript updates for video controls, ACF fields for managing video content, and a Dust template that integrates the video player. It is recommended to ensure the uniqueness of HTML IDs generated in the Dust template to maintain HTML validity and accessibility. Additionally, clarifying the instructional text for the video caption ACF field is suggested to further promote accessibility best practices.