TMS-1061: Change hero video-field from URL to File

CHANGELOG.MD

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1061: Change hero video-field from URL to File, since the URL wasn't working
+
 ## [1.58.1] - 2024-09-03
 
 - TMS-1062: Increase menu-dropdown button size

lib/ACF/Fields/HeroFields.php

@@ -46,7 +46,7 @@ protected function sub_fields() : array {
                 'instructions' => '',
             ],
             'video'       => [
-                'label'        => 'Videon URL',
+                'label'        => 'Videotiedosto',
                 'instructions' => '',
             ],
             'title'       => [
@@ -74,40 +74,41 @@ protected function sub_fields() : array {
         $key = $this->get_key();
 
         $image_field = ( new Field\Image( $strings['image']['label'] ) )
-            ->set_key( "${key}_image" )
+            ->set_key( "{$key}_image" )
             ->set_name( 'image' )
             ->set_return_format( 'id' )
             ->set_wrapper_width( 50 )
             ->set_instructions( $strings['image']['instructions'] );
 
-        $video_field = ( new Field\URL( $strings['video']['label'] ) )
-            ->set_key( "${key}_video" )
-            ->set_name( 'video' )
+        $video_field = ( new Field\File( $strings['video']['label'] ) )
+            ->set_key( "{$key}_video_file" )
+            ->set_name( 'video_file' )
+            ->set_mime_types( [ 'mp4' ] )
             ->set_wrapper_width( 50 )
             ->set_instructions( $strings['video']['instructions'] );
 
         $title_field = ( new Field\Text( $strings['title']['label'] ) )
-            ->set_key( "${key}_title" )
+            ->set_key( "{$key}_title" )
             ->set_name( 'title' )
             ->set_wrapper_width( 50 )
             ->set_instructions( $strings['title']['instructions'] );
 
         $description_field = ( new Field\Textarea( $strings['description']['label'] ) )
-            ->set_key( "${key}_description" )
+            ->set_key( "{$key}_description" )
             ->set_name( 'description' )
             ->set_rows( 4 )
             ->set_new_lines( 'wpautop' )
             ->set_wrapper_width( 50 )
             ->set_instructions( $strings['description']['instructions'] );
 
         $link_field = ( new Field\Link( $strings['link']['label'] ) )
-            ->set_key( "${key}_link" )
+            ->set_key( "{$key}_link" )
             ->set_name( 'link' )
             ->set_wrapper_width( 40 )
             ->set_instructions( $strings['link']['instructions'] );
 
         $align_field = ( new Field\Select( $strings['align']['label'] ) )
-            ->set_key( "${key}_align" )
+            ->set_key( "{$key}_align" )
             ->set_name( 'align' )
             ->set_choices( [
                 'left'   => 'Vasen',
@@ -119,7 +120,7 @@ protected function sub_fields() : array {
             ->set_instructions( $strings['align']['instructions'] );
 
         $use_box_field = ( new Field\TrueFalse( $strings['use_box']['label'] ) )
-            ->set_key( "${key}_use_box" )
+            ->set_key( "{$key}_use_box" )
             ->set_name( 'use_box' )
             ->use_ui()
             ->set_wrapper_width( 30 )

partials/layouts/layout-hero.dust

@@ -4,9 +4,9 @@
         <div class="overlay overlay--dark-50"></div>
     {/use_overlay}
 
-    {?video}
+    {?video_file}
         <div class="is-overlay is-clipped" aria-hidden="true" tabindex="-1">
-            <video src="{video}" class="hero__video is-hidden" loop muted playsinline></video>
+            <video src="{video_file.url|url}" class="hero__video is-hidden" loop muted playsinline></video>
 
             <button class="hero__control hero__control--play" aria-label="{Strings.s.video.play|attr}">
                 {>"ui/icon" icon="play" class="icon--xxxlarge"  /}
@@ -16,7 +16,7 @@
                 {>"ui/icon" icon="pause" class="icon--xxxlarge"  /}
             </button>
         </div>
-    {/video}
+    {/video_file}
 
     <div class="hero__inner">
         <div class="container">