From ece7c650f6bac3a8c024d71d34e5a61da3795d55 Mon Sep 17 00:00:00 2001
From: bivashy <botyrbojey@gmail.com>
Date: Tue, 12 Aug 2025 23:56:52 +0500
Subject: [PATCH] Initial implementation of "Next episode" button in player

---
 app/components/ui/player/Player.vue | 19 +++++++++++++++++++
 app/pages/watch.vue                 | 23 +++--------------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/app/components/ui/player/Player.vue b/app/components/ui/player/Player.vue
index b220fac..21c7e47 100644
--- a/app/components/ui/player/Player.vue
+++ b/app/components/ui/player/Player.vue
@@ -5,6 +5,7 @@ import Hls from "hls.js";
 interface Props {
     urls: any;
     id: string;
+    nextEpisodeButton: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -13,6 +14,23 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(['get-instance'])
 
 const options = computed(() => {
+    const controls = []
+    if (props.nextEpisodeButton) {
+        controls.push(
+            {
+                name: 'next-episode',
+                index: 50,
+                position: 'left',
+                html: '<button>Test</button>',
+                tooltip: 'Next episode',
+                style: {
+                    color: 'red',
+                },
+                click: function () {
+                },
+            },
+        )
+    }
     return {
         url: props.urls[0].url || '',
         type: 'm3u8',
@@ -30,6 +48,7 @@ const options = computed(() => {
         autoOrientation: true,
         autoPlayback: true,
         id: props.id,
+        controls: controls,
     }
 })
 const artplayerRef = ref();
diff --git a/app/pages/watch.vue b/app/pages/watch.vue
index e338908..f55ee74 100644
--- a/app/pages/watch.vue
+++ b/app/pages/watch.vue
@@ -8,7 +8,8 @@
             <p>Episode: {{ episode }}</p>
 
             <div v-if="hlsUrls">
-                <Player :id="mediaId.toString().concat(episode?.toString() || '')" :urls="hlsUrls" />
+                <Player :id="mediaId.toString().concat(episode?.toString() || '')" :urls="hlsUrls" :episode="episode"
+                    :nextEpisodeButton="true" />
             </div>
 
             <!-- Loading and Error States -->
@@ -24,7 +25,7 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 import { Player } from '~/components/ui/player'
-import { video, type KodikTranslationDTO, type KodikVideoLinks, type VideoParams } from '~/openapi/extractor'
+import { video, type KodikVideoLinks } from '~/openapi/extractor'
 
 const route = useRoute()
 const mediaType = route.query.mediaType
@@ -35,20 +36,8 @@ const episode = route.query.episode
 const results = ref<KodikVideoLinks | null>(null)
 const isLoading = ref(false)
 const error = ref<unknown>(null)
-const hlsUrl = ref<string | null>(null)
 const hlsUrls = ref<any>(null)
 
-const playerOptions = ref({
-    autoplay: false,
-    controls: true,
-    responsive: true,
-    fluid: true,
-    sources: [{
-        src: hlsUrl.value,
-        type: 'application/x-mpegURL'
-    }]
-})
-
 watchEffect(async () => {
     if (!mediaType || !mediaId || !mediaHash || !episode) return
 
@@ -56,12 +45,6 @@ watchEffect(async () => {
         isLoading.value = true
         error.value = null
 
-        const translationDto: KodikTranslationDTO = {
-            mediaType: mediaType as string,
-            mediaId: mediaId as string,
-            mediaHash: mediaHash as string,
-        }
-
         const videoParams: any = {
             mediaType: mediaType as string,
             mediaId: mediaId as string,