Merge pull request #1616 from NicoPennec/main

Various fixes

package.json

@@ -25,7 +25,7 @@
     "@fullcalendar/multimonth": "6.1.15",
     "@fullcalendar/vue3": "6.1.15",
     "@google/model-viewer": "3.5.0",
-    "@sentry/vue": "8.43.0",
+    "@sentry/vue": "8.45.1",
     "@unhead/vue": "1.11.14",
     "@vuepic/vue-datepicker": "9.0.3",
     "async": "3.2.6",
@@ -63,7 +63,7 @@
     "vuedraggable": "4.1.0",
     "vuex": "4.1.0",
     "vuex-router-sync": "6.0.0-rc.1",
-    "wavesurfer.js": "7.8.10"
+    "wavesurfer.js": "7.8.11"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.2.1",

src/components/mixins/annotation.js

@@ -3,8 +3,9 @@
  * widgets.
  */
 import { fabric } from 'fabric'
-import { v4 as uuidv4 } from 'uuid'
 import moment from 'moment'
+import { v4 as uuidv4 } from 'uuid'
+import { markRaw } from 'vue'
 
 import clipboard from '@/lib/clipboard'
 import { formatFullDate } from '@/lib/time'
@@ -945,9 +946,12 @@ export const annotationMixin = {
       if (!this.annotationCanvas) return
 
       const canvasId = this.annotationCanvas.id
-      this.fabricCanvas = new fabric.Canvas(canvasId, {
-        fireRightClick: true
-      })
+      // Use markRaw() to avoid reactivity on Fabric Canvas
+      this.fabricCanvas = markRaw(
+        new fabric.Canvas(canvasId, {
+          fireRightClick: true
+        })
+      )
       this.fabricCanvas.setDimensions({
         width: 100,
         height: 100

src/components/mixins/parameters.js

@@ -30,17 +30,17 @@ export const parametersMixin = {
       return params
     },
 
-    saveParemetersToPreferences() {
+    saveParametersToPreferences() {
       preferences.setObjectPreference(
-        `parameters:{this.parameterNamespace}`,
+        `parameters:${this.parameterNamespace}`,
         this.parameters
       )
     },
 
     getParametersFromPreferences(defaultParameters) {
       return (
         preferences.getObjectPreference(
-          `parameters:{this.parameterNamespace}`
+          `parameters:${this.parameterNamespace}`
         ) || defaultParameters
       )
     }
@@ -51,7 +51,7 @@ export const parametersMixin = {
       deep: true,
       handler() {
         this.applyParametersToUrl()
-        this.saveParemetersToPreferences()
+        this.saveParametersToPreferences()
       }
     }
   }

src/components/pages/Notifications.vue

@@ -544,8 +544,8 @@ export default {
     onNotificationSelected(event, notification) {
       if (
         event.target.classList.contains('bool-field') ||
-        event.target.parentElement.classList.contains('bool-field') ||
-        event.target.parentElement.parentElement.classList.contains(
+        event.target.parentElement?.classList.contains('bool-field') ||
+        event.target.parentElement?.parentElement?.classList.contains(
           'bool-field'
         )
       ) {

src/components/pages/playlists/PlaylistedEntity.vue

@@ -63,15 +63,6 @@
       @drop="onDropped"
       ref="drop-area"
     ></div>
-    <div
-      :id="'drop-area-wide-' + entity.id"
-      class="drop-area-wide"
-      @dragover="onDragover"
-      @dragleave="onDragleave"
-      @drop="onDropped"
-      @click.prevent="onPlayClick"
-      ref="drop-area-wide"
-    ></div>
   </div>
 </template>
 
@@ -139,10 +130,6 @@ export default {
       return this.$refs['drop-area']
     },
 
-    dropAreaWide() {
-      return this.$refs['drop-area-wide']
-    },
-
     taskTypeOptions() {
       return this.entity.preview_files
         ? Object.keys(this.entity.preview_files)
@@ -265,7 +252,7 @@ export default {
       this.$emit('preview-changed', this.entity, previewFile)
     },
 
-    'entity.preview_file_id': function () {
+    'entity.preview_file_id'() {
       if (this.previewFileId !== this.entity.preview_file_id) {
         this.previewFileId = this.entity.preview_file_id
       }
@@ -286,15 +273,6 @@ export default {
   transition: width 0.3s ease;
 }
 
-.drop-area-wide {
-  cursor: pointer;
-  height: 100%;
-  left: 100px;
-  position: absolute;
-  width: 60px;
-  z-index: 2;
-}
-
 .playlisted-entity {
   border-top: 3px solid transparent;
   border-radius: 5px;

src/components/previews/PreviewPlayer.vue

@@ -525,14 +525,14 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue'
 import { fabric } from 'fabric'
 import {
   ArrowUpRightIcon,
   DownloadIcon,
   GlobeIcon,
   LinkIcon
 } from 'lucide-vue-next'
+import { defineAsyncComponent, markRaw } from 'vue'
 import { mapGetters, mapActions } from 'vuex'
 
 import {
@@ -1231,11 +1231,14 @@ export default {
       const dimensions = this.getDimensions()
       const width = dimensions.width
       const height = dimensions.height
-      this.fabricCanvas = new fabric.Canvas(this.canvasId, {
-        fireRightClick: true,
-        width,
-        height
-      })
+      // Use markRaw() to avoid reactivity on Fabric Canvas
+      this.fabricCanvas = markRaw(
+        new fabric.Canvas(this.canvasId, {
+          fireRightClick: true,
+          width,
+          height
+        })
+      )
       if (!this.fabricCanvas.freeDrawingBrush) {
         this.fabricCanvas.freeDrawingBrush = new fabric.PencilBrush(
           this.fabricCanvas

src/components/widgets/AddComment.vue

@@ -857,7 +857,7 @@ export default {
       deep: true,
       immediate: true,
       handler() {
-        const form = this.previewForms.findLast(
+        const form = this.previewForms?.findLast(
           form => this.getRevision(form) > 0
         )
         this.nextRevision = this.getRevision(form)