Migrate use of Vue.filter()

biigle · Jan 10, 2025 · 05137d5 · 05137d5
1 parent 4958b71
commit 05137d5
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 6 deletions.
diff --git a/resources/assets/js/bootstrap.js b/resources/assets/js/bootstrap.js
@@ -1,5 +1,10 @@
 import Vue from 'vue';
 import VueResource from 'vue-resource';
+import { configureCompat } from 'vue'
+
+configureCompat({
+    FILTERS: false,
+});
 
 window.Vue = Vue;
 window.Vue.use(VueResource);

diff --git a/resources/assets/js/videos/components/currentTime.vue b/resources/assets/js/videos/components/currentTime.vue
@@ -12,6 +12,7 @@
 
 <script>
 import Loader from '@/core/components/loader.vue';
+import videoTime from '@/videos/filters/videoTime';
 
 export default {
     props: {
@@ -29,7 +30,7 @@ export default {
     },
     computed: {
         currentTimeText() {
-            return Vue.filter('videoTime')(this.currentTime);
+            return videoTime(this.currentTime);
         },
     },
 };

diff --git a/resources/assets/js/videos/components/thumbnailPreview.vue b/resources/assets/js/videos/components/thumbnailPreview.vue
@@ -8,6 +8,7 @@
 </template>
 
 <script>
+import videoTime from '@/videos/filters/videoTime';
 
 let transformUuid = function (uuid) {
     return uuid[0] + uuid[1] + '/' + uuid[2] + uuid[3] + '/' + uuid;
@@ -93,7 +94,7 @@ export default {
             return [nbrCols, nbrRows];
         },
         hoverTimeText() {
-            return Vue.filter('videoTime')(this.hoverTime);
+            return videoTime(this.hoverTime);
         },
         hoverTimeStyle() {
             return { 'font': `bold ${this.fontSize}px Sans-Serif`, 'color': '#cccccc' };

diff --git a/resources/assets/js/videos/components/videoProgressTick.vue b/resources/assets/js/videos/components/videoProgressTick.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script>
+import videoTime from '@/videos/filters/videoTime';
+
 export default {
     props: {
         time: {
@@ -17,7 +19,7 @@ export default {
             return `left: ${offset}px`;
         },
         text() {
-            return Vue.filter('videoTime')(this.time);
+            return videoTime(this.time);
         },
     },
 };

diff --git a/resources/assets/js/videos/filters/videoTime.js b/resources/assets/js/videos/filters/videoTime.js
@@ -2,7 +2,7 @@ let date = new Date(0);
 let start = '';
 let end = '';
 
-Vue.filter('videoTime', function (time) {
+export default function videoTime(time) {
     // setTime expects milliseconds, time is in seconds.
     date.setTime(time * 1000);
     // Extract the "14:48:00" and "000" parts from a string "2011-10-05T14:48:00.000Z".
@@ -11,4 +11,4 @@ Vue.filter('videoTime', function (time) {
     end = Math.round(parseInt(end, 10) / 10).toString(10).padStart(2, '0');
 
     return `${start}.${end}`;
-});
+};
diff --git a/resources/assets/js/videos/main.js b/resources/assets/js/videos/main.js
@@ -1,4 +1,3 @@
-import './filters/videoTime';
 import Navbar from './navbar.vue';
 import SearchResults from './searchResults.vue';
 import VideoContainer from './videoContainer.vue';