From ef1cde8dc74bec2ad0351c9dd21c6c7ea3bff388 Mon Sep 17 00:00:00 2001
From: yingfeng <yingfeng@iu.edu>
Date: Tue, 20 Aug 2024 05:41:30 -0400
Subject: [PATCH] AMP-3122 - fix v-model compiler error for vue3 - replace
 vue-mediaelement with vue3 version

---
 package.json                                   | 2 +-
 src/App.vue                                    | 2 +-
 src/components/entity/Mediaelement.vue         | 2 --
 src/components/evaluation/GroundTruthModal.vue | 3 ++-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 1bca3c41..1c741b56 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "underscore": "^1.13.7",
     "vue": "^3.4.34",
     "vue-click-outside": "^1.1.0",
-    "vue-mediaelement": "^1.0.0",
+    "vue3-mediaelement": "^0.0.8",
     "vue-router": "^4.4.0",
     "vuejs3-datepicker": "^1.0.19",
     "vuera": "^0.2.7",
diff --git a/src/App.vue b/src/App.vue
index 5487c8e7..8876aac3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,7 +31,7 @@
 import Sidebar from "@/components/navigation/Sidebar.vue";
 import config from "./assets/constants/common-contant.js";
 import { env } from "@/helpers/env.js";
-import "vue-mediaelement/src";
+import "vue3-mediaelement/src";
 export default {
   components: {
     Sidebar,
diff --git a/src/components/entity/Mediaelement.vue b/src/components/entity/Mediaelement.vue
index a45df0c8..5998bfc8 100644
--- a/src/components/entity/Mediaelement.vue
+++ b/src/components/entity/Mediaelement.vue
@@ -10,8 +10,6 @@
 </template>
 
 <script>
-// import "mediaelement";
-// import "vue-mediaelement/src";
 export default {
   name: "Mediaelement",
   props: {
diff --git a/src/components/evaluation/GroundTruthModal.vue b/src/components/evaluation/GroundTruthModal.vue
index 5f56785e..716f763f 100644
--- a/src/components/evaluation/GroundTruthModal.vue
+++ b/src/components/evaluation/GroundTruthModal.vue
@@ -2,7 +2,8 @@
   <div>
     <loader :show="loading" />
     <b-modal
-      v-model="showModal"
+      :modelValue="showModal"
+      @update:modelValue="showModal = $event" 
       id="modal-center"
       centered
       no-close-on-backdrop