From 7682a45e4f9c2c7f6c54f5d9dbcdf46179de5f97 Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Tue, 16 Apr 2024 08:57:45 +0200
Subject: [PATCH] refractor code, don't override unsaved playlist

---
 components/MediaBrowser.vue  | 103 +++++++++++
 components/PlaylistTable.vue | 241 ++++++++++++++++++++++++++
 lang/de-DE.js                |   1 +
 lang/en-US.js                |   1 +
 pages/player.vue             | 323 ++---------------------------------
 stores/playlist.ts           |  38 ++++-
 6 files changed, 392 insertions(+), 315 deletions(-)
 create mode 100644 components/MediaBrowser.vue
 create mode 100644 components/PlaylistTable.vue

diff --git a/components/MediaBrowser.vue b/components/MediaBrowser.vue
new file mode 100644
index 00000000..0cb8581c
--- /dev/null
+++ b/components/MediaBrowser.vue
@@ -0,0 +1,103 @@
+<template>
+    <div v-if="mediaStore.isLoading" class="h-full w-full absolute z-10 flex justify-center bg-base-100/70">
+        <span class="loading loading-spinner loading-lg" />
+    </div>
+    <div class="bg-base-100 border-b border-my-gray">
+        <div v-if="mediaStore.folderTree.parent && mediaStore.crumbs">
+            <nav class="breadcrumbs px-3">
+                <ul>
+                    <li v-for="(crumb, index) in mediaStore.crumbs" :key="index">
+                        <button
+                            v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
+                            @click="mediaStore.getTree(crumb.path)"
+                        >
+                            <i class="bi-folder-fill me-1" />
+                            {{ crumb.text }}
+                        </button>
+                        <span v-else><i class="bi-folder-fill me-1" />{{ crumb.text }}</span>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+
+    <div class="w-full h-[calc(100%-48px)] overflow-auto m-1">
+        <div class="flex px-1" v-for="folder in mediaStore.folderTree.folders" :key="folder.uid">
+            <button class="truncate" @click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)">
+                <i class="bi-folder-fill" />
+                {{ folder.name }}
+            </button>
+        </div>
+        <Sortable
+            :list="mediaStore.folderTree.files"
+            :options="browserSortOptions"
+            item-key="name"
+            tag="table"
+            class="w-full table table-fixed"
+        >
+            <template #item="{ element, index }">
+                <tr
+                    :id="`file-${index}`"
+                    class="w-full"
+                    :class="{ 'grabbing cursor-grab': width > 768 }"
+                    :key="element.name"
+                >
+                    <td class="ps-1 py-1 w-[20px]">
+                        <i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
+                        <i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
+                        <i v-else-if="mediaType(element.name) === 'image'" class="bi-file-earmark-image" />
+                        <i v-else class="bi-file-binary" />
+                    </td>
+                    <td class="px-[1px] py-1 truncate">
+                        {{ element.name }}
+                    </td>
+                    <td class="px-1 py-1 w-[30px] text-center leading-3">
+                        <button @click="preview(element.name)">
+                            <i class="bi-play-fill" />
+                        </button>
+                    </td>
+                    <td class="px-0 py-1 w-[65px] text-nowrap">
+                        {{ secToHMS(element.duration) }}
+                    </td>
+                    <td class="py-1 hidden">00:00:00</td>
+                    <td class="py-1 hidden">{{ secToHMS(element.duration) }}</td>
+                    <td class="py-1 hidden">&nbsp;</td>
+                    <td class="py-1 hidden">&nbsp;</td>
+                    <td class="py-1 hidden">&nbsp;</td>
+                </tr>
+            </template>
+        </Sortable>
+    </div>
+</template>
+<script setup lang="ts">
+const { width } = useWindowSize({ initialWidth: 800 })
+const { secToHMS, mediaType } = stringFormatter()
+
+const mediaStore = useMedia()
+const { configID } = storeToRefs(useConfig())
+
+const browserSortOptions = {
+    group: { name: 'playlist', pull: 'clone', put: false },
+    handle: '.grabbing',
+    sort: false,
+}
+
+defineProps({
+    preview: {
+        type: Function,
+        default() {
+            return ''
+        },
+    },
+})
+
+onMounted(() => {
+    if (!mediaStore.folderTree.parent) {
+        mediaStore.getTree('')
+    }
+})
+
+watch([configID], () => {
+    mediaStore.getTree('')
+})
+</script>
diff --git a/components/PlaylistTable.vue b/components/PlaylistTable.vue
new file mode 100644
index 00000000..056ca780
--- /dev/null
+++ b/components/PlaylistTable.vue
@@ -0,0 +1,241 @@
+<template>
+    <div id="playlist-container" class="relative w-full h-full !bg-base-300 rounded-e overflow-auto">
+        <div v-if="playlistStore.isLoading" class="w-full h-full absolute z-10 flex justify-center bg-base-100/70">
+            <span class="loading loading-spinner loading-lg" />
+        </div>
+        <table class="table table-zebra table-fixed">
+            <thead class="top-0 sticky z-10">
+                <tr class="bg-base-100 rounded-tr-lg">
+                    <th class="w-[85px] p-0 text-left">
+                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                            {{ $t('player.start') }}
+                        </div>
+                    </th>
+                    <th class="w-auto p-0 text-left">
+                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                            {{ $t('player.file') }}
+                        </div>
+                    </th>
+                    <th class="w-[90px] p-0 text-center">
+                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                            {{ $t('player.play') }}
+                        </div>
+                    </th>
+                    <th class="w-[85px] p-0 text-center">
+                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                            {{ $t('player.duration') }}
+                        </div>
+                    </th>
+                    <th class="w-[85px] p-0 text-center hidden xl:table-cell">
+                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                            {{ $t('player.in') }}
+                        </div>
+                    </th>
+                    <th class="w-[85px] p-0 text-center hidden xl:table-cell">
+                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                            {{ $t('player.out') }}
+                        </div>
+                    </th>
+                    <th class="w-[85px] p-0 text-center hidden xl:table-cell justify-center">
+                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                            {{ $t('player.ad') }}
+                        </div>
+                    </th>
+                    <th class="w-[95px] p-0 text-center">
+                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                            {{ $t('player.edit') }}
+                        </div>
+                    </th>
+                    <th class="w-[85px] p-0 text-center hidden xl:table-cell justify-center">
+                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                            {{ $t('player.delete') }}
+                        </div>
+                    </th>
+                </tr>
+            </thead>
+            <Sortable
+                :list="playlistStore.playlist"
+                item-key="uid"
+                tag="tbody"
+                :options="playlistSortOptions"
+                @add="addClip"
+                @start="addBG"
+                @end="moveItemInArray"
+            >
+                <template #item="{ element, index }">
+                    <tr
+                        :id="`clip-${index}`"
+                        class="draggable border-t border-b border-base-content/20 duration-1000 transition-all"
+                        :class="{
+                            '!bg-lime-500/30':
+                                playlistStore.playoutIsRunning &&
+                                listDate === todayDate &&
+                                index === playlistStore.currentClipIndex,
+                        }"
+                        :key="element.uid"
+                    >
+                        <td class="ps-4 py-2 text-left">{{ secondsToTime(element.begin) }}</td>
+                        <td class="py-2 text-left truncate" :class="{ 'grabbing cursor-grab': width > 768 }">
+                            {{ filename(element.source) }}
+                        </td>
+                        <td class="py-2 text-center hover:text-base-content/70">
+                            <button @click="preview(element.source)">
+                                <i class="bi-play-fill" />
+                            </button>
+                        </td>
+                        <td class="py-2 text-center">{{ secToHMS(element.duration) }}</td>
+                        <td class="py-2 text-center hidden xl:table-cell">
+                            {{ secToHMS(element.in) }}
+                        </td>
+                        <td class="py-2 text-center hidden xl:table-cell">
+                            {{ secToHMS(element.out) }}
+                        </td>
+                        <td class="py-2 text-center hidden xl:table-cell leading-3">
+                            <input
+                                class="checkbox checkbox-xs rounded"
+                                type="checkbox"
+                                :checked="element.category && element.category === 'advertisement' ? true : false"
+                                @change="setCategory($event, element)"
+                            />
+                        </td>
+                        <td class="py-2 text-center hover:text-base-content/70">
+                            <button @click="editItem(index)">
+                                <i class="bi-pencil-square" />
+                            </button>
+                        </td>
+                        <td class="py-2 text-center hidden xl:table-cell justify-center hover:text-base-content/70">
+                            <button @click="deletePlaylistItem(index)">
+                                <i class="bi-x-circle-fill" />
+                            </button>
+                        </td>
+                    </tr>
+                </template>
+            </Sortable>
+        </table>
+    </div>
+</template>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+
+const { $dayjs } = useNuxtApp()
+const { width } = useWindowSize({ initialWidth: 800 })
+
+const configStore = useConfig()
+const mediaStore = useMedia()
+const playlistStore = usePlaylist()
+const { secToHMS, filename, secondsToTime } = stringFormatter()
+const { processPlaylist, genUID } = playlistOperations()
+
+const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
+const { listDate } = storeToRefs(usePlaylist())
+
+const playlistSortOptions = {
+    group: 'playlist',
+    animation: 100,
+    handle: '.grabbing',
+}
+
+const props = defineProps({
+    getPlaylist: {
+        type: Function,
+        default() {
+            return ''
+        },
+    },
+    editItem: {
+        type: Function,
+        default() {
+            return ''
+        },
+    },
+    preview: {
+        type: Function,
+        default() {
+            return ''
+        },
+    },
+})
+
+onMounted(() => {
+    props.getPlaylist()
+})
+
+watch([listDate], async () => {
+    await props.getPlaylist()
+})
+
+function setCategory(event: any, item: PlaylistItem) {
+    if (event.target.checked) {
+        item.category = 'advertisement'
+    } else {
+        item.category = ''
+    }
+}
+
+function addBG(obj: any) {
+    if (obj.item) {
+        obj.item.classList.add('!bg-fuchsia-900/30')
+    } else {
+        obj.classList.add('!bg-fuchsia-900/30')
+    }
+}
+
+function removeBG(item: any) {
+    setTimeout(() => {
+        item.classList.remove('!bg-fuchsia-900/30')
+    }, 100)
+}
+
+function addClip(event: any) {
+    const o = event.oldIndex
+    const n = event.newIndex
+    const uid = genUID()
+
+    event.item.remove()
+
+    const storagePath = configStore.configPlayout.storage.path
+    const sourcePath = `${storagePath}/${mediaStore.folderTree.source}/${mediaStore.folderTree.files[o].name}`.replace(
+        /\/[/]+/g,
+        '/'
+    )
+
+    playlistStore.playlist.splice(n, 0, {
+        uid,
+        begin: 0,
+        source: sourcePath,
+        in: 0,
+        out: mediaStore.folderTree.files[o].duration,
+        duration: mediaStore.folderTree.files[o].duration,
+    })
+
+    playlistStore.playlist = processPlaylist(
+        configStore.startInSec,
+        configStore.playlistLength,
+        playlistStore.playlist,
+        false
+    )
+
+    nextTick(() => {
+        const newNode = document.getElementById(`clip-${n}`)
+        addBG(newNode)
+        removeBG(newNode)
+    })
+}
+
+function moveItemInArray(event: any) {
+    playlistStore.playlist.splice(event.newIndex, 0, playlistStore.playlist.splice(event.oldIndex, 1)[0])
+
+    playlistStore.playlist = processPlaylist(
+        configStore.startInSec,
+        configStore.playlistLength,
+        playlistStore.playlist,
+        false
+    )
+
+    removeBG(event.item)
+}
+
+function deletePlaylistItem(index: number) {
+    playlistStore.playlist.splice(index, 1)
+}
+</script>
diff --git a/lang/de-DE.js b/lang/de-DE.js
index db5f45ff..c902c109 100644
--- a/lang/de-DE.js
+++ b/lang/de-DE.js
@@ -65,6 +65,7 @@ export default {
         reset: 'Wiedergabeliste zurücksetzen',
         save: 'Wiedergabeliste speichern',
         deletePlaylist: 'Wiedergabeliste löschen',
+        unsavedProgram: 'Es existiert Programm das nicht gespeichert ist!',
     },
     media: {
         notExists: 'Speicher existiert nicht!',
diff --git a/lang/en-US.js b/lang/en-US.js
index 07dec01c..cb5e3dd3 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -65,6 +65,7 @@ export default {
         reset: 'Reset Playlist',
         save: 'Save Playlist',
         deletePlaylist: 'Delete Playlist',
+        unsavedProgram: 'There is a program that is not saved!',
     },
     media: {
         notExists: 'Storage not exist!',
diff --git a/pages/player.vue b/pages/player.vue
index 0f0d793d..1d7a32ba 100644
--- a/pages/player.vue
+++ b/pages/player.vue
@@ -27,212 +27,14 @@
                     max-size="80"
                     size="20"
                 >
-                    <div
-                        v-if="mediaStore.isLoading"
-                        class="h-full w-full absolute z-10 flex justify-center bg-base-100/70"
-                    >
-                        <span class="loading loading-spinner loading-lg" />
-                    </div>
-                    <div class="bg-base-100 border-b border-my-gray">
-                        <div v-if="mediaStore.folderTree.parent && mediaStore.crumbs">
-                            <nav class="breadcrumbs px-3">
-                                <ul>
-                                    <li v-for="(crumb, index) in mediaStore.crumbs" :key="index">
-                                        <button
-                                            v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
-                                            @click="mediaStore.getTree(crumb.path)"
-                                        >
-                                            <i class="bi-folder-fill me-1" />
-                                            {{ crumb.text }}
-                                        </button>
-                                        <span v-else><i class="bi-folder-fill me-1" />{{ crumb.text }}</span>
-                                    </li>
-                                </ul>
-                            </nav>
-                        </div>
-                    </div>
-
-                    <div class="w-full h-[calc(100%-48px)] overflow-auto m-1">
-                        <div class="flex px-1" v-for="folder in mediaStore.folderTree.folders" :key="folder.uid">
-                            <button
-                                class="truncate"
-                                @click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)"
-                            >
-                                <i class="bi-folder-fill" />
-                                {{ folder.name }}
-                            </button>
-                        </div>
-                        <Sortable
-                            :list="mediaStore.folderTree.files"
-                            :options="browserSortOptions"
-                            item-key="name"
-                            tag="table"
-                            class="w-full table table-fixed"
-                        >
-                            <template #item="{ element, index }">
-                                <tr
-                                    :id="`file-${index}`"
-                                    class="w-full"
-                                    :class="{ 'grabbing cursor-grab': width > 768 }"
-                                    :key="element.name"
-                                >
-                                    <td class="ps-1 py-1 w-[20px]">
-                                        <i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
-                                        <i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
-                                        <i
-                                            v-else-if="mediaType(element.name) === 'image'"
-                                            class="bi-file-earmark-image"
-                                        />
-                                        <i v-else class="bi-file-binary" />
-                                    </td>
-                                    <td class="px-[1px] py-1 truncate">
-                                        {{ element.name }}
-                                    </td>
-                                    <td class="px-1 py-1 w-[30px] text-center leading-3">
-                                        <button @click=";(showPreviewModal = true), setPreviewData(element.name)">
-                                            <i class="bi-play-fill" />
-                                        </button>
-                                    </td>
-                                    <td class="px-0 py-1 w-[65px] text-nowrap">
-                                        {{ secToHMS(element.duration) }}
-                                    </td>
-                                    <td class="py-1 hidden">00:00:00</td>
-                                    <td class="py-1 hidden">{{ secToHMS(element.duration) }}</td>
-                                    <td class="py-1 hidden">&nbsp;</td>
-                                    <td class="py-1 hidden">&nbsp;</td>
-                                    <td class="py-1 hidden">&nbsp;</td>
-                                </tr>
-                            </template>
-                        </Sortable>
-                    </div>
+                    <MediaBrowser :preview="setPreviewData" />
                 </pane>
                 <pane>
-                    <div id="playlist-container" class="relative w-full h-full !bg-base-300 rounded-e overflow-auto">
-                        <div
-                            v-if="playlistStore.isLoading"
-                            class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
-                        >
-                            <span class="loading loading-spinner loading-lg" />
-                        </div>
-                        <table class="table table-zebra table-fixed">
-                            <thead class="top-0 sticky z-10">
-                                <tr class="bg-base-100 rounded-tr-lg">
-                                    <th class="w-[85px] p-0 text-left">
-                                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
-                                            {{ $t('player.start') }}
-                                        </div>
-                                    </th>
-                                    <th class="w-auto p-0 text-left">
-                                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
-                                            {{ $t('player.file') }}
-                                        </div>
-                                    </th>
-                                    <th class="w-[90px] p-0 text-center">
-                                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
-                                            {{ $t('player.play') }}
-                                        </div>
-                                    </th>
-                                    <th class="w-[85px] p-0 text-center">
-                                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
-                                            {{ $t('player.duration') }}
-                                        </div>
-                                    </th>
-                                    <th class="w-[85px] p-0 text-center hidden xl:table-cell">
-                                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
-                                            {{ $t('player.in') }}
-                                        </div>
-                                    </th>
-                                    <th class="w-[85px] p-0 text-center hidden xl:table-cell">
-                                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
-                                            {{ $t('player.out') }}
-                                        </div>
-                                    </th>
-                                    <th class="w-[85px] p-0 text-center hidden xl:table-cell justify-center">
-                                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
-                                            {{ $t('player.ad') }}
-                                        </div>
-                                    </th>
-                                    <th class="w-[95px] p-0 text-center">
-                                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
-                                            {{ $t('player.edit') }}
-                                        </div>
-                                    </th>
-                                    <th class="w-[85px] p-0 text-center hidden xl:table-cell justify-center">
-                                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
-                                            {{ $t('player.delete') }}
-                                        </div>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <Sortable
-                                :list="playlistStore.playlist"
-                                item-key="uid"
-                                tag="tbody"
-                                :options="playlistSortOptions"
-                                @add="addClip"
-                                @start="addBG"
-                                @end="moveItemInArray"
-                            >
-                                <template #item="{ element, index }">
-                                    <tr
-                                        :id="`clip-${index}`"
-                                        class="draggable border-t border-b border-base-content/20 duration-1000 transition-all"
-                                        :class="{
-                                            '!bg-lime-500/30':
-                                                playlistStore.playoutIsRunning &&
-                                                listDate === todayDate &&
-                                                index === playlistStore.currentClipIndex,
-                                        }"
-                                        :key="element.uid"
-                                    >
-                                        <td class="ps-4 py-2 text-left">{{ secondsToTime(element.begin) }}</td>
-                                        <td
-                                            class="py-2 text-left truncate"
-                                            :class="{ 'grabbing cursor-grab': width > 768 }"
-                                        >
-                                            {{ filename(element.source) }}
-                                        </td>
-                                        <td class="py-2 text-center hover:text-base-content/70">
-                                            <button @click=";(showPreviewModal = true), setPreviewData(element.source)">
-                                                <i class="bi-play-fill" />
-                                            </button>
-                                        </td>
-                                        <td class="py-2 text-center">{{ secToHMS(element.duration) }}</td>
-                                        <td class="py-2 text-center hidden xl:table-cell">
-                                            {{ secToHMS(element.in) }}
-                                        </td>
-                                        <td class="py-2 text-center hidden xl:table-cell">
-                                            {{ secToHMS(element.out) }}
-                                        </td>
-                                        <td class="py-2 text-center hidden xl:table-cell leading-3">
-                                            <input
-                                                class="checkbox checkbox-xs rounded"
-                                                type="checkbox"
-                                                :checked="
-                                                    element.category && element.category === 'advertisement'
-                                                        ? true
-                                                        : false
-                                                "
-                                                @change="setCategory($event, element)"
-                                            />
-                                        </td>
-                                        <td class="py-2 text-center hover:text-base-content/70">
-                                            <button @click=";(showSourceModal = true), editPlaylistItem(index)">
-                                                <i class="bi-pencil-square" />
-                                            </button>
-                                        </td>
-                                        <td
-                                            class="py-2 text-center hidden xl:table-cell justify-center hover:text-base-content/70"
-                                        >
-                                            <button @click="deletePlaylistItem(index)">
-                                                <i class="bi-x-circle-fill" />
-                                            </button>
-                                        </td>
-                                    </tr>
-                                </template>
-                            </Sortable>
-                        </table>
-                    </div>
+                    <PlaylistTable
+                        :get-playlist="getPlaylist"
+                        :edit-item="editPlaylistItem"
+                        :preview="setPreviewData"
+                    />
                 </pane>
             </splitpanes>
         </div>
