Fix modals

front/.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     es6: true
   },
   extends: [
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
     '@vue/typescript/recommended',
     '@vue/standard'
 
@@ -13,7 +13,9 @@ module.exports = {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly'
   },
+  parser: 'vue-eslint-parser',
   parserOptions: {
+    parser: '@typescript-eslint/parser',
     ecmaVersion: 2020,
     sourceType: 'module'
   },

front/src/App.vue

@@ -132,15 +132,13 @@ const showSetInstanceModal = ref(false)
       property="stylesheet"
       :href="url"
     >
+
     <sidebar
       :width="width"
       @show:set-instance-modal="showSetInstanceModal = !showSetInstanceModal"
       @show:shortcuts-modal="toggleShortcutsModal"
     />
-    <set-instance-modal
+    <set-instance-modal v-model:show="showSetInstanceModal" />
-      :show="showSetInstanceModal"
-      @update:show="showSetInstanceModal = $event"
-    />
     <service-messages />
     <transition name="queue">
       <queue
@@ -150,17 +148,18 @@ const showSetInstanceModal = ref(false)
     </transition>
 
     <router-view
-      v-show="!store.state.ui.queueFocused"
       v-slot="{ Component }"
       role="main"
     >
-      <Suspense v-if="Component">
+      <template v-if="Component">
+        <Suspense>
           <component :is="Component" />
           <template #fallback>
             <!-- TODO (wvffle): Add loader -->
             Loading...
           </template>
         </Suspense>
+      </template>
     </router-view>
 
     <audio-player ref="player" />
@@ -168,10 +167,7 @@ const showSetInstanceModal = ref(false)
     <channel-upload-modal v-if="store.state.auth.authenticated" />
     <filter-modal v-if="store.state.auth.authenticated" />
     <report-modal />
-    <shortcuts-modal
+    <shortcuts-modal v-model:show="showShortcutsModal" />
-      :show="showShortcutsModal"
-      @update:show="showShortcutsModal = $event"
-    />
   </div>
 </template>
 

front/src/components/SetInstanceModal.vue

@@ -1,7 +1,7 @@
 <template>
   <modal
-    :show="show"
+    v-model:show="showRef"
-    @update:show="$emit('update:show', $event); isError = false"
+    @update:show="isError = false"
   >
     <h3 class="header">
       <translate translate-context="Popup/Instance/Title">
@@ -108,12 +108,18 @@
 import Modal from '~/components/semantic/Modal.vue'
 import axios from 'axios'
 import { uniq } from 'lodash-es'
+import { useVModel } from '@vueuse/core'
 
 export default {
   components: {
     Modal
   },
   props: { show: { type: Boolean, required: true } },
+  setup (props) {
+    // TODO (wvffle): Add defineEmits when rewriting to <script setup>
+    const showRef = useVModel(props, 'show'/*, emit*/)
+    return { showRef }
+  },
   data () {
     return {
       instanceUrl: null,

front/src/components/ShortcutsModal.vue

@@ -1,8 +1,109 @@
+<script setup lang="ts">
+import Modal from '~/components/semantic/Modal.vue'
+import { useVModel } from '@vueuse/core'
+import { computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+
+interface Props {
+  show: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:show'])
+const showRef = useVModel(props, 'show', emit)
+
+const { $pgettext } = useGettext()
+const general = computed(() => [
+  {
+    title: $pgettext('Popup/Keyboard shortcuts/Title', 'General shortcuts'),
+    shortcuts: [
+      {
+        key: 'h',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Show available keyboard shortcuts')
+      },
+      {
+        key: 'shift + f',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Focus searchbar')
+      },
+      {
+        key: 'esc',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Unfocus searchbar')
+      }
+    ]
+  }
+])
+
+const player = computed(() => [
+  {
+    title: $pgettext('Popup/Keyboard shortcuts/Title', 'Audio player shortcuts'),
+    shortcuts: [
+      {
+        key: 'p',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Pause/play the current track')
+      },
+      {
+        key: 'left',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 5s')
+      },
+      {
+        key: 'right',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 5s')
+      },
+      {
+        key: 'shift + left',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 30s')
+      },
+      {
+        key: 'shift + right',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 30s')
+      },
+      {
+        key: 'ctrl + shift + left',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play previous track')
+      },
+      {
+        key: 'ctrl + shift + right',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play next track')
+      },
+      {
+        key: 'shift + up',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Increase volume')
+      },
+      {
+        key: 'shift + down',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Decrease volume')
+      },
+      {
+        key: 'm',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle mute')
+      },
+      {
+        key: 'e',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Expand queue/player view')
+      },
+      {
+        key: 'l',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle queue looping')
+      },
+      {
+        key: 's',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Shuffle queue')
+      },
+      {
+        key: 'q',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Clear queue')
+      },
+      {
+        key: 'f',
+        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle favorite')
+      }
+    ]
+  }
+])
+</script>
+
 <template>
-  <modal
+  <modal v-model:show="showRef">
-    :show="show"
-    @update:show="$emit('update:show', $event)"
-  >
     <header class="header">
       <translate translate-context="*/*/*/Noun">
         Keyboard shortcuts
@@ -57,108 +158,3 @@
     </footer>
   </modal>
 </template>
-
-<script>
-
-import Modal from '~/components/semantic/Modal.vue'
-
-export default {
-  components: {
-    Modal
-  },
-  props: { show: { type: Boolean, required: true } },
-  computed: {
-    general () {
-      return [
-        {
-          title: this.$pgettext('Popup/Keyboard shortcuts/Title', 'General shortcuts'),
-          shortcuts: [
-            {
-              key: 'h',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Show available keyboard shortcuts')
-            },
-            {
-              key: 'shift + f',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Focus searchbar')
-            },
-            {
-              key: 'esc',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Unfocus searchbar')
-            }
-          ]
-        }
-      ]
-    },
-
-    player () {
-      return [
-        {
-          title: this.$pgettext('Popup/Keyboard shortcuts/Title', 'Audio player shortcuts'),
-          shortcuts: [
-            {
-              key: 'p',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Pause/play the current track')
-            },
-            {
-              key: 'left',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 5s')
-            },
-            {
-              key: 'right',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 5s')
-            },
-            {
-              key: 'shift + left',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 30s')
-            },
-            {
-              key: 'shift + right',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 30s')
-            },
-            {
-              key: 'ctrl + shift + left',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play previous track')
-            },
-            {
-              key: 'ctrl + shift + right',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play next track')
-            },
-            {
-              key: 'shift + up',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Increase volume')
-            },
-            {
-              key: 'shift + down',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Decrease volume')
-            },
-            {
-              key: 'm',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle mute')
-            },
-            {
-              key: 'e',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Expand queue/player view')
-            },
-            {
-              key: 'l',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle queue looping')
-            },
-            {
-              key: 's',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Shuffle queue')
-            },
-            {
-              key: 'q',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Clear queue')
-            },
-            {
-              key: 'f',
-              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle favorite')
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
-</script>

front/src/components/Sidebar.vue

@@ -161,8 +161,7 @@
         <modal
           ref="languageModal"
           :fullscreen="false"
-          :show="showLanguageModal"
+          v-model:show="showLanguageModal"
-          @update:show="showLanguageModal = $event"
         >
           <i
             role="button"
@@ -193,8 +192,7 @@
         <modal
           ref="themeModal"
           :fullscreen="false"
-          :show="showThemeModal"
+          v-model:show="showThemeModal"
-          @update:show="showThemeModal = $event"
         >
           <i
             role="button"

front/src/components/audio/podcast/Modal.vue

@@ -1,17 +1,14 @@
 <template>
   <modal
     ref="modal"
-    :show="show"
+    v-model:show="showRef"
     :scrolling="true"
     :additional-classes="['scrolling-track-options']"
-    @update:show="$emit('update:show', $event)"
   >
     <div class="header">
       <div class="ui large centered rounded image">
         <img
-          v-if="
+          v-if="track.album && track.album.cover && track.album.cover.urls.original"
-            track.album && track.album.cover && track.album.cover.urls.original
-          "
           v-lazy="
             $store.getters['instance/absoluteUrl'](
               track.album.cover.urls.medium_square_crop
@@ -229,6 +226,7 @@
 import Modal from '~/components/semantic/Modal.vue'
 import ReportMixin from '~/components/mixins/Report.vue'
 import PlayOptionsMixin from '~/components/mixins/PlayOptions.vue'
+import { useVModel } from '@vueuse/core'
 
 export default {
   components: {
@@ -242,6 +240,11 @@ export default {
     isArtist: { type: Boolean, required: false, default: false },
     isAlbum: { type: Boolean, required: false, default: false }
   },
+  setup (props) {
+    // TODO (wvffle): Add defineEmits when rewriting to <script setup>
+    const showRef = useVModel(props, 'show'/*, emit*/)
+    return { showRef }
+  },
   data () {
     return {
       isShowing: this.show,

front/src/components/audio/track/Modal.vue

@@ -1,10 +1,9 @@
 <template>
   <modal
     ref="modal"
-    :show="show"
+    v-model:show="showRef"
     :scrolling="true"
     :additional-classes="['scrolling-track-options']"
-    @update:show="$emit('update:show', $event)"
   >
     <div class="header">
       <div class="ui large centered rounded image">
@@ -229,6 +228,7 @@
 import Modal from '~/components/semantic/Modal.vue'
 import ReportMixin from '~/components/mixins/Report.vue'
 import PlayOptionsMixin from '~/components/mixins/PlayOptions.vue'
+import { useVModel } from '@vueuse/core/index'
 
 export default {
   components: {
@@ -242,6 +242,11 @@ export default {
     isArtist: { type: Boolean, required: false, default: false },
     isAlbum: { type: Boolean, required: false, default: false }
   },
+  setup (props) {
+    // TODO (wvffle): Add defineEmits when rewriting to <script setup>
+    const showRef = useVModel(props, 'show'/*, emit*/)
+    return { showRef }
+  },
   data () {
     return {
       isShowing: this.show,

front/src/components/channels/AlbumModal.vue

@@ -1,7 +1,7 @@
 <template>
   <modal
+    v-model:show="show"
     class="small"
-    :show.sync="show"
   >
     <h4 class="header">
       <translate

front/src/components/channels/UploadModal.vue

@@ -1,8 +1,7 @@
 <template>
   <modal
+    v-model:show="$store.state.channels.showUploadModal"
     class="small"
-    :show="$store.state.channels.showUploadModal"
-    @update:show="update"
   >
     <h4 class="header">
       <translate
@@ -145,7 +144,7 @@
 import Modal from '~/components/semantic/Modal.vue'
 import ChannelUploadForm from '~/components/channels/UploadForm.vue'
 import { humanSize } from '~/utils/filters'
-import {onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router'
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
 
 export default {
   components: {

front/src/components/common/DangerousButton.vue

@@ -7,8 +7,8 @@
     <slot />
 
     <modal
+      v-model:show="showModal"
       class="small"
-      :show.sync="showModal"
     >
       <h4 class="header">
         <slot name="modal-header">

front/src/components/common/LoginModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal :show.sync="show">
+  <modal v-model:show="show">
     <h4 class="header">
       {{ labels.header }}
     </h4>

front/src/components/common/UserModal.vue

@@ -1,10 +1,9 @@
 <template>
   <!-- TODO make generic and move to semantic/modal? -->
   <modal
-    :show="show"
+    v-model:show="showRef"
     :scrolling="true"
     :fullscreen="false"
-    @update:show="$emit('update:show', $event)"
   >
     <div
       v-if="$store.state.auth.authenticated"
@@ -208,6 +207,7 @@ import Modal from '~/components/semantic/Modal.vue'
 import { mapGetters } from 'vuex'
 import useThemeList from '~/composables/useThemeList'
 import useTheme from '~/composables/useTheme'
+import { useVModel } from '@vueuse/core/index'
 
 export default {
   components: {
@@ -216,8 +216,11 @@ export default {
   props: {
     show: { type: Boolean, required: true }
   },
-  setup () {
+  setup (props) {
+    // TODO (wvffle): Add defineEmits when rewriting to <script setup>
+    const showRef = useVModel(props, 'show'/*, emit*/)
     return {
+      showRef,
       theme: useTheme(),
       themes: useThemeList()
     }

front/src/components/federation/FetchButton.vue

@@ -7,8 +7,8 @@
       <slot />
     </div>
     <modal
+      v-model:show="showModal"
       class="small"
-      :show.sync="showModal"
     >
       <h3 class="header">
         <translate translate-context="Popup/*/Title">

front/src/components/library/AlbumDropdown.vue

@@ -3,7 +3,7 @@
 
     <modal
       v-if="isEmbedable"
-      :show.sync="showEmbedModal"
+      v-model:show="showEmbedModal"
     >
       <h4 class="header">
         <translate translate-context="Popup/Album/Title/Verb">Embed this album on your website</translate>

front/src/components/library/ArtistBase.vue

@@ -59,7 +59,7 @@
 
             <modal
               v-if="publicLibraries.length > 0"
-              :show.sync="showEmbedModal"
+              v-model:show="showEmbedModal"
             >
               <h4 class="header">
                 <translate translate-context="Popup/Artist/Title/Verb">

front/src/components/library/ImportStatusModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal :show.sync="showModal">
+  <modal v-model:show="showModal">
     <h4 class="header">
       <translate translate-context="Popup/Import/Title">
         Import detail

front/src/components/library/Podcasts.vue

@@ -152,8 +152,8 @@
       </div>
     </section>
     <modal
+      v-model:show="showSubscribeModal"
       class="tiny"
-      :show.sync="showSubscribeModal"
       :fullscreen="false"
     >
       <h2 class="header">

front/src/components/library/TrackBase.vue

@@ -57,7 +57,7 @@
               </a>
               <modal
                 v-if="isEmbedable"
-                :show.sync="showEmbedModal"
+                v-model:show="showEmbedModal"
               >
                 <h4 class="header">
                   <translate translate-context="Popup/Track/Title">

front/src/components/library/radios/Filter.vue

@@ -68,7 +68,7 @@
       </a>
       <modal
         v-if="checkResult"
-        :show.sync="showCandidadesModal"
+        v-model::show="showCandidadesModal"
       >
         <h4 class="header">
           <translate translate-context="Popup/Radio/Title/Noun">

front/src/components/manage/moderation/InstancePolicyModal.vue

@@ -10,7 +10,7 @@
       </translate>
     </slot>
     <modal
-      :show.sync="show"
+      v-model:show="show"
       @show="fetchData"
     >
       <h4 class="header">

front/src/components/moderation/FilterModal.vue

@@ -1,6 +1,6 @@
 <template>
   <modal
-    :show="$store.state.moderation.showFilterModal"
+    v-model:show="showRef"
     @update:show="update"
   >
     <h4 class="header">
@@ -90,7 +90,8 @@
 
 <script>
 import axios from 'axios'
-import { mapState } from 'vuex'
+import { mapState, useStore } from 'vuex'
+import { computed } from 'vue'
 
 import Modal from '~/components/semantic/Modal.vue'
 import useLogger from '~/composables/useLogger'
@@ -101,6 +102,11 @@ export default {
   components: {
     Modal
   },
+  setup () {
+    const store = useStore()
+    const showRef = computed(() => store.state.moderation.showFilterModal)
+    return { showRef }
+  },
   data () {
     return {
       formKey: String(new Date()),
@@ -117,7 +123,7 @@ export default {
   methods: {
     update (v) {
       this.$store.commit('moderation/showFilterModal', v)
-      this.errors = []
+      this.errors.length = 0
     },
     hide () {
       const self = this

front/src/components/moderation/ReportModal.vue

@@ -1,6 +1,6 @@
 <template>
   <modal
-    :show="$store.state.moderation.showReportModal"
+    v-model:show="showRef"
     @update:show="update"
   >
     <h2
@@ -155,7 +155,8 @@
 
 <script>
 import axios from 'axios'
-import { mapState } from 'vuex'
+import { mapState, useStore } from 'vuex'
+import { computed } from 'vue'
 import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
 import Modal from '~/components/semantic/Modal.vue'
 
@@ -170,6 +171,11 @@ export default {
     ReportCategoryDropdown,
     Modal
   },
+  setup () {
+    const store = useStore()
+    const showRef = computed(() => store.state.moderation.showReportModal)
+    return { showRef }
+  },
   data () {
     return {
       formKey: String(new Date()),

front/src/components/playlists/PlaylistModal.vue

@@ -1,7 +1,6 @@
 <template>
   <modal
-    :show="$store.state.playlists.showModal"
+    v-model:show="$store.state.playlists.showModal"
-    @update:show="update"
   >
     <h4 class="header">
       <template v-if="track">
@@ -138,7 +137,7 @@
               <td>
                 <router-link
                   :to="{name: 'library.playlists.detail', params: {id: playlist.id }}"
-                  @click.native="update(false)"
+                  @click.native="$store.state.playlists.showModal = false"
                 >
                   {{ playlist.name }}
                 </router-link>
@@ -256,9 +255,6 @@ export default {
     }
   },
   methods: {
-    update (v) {
-      this.$store.commit('playlists/showModal', v)
-    },
     addToPlaylist (playlistId, allowDuplicate) {
       const self = this
       const payload = {
@@ -270,7 +266,7 @@ export default {
 
       return axios.post(`playlists/${playlistId}/add`, payload).then(response => {
         logger.info('Successfully added track to playlist')
-        self.update(false)
+        self.$store.state.playlists.showModal = false
         self.$store.dispatch('playlists/fetchOwn')
       }, error => {
         if (error.backendErrors.length === 1 && error.backendErrors[0].code === 'tracks_already_exist_in_playlist') {

front/src/views/auth/ProfileOverview.vue

@@ -55,7 +55,7 @@
       </library-widget>
     </div>
 
-    <modal :show.sync="showCreateModal">
+    <modal v-model:show="showCreateModal">
       <h4 class="header">
         <translate
           v-if="step === 1"

front/src/views/channels/DetailBase.vue

@@ -89,8 +89,8 @@
                   <i class="feed icon" />
                 </a>
                 <modal
+                  v-model:show="showSubscribeModal"
                   class="tiny"
-                  :show.sync="showSubscribeModal"
                 >
                   <h4 class="header">
                     <translate translate-context="Popup/Channel/Title/Verb">
@@ -311,7 +311,7 @@
 
               <modal
                 v-if="totalTracks > 0"
-                :show.sync="showEmbedModal"
+                v-model:show="showEmbedModal"
               >
                 <h4 class="header">
                   <translate translate-context="Popup/Artist/Title/Verb">
@@ -336,7 +336,7 @@
               </modal>
               <modal
                 v-if="isOwner"
-                :show.sync="showEditModal"
+                v-model:show="showEditModal"
               >
                 <h4 class="header">
                   <translate

front/src/views/channels/SubscriptionsList.vue

@@ -15,7 +15,7 @@
       </h1>
       <modal
         class="tiny"
-        :show.sync="showSubscribeModal"
+        v-model:show="showSubscribeModal"
         :fullscreen="false"
       >
         <h2 class="header">

front/src/views/content/Home.vue

@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { humanSize } from '~/utils/filters'
+import { useGettext } from 'vue3-gettext'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+const { $pgettext } = useGettext()
+
+const labels = computed(() => ({
+  title: $pgettext('Content/Library/Title/Verb', 'Add and manage content')
+}))
+
+const store = useStore()
+const quota = computed(() => store.state.instance.settings.users.upload_quota.value)
+const defaultQuota = computed(() => humanSize(quota.value * 1e6))
+</script>
+
 <template>
   <section
     v-title="labels.title"
@@ -27,7 +44,7 @@
           </translate>
         </p>
         <router-link
-          :to="{name: 'profile.overview', params: {username: $store.state.auth.username}, hash: '#channels'}"
+          :to="{name: 'profile.overview', params: {username: store.state.auth.username}, hash: '#channels'}"
           class="ui primary button"
         >
           <translate translate-context="Content/Library/Button.Label/Verb">
@@ -80,24 +97,3 @@
     </div>
   </section>
 </template>
-
-<script>
-import { humanSize } from '~/utils/filters'
-
-export default {
-  computed: {
-    labels () {
-      return {
-        title: this.$pgettext('Content/Library/Title/Verb', 'Add and manage content')
-      }
-    },
-    defaultQuota () {
-      const quota =
-        this.$store.state.instance.settings.users.upload_quota.value *
-        1000 *
-        1000
-      return humanSize(quota)
-    }
-  }
-}
-</script>

front/src/views/playlists/Detail.vue

@@ -104,7 +104,7 @@
         </div>
         <modal
           v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
-          :show.sync="showEmbedModal"
+          v-model:show="showEmbedModal"
         >
           <h4 class="header">
             <translate translate-context="Popup/Album/Title/Verb">