diff --git a/front/src/components/common/Duration.vue b/front/src/components/common/Duration.vue
index 5983bae3e..b2c66b425 100644
--- a/front/src/components/common/Duration.vue
+++ b/front/src/components/common/Duration.vue
@@ -6,10 +6,13 @@ interface Props {
   seconds?: number
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  seconds: 0
+})
+
 const duration = computed(() => {
-  const { minutes, hours } = moment.duration(props.seconds, 'seconds')
-  return { minutes: minutes(), hours: hours() }
+  const momentDuration = moment.duration(props.seconds, 'seconds')
+  return { minutes: momentDuration.minutes(), hours: momentDuration.hours() }
 })
 </script>
 
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index ecd8f1edc..c59cecbfb 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -6,7 +6,7 @@ import TrackTable from '~/components/audio/track/Table.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import PlaylistEditor from '~/components/playlists/Editor.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
-import Modal from '~/components/semantic/Modal.vue'
+import SemanticModal from '~/components/semantic/Modal.vue'
 import { ref, computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouter } from 'vue-router'
@@ -178,7 +178,7 @@ const deletePlaylist = async () => {
             </dangerous-button>
           </div>
         </div>
-        <modal
+        <semantic-modal
           v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
           v-model:show="showEmbedModal"
         >
@@ -202,7 +202,7 @@ const deletePlaylist = async () => {
               </translate>
             </button>
           </div>
-        </modal>
+        </semantic-modal>
       </div>
     </section>
     <section class="ui vertical stripe segment">