@@ -270,7 +72,7 @@
             >
                 <i class="bi-sort-down-alt" />
             </button>
-            <button class="btn btn-sm btn-primary join-item" :title="$t('player.reset')" @click="getPlaylist()">
+            <button class="btn btn-sm btn-primary join-item" :title="$t('player.reset')" @click=";(playlistStore.playlist.length = 0), getPlaylist()">
                 <i class="bi-arrow-counterclockwise" />
             </button>
             <button
@@ -388,7 +190,7 @@ const colorMode = useColorMode()
 const { locale } = useI18n()
 const { $_, $dayjs } = useNuxtApp()
 const { width } = useWindowSize({ initialWidth: 800 })
-const { secToHMS, filename, secondsToTime, toMin, mediaType } = stringFormatter()
+const { mediaType } = stringFormatter()
 const { processPlaylist, genUID } = playlistOperations()
 const contentType = { 'content-type': 'application/json;charset=UTF-8' }
 
@@ -402,7 +204,6 @@ useHead({
     title: 'Player | ffplayout',
 })
 
-const { configID } = storeToRefs(useConfig())
 const { listDate } = storeToRefs(usePlaylist())
 
 const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
@@ -422,17 +223,6 @@ const previewUrl = ref('')
 const previewOpt = ref()
 const isVideo = ref(false)
 
