Init

resources/js/playlist.js

@@ -0,0 +1,120 @@
+export function playNextPlaylistVideo() {
+    console.log('Playing next episode');
+    if (!document.getElementById("playlist_id")) {
+        console.log('No playlist specified');
+        return;
+    }
+
+    var playlistId = document.getElementById("playlist_id").value;
+    var nextEpisode = document.getElementById("playlist_next_episode_slug").value;
+
+    if (nextEpisode === ""){
+        return;
+    }
+
+    window.location.href = '/hentai/' + nextEpisode + '?playlist=' + playlistId;
+}
+
+function deleteEntry(playlistId, episodeId) {
+    window.axios.post('/user/playlist-episode', {
+        playlist: playlistId,
+        episode: episodeId
+    }).then(function (response) {
+        if (response.status == 200) {
+            console.log(response);
+            if (response.data.message == 'success') {
+                Swal.fire({
+                    title: "Deleted!",
+                    text: "Removed entry from playlist!",
+                    icon: "success",
+                    confirmButtonText: "OK",
+                    willClose: () => {
+                        location.reload();
+                    }
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                      location.reload();
+                    }
+                  });
+            }
+        }
+    }).catch(function (error) {
+        Swal.fire({
+            title: "Error!",
+            text: error,
+            icon: "error"
+        });
+        console.log(error);
+    });
+}
+
+function addDesktopDeleteListener() {
+    const deleteButtons = document.querySelectorAll('[id^="delD"]');
+
+    deleteButtons.forEach(button => {
+        const playlist = button.id.split('-')[1];
+        const episode = button.id.split('-')[2];
+        console.log("Playlist: " + playlist + " Episode:  " + episode);
+
+        button.addEventListener('click', () => deleteEntry(playlist, episode));
+    });
+}
+
+// Playlist Swipe (Delete)
+document.addEventListener('DOMContentLoaded', () => {
+    const swipeContainers = document.querySelectorAll('.swipe-container');
+
+    var swipeOptions = {
+        dragLockToAxis: true,
+        dragBlockHorizontal: true
+    };
+
+    swipeContainers.forEach(container => {
+        const controls = new Hammer(container, swipeOptions);
+        const originalColor = container.style.backgroundColor;
+        const playlistId = container.id.split('-')[0];
+        const episodeId = container.id.split('-')[1];
+        const delIcon = document.getElementById('del-' + container.id);
+
+        // Set the initial position
+        let posX = 0;
+
+        // Listen for the pan gesture
+        controls.on('pan', (event) => {
+            // Update the X position based on the drag delta
+            posX = event.deltaX;
+            if (posX > 0) {
+                // Only allow left swipe
+                posX = 0;
+            }
+
+            // Apply the translation to the element
+            container.style.transform = `translateX(${posX}px)`;
+            container.style.backgroundColor  = "rgba(159, 18, 18, 0.3)";
+
+            setTimeout(() => {
+                delIcon.classList.remove('fa-grip-lines-vertical');
+                delIcon.classList.add('fa-trash');
+            }, 300);
+        });
+
+        controls.on('panend', () => {
+            container.style.transition = 'transform 0.3s ease';
+            container.style.transform = 'translateX(0)';
+            setTimeout(() => {
+                container.style.transition = ''; // Reset transition for next drag
+                container.style.backgroundColor = originalColor;
+                delIcon.classList.remove('fa-trash');
+                delIcon.classList.add('fa-grip-lines-vertical');
+            }, 300);
+        });
+
+        controls.on('swipeleft', (event) => {
+            container.style.display = 'none';
+            console.log(playlistId, episodeId);
+            deleteEntry(playlistId, episodeId);
+        });
+    });
+
+    addDesktopDeleteListener();
+});