Fix disbaled screenshot button

Add the crossOrigin attribute for videos stored in cloud storage.
biigle · Feb 12, 2025 · c12faef · c12faef
1 parent ea98502
commit c12faef
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/resources/assets/js/videos/videoContainer.vue b/resources/assets/js/videos/videoContainer.vue
@@ -102,6 +102,7 @@ export default {
             hasCrossOriginError: false,
             videoFilenames: null,
             focusInputFindlabel: false,
+            isRemote: false,
         };
     },
     computed: {
@@ -567,6 +568,11 @@ export default {
                 .then(this.maybeFocusInitialAnnotation)
                 .then(this.maybeInitCurrentTime);
 
+            // storage endpoint requires the crossOrigin attribute if CORS was explicitly enabled
+            if (!this.isRemote) {
+                this.video.setAttribute('crossOrigin', '');
+            }
+
             this.video.src = this.videoFileUri.replace(':id', video.id);
 
             return promise;
@@ -737,6 +743,7 @@ export default {
         this.errors = biigle.$require('videos.errors');
         this.user = biigle.$require('videos.user');
         this.videoFilenames = biigle.$require('videos.videoFilenames');
+        this.isRemote = biigle.$require('videos.isRemote');
 
         this.initAnnotationFilters();
         this.restoreUrlParams();

diff --git a/resources/views/videos/show.blade.php b/resources/views/videos/show.blade.php
@@ -75,5 +75,6 @@ class="sidebar-container__content"
     biigle.$declare('videos.spritesThumbnailInterval', {!! $spritesThumbnailInterval !!});
     biigle.$declare('videos.spritesMaxThumbnails', {!! $spritesMaxThumbnails !!});
     biigle.$declare('videos.spritesMinThumbnails', {!! $spritesMinThumbnails !!});
+    biigle.$declare('videos.isRemote', {{$volume->isRemote()}});
 </script>
 @endpush