-const browserSortOptions = {
-    group: { name: 'playlist', pull: 'clone', put: false },
-    handle: '.grabbing',
-    sort: false,
-}
-const playlistSortOptions = {
-    group: 'playlist',
-    animation: 100,
-    handle: '.grabbing',
-}
-
 const newSource = ref({
     begin: 0,
     in: 0,
@@ -445,22 +235,6 @@ const newSource = ref({
     uid: '',
 } as PlaylistItem)
 
-onMounted(() => {
-    if (!mediaStore.folderTree.parent) {
-        mediaStore.getTree('')
-    }
-
-    getPlaylist()
-})
-
-watch([configID], () => {
-    mediaStore.getTree('')
-})
-
-watch([listDate], async () => {
-    await getPlaylist()
-})
-
 function scrollTo(index: number) {
     const child = document.getElementById(`clip-${index}`)
     const parent = document.getElementById('playlist-container')
@@ -496,77 +270,6 @@ function closePlayer() {
     isVideo.value = false
 }
 
-function setCategory(event: any, item: PlaylistItem) {
-    if (event.target.checked) {
-        item.category = 'advertisement'
-    } else {
-        item.category = ''
-    }
-}
-
-function addBG(obj: any) {
-    if (obj.item) {
-        obj.item.classList.add('!bg-fuchsia-900/30')
-    } else {
-        obj.classList.add('!bg-fuchsia-900/30')
-    }
-}
-
-function removeBG(item: any) {
-    setTimeout(() => {
-        item.classList.remove('!bg-fuchsia-900/30')
-    }, 100)
-}
-
-function addClip(event: any) {
-    const o = event.oldIndex
-    const n = event.newIndex
-    const uid = genUID()
-
-    event.item.remove()
-
-    const storagePath = configStore.configPlayout.storage.path
-    const sourcePath = `${storagePath}/${mediaStore.folderTree.source}/${mediaStore.folderTree.files[o].name}`.replace(
-        /\/[/]+/g,
-        '/'
-    )
-
-    playlistStore.playlist.splice(n, 0, {
-        uid,
-        begin: 0,
-        source: sourcePath,
-        in: 0,
-        out: mediaStore.folderTree.files[o].duration,
-        duration: mediaStore.folderTree.files[o].duration,
-    })
-
-    playlistStore.playlist = processPlaylist(
-        configStore.startInSec,
-        configStore.playlistLength,
-        playlistStore.playlist,
-        false
-    )
-
-    nextTick(() => {
-        const newNode = document.getElementById(`clip-${n}`)
-        addBG(newNode)
-        removeBG(newNode)
-    })
-}
-
-function moveItemInArray(event: any) {
-    playlistStore.playlist.splice(event.newIndex, 0, playlistStore.playlist.splice(event.oldIndex, 1)[0])
-
-    playlistStore.playlist = processPlaylist(
-        configStore.startInSec,
-        configStore.playlistLength,
-        playlistStore.playlist,
-        false
-    )
-
-    removeBG(event.item)
-}
-
 function setPreviewData(path: string) {
     let fullPath = path
     const storagePath = configStore.configPlayout.storage.path
@@ -582,6 +285,7 @@ function setPreviewData(path: string) {
     }
 
     previewName.value = fullPath.split('/').slice(-1)[0]
+    showPreviewModal.value = true
 
     if (path.match(/^http/)) {
         previewUrl.value = path
@@ -659,6 +363,7 @@ function processSource(process: boolean) {
 
 function editPlaylistItem(i: number) {
     editId.value = i
+    showSourceModal.value = true
 
     newSource.value = {
         begin: playlistStore.playlist[i].begin,
@@ -681,10 +386,6 @@ function isAd(evt: any) {
     }
 }
 
-function deletePlaylistItem(index: number) {
-    playlistStore.playlist.splice(index, 1)
-}
-
 function loopClips() {
     const tempList = []
     let length = 0
@@ -737,7 +438,7 @@ async function importPlaylist(imp: boolean) {
             }
         )
             .then((response) => {
-                indexStore.msgAlert('success', response, 2)
+                indexStore.msgAlert('success', String(response), 2)
                 playlistStore.getPlaylist(listDate.value)
             })
             .catch((e: string) => {
@@ -819,7 +520,7 @@ async function deletePlaylist(del: boolean) {
     padding-bottom: 0.5rem;
 }
 
-#playlist-container .sortable-ghost td:nth-last-child(-n+5) {
+#playlist-container .sortable-ghost td:nth-last-child(-n + 5) {
     display: table-cell !important;
 }
 </style>
diff --git a/stores/playlist.ts b/stores/playlist.ts
index 4e70022b..017e65f5 100644
--- a/stores/playlist.ts
+++ b/stores/playlist.ts
@@ -30,8 +30,12 @@ export const usePlaylist = defineStore('playlist', {
     getters: {},
     actions: {
         async getPlaylist(date: string) {
+            const { $_, $i18n } = useNuxtApp()
             const authStore = useAuth()
             const configStore = useConfig()
+            const indexStore = useIndex()
+            let statusCode = 0
+
             const timeInSec = timeToSeconds(dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss'))
             const channel = configStore.configGui[configStore.configID].id
             let dateToday = dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')
@@ -44,14 +48,40 @@ export const usePlaylist = defineStore('playlist', {
                 method: 'GET',
                 headers: authStore.authHeader,
             })
-                .then((response) => response.json())
+                .then((response) => {
+                    statusCode = response.status
+
+                    return response.json()
+                })
                 .then((data) => {
                     if (data.program) {
-                        this.playlist = processPlaylist(configStore.startInSec, configStore.playlistLength, data.program, false)
+                        const programData = processPlaylist(
+                            configStore.startInSec,
+                            configStore.playlistLength,
+                            data.program,
+                            false
+                        )
+
+                        if (
+                            this.playlist.length > 0 &&
+                            $_.differenceWith(this.playlist, programData, (a, b) => {
+                                return $_.isEqual($_.omit(a, ['uid']), $_.omit(b, ['uid']))
+                            }).length > 0
+                        ) {
+                            indexStore.msgAlert('warning', $i18n.t('player.unsavedProgram'), 3)
+                        } else if (this.playlist.length === 0) {
+                            this.playlist = programData
+                        }
                     }
                 })
-                .catch(() => {
-                    this.playlist = []
+                .catch((e) => {
+                    if (statusCode > 0 && statusCode !== 204) {
+                        indexStore.msgAlert('error', e, 3)
+                    }
+
+                    if (this.playlist.length > 0) {
+                        indexStore.msgAlert('warning', $i18n.t('player.unsavedProgram'), 3)
+                    }
                 })
         },