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 1/8] 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,
-- 
2.49.0


From 52db5633c86e4928ec696b13736f60e19898bdb5 Mon Sep 17 00:00:00 2001
From: bivashy <botyrbojey@gmail.com>
Date: Mon, 18 Aug 2025 00:25:20 +0500
Subject: [PATCH 2/8] Add "ChangeEpisodeButton" and hook as player control

---
 app/components/ui/button/index.ts             |  1 +
 .../ui/player/ChangeEpisodeButton.vue         | 23 ++++++++++
 app/components/ui/player/Player.vue           | 35 +++++++++------
 app/components/util/player-control.js         | 44 +++++++++++++++++++
 app/pages/watch.vue                           |  2 +-
 5 files changed, 91 insertions(+), 14 deletions(-)
 create mode 100644 app/components/ui/player/ChangeEpisodeButton.vue
 create mode 100644 app/components/util/player-control.js

diff --git a/app/components/ui/button/index.ts b/app/components/ui/button/index.ts
index 337ec95..84e2e9f 100644
--- a/app/components/ui/button/index.ts
+++ b/app/components/ui/button/index.ts
@@ -18,6 +18,7 @@ export const buttonVariants = cva(
                 ghost:
                     'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
                 link: 'text-primary underline-offset-4 hover:underline',
+                borderless: 'border-0 cursor-pointer size-20'
             },
             size: {
                 default: 'h-9 px-4 py-2 has-[>svg]:px-3',
diff --git a/app/components/ui/player/ChangeEpisodeButton.vue b/app/components/ui/player/ChangeEpisodeButton.vue
new file mode 100644
index 0000000..0540d7a
--- /dev/null
+++ b/app/components/ui/player/ChangeEpisodeButton.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+
+interface Props {
+    type: EpisodeChangeType;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<script lang="ts">
+export enum EpisodeChangeType {
+    NEXT = "mage:next-fill",
+    PREVIOUS = "mage:previous-fill",
+}
+</script>
+
+<template>
+    <UiButton variant="borderless" size="icon">
+        <Icon :icon="props.type" class="size-5" />
+    </UiButton>
+</template>
diff --git a/app/components/ui/player/Player.vue b/app/components/ui/player/Player.vue
index 21c7e47..86db32b 100644
--- a/app/components/ui/player/Player.vue
+++ b/app/components/ui/player/Player.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import Artplayer from "artplayer";
 import Hls from "hls.js";
+import { createVueControlSmart } from "~/components/util/player-control";
+import { EpisodeChangeType } from "./ChangeEpisodeButton.vue";
+import { UiPlayerChangeEpisodeButton } from "#components";
 
 interface Props {
     urls: any;
     id: string;
-    nextEpisodeButton: boolean;
+    episodeButton: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,20 +18,26 @@ const emit = defineEmits(['get-instance'])
 
 const options = computed(() => {
     const controls = []
-    if (props.nextEpisodeButton) {
+    if (props.episodeButton) {
         controls.push(
-            {
-                name: 'next-episode',
+            createVueControlSmart(UiPlayerChangeEpisodeButton, {
+                name: "next-episode",
                 index: 50,
-                position: 'left',
-                html: '<button>Test</button>',
-                tooltip: 'Next episode',
-                style: {
-                    color: 'red',
-                },
-                click: function () {
-                },
-            },
+                tooltip: "Next episode",
+                type: EpisodeChangeType.NEXT
+            }, {
+                click: () => console.log("NEXT")
+            })
+        )
+        controls.push(
+            createVueControlSmart(UiPlayerChangeEpisodeButton, {
+                name: "previous-episode",
+                index: 50,
+                tooltip: "Previous episode",
+                type: EpisodeChangeType.PREVIOUS
+            }, {
+                click: () => console.log("Previous")
+            })
         )
     }
     return {
diff --git a/app/components/util/player-control.js b/app/components/util/player-control.js
new file mode 100644
index 0000000..831ed9e
--- /dev/null
+++ b/app/components/util/player-control.js
@@ -0,0 +1,44 @@
+import { createApp, h } from 'vue'
+
+export function createVueControlSmart(component, props = {}, events = {}) {
+    let vueApp = null
+
+    return {
+        name: props.name || 'vue-control',
+        index: props.index || 0,
+        position: props.position || 'left',
+        html: `<div class="vue-control-wrapper" data-vue-control="${component.name}"></div>`,
+        tooltip: props.tooltip || '',
+
+        mounted: function ($control) {
+            const container = $control.querySelector('.vue-control-wrapper')
+
+            if (container && !vueApp) {
+
+                console.log("111")
+                vueApp = createApp({
+                    render() {
+                        return h(component, {
+                            ...props,
+                            ...Object.entries(events).reduce((acc, [eventName, handler]) => {
+                                acc[`on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`] = handler
+                                return acc
+                            }, {})
+                        })
+                    }
+                })
+
+                vueApp.mount(container)
+                $control._vueApp = vueApp
+            }
+        },
+
+        destroy: function ($control) {
+            if ($control._vueApp) {
+                $control._vueApp.unmount()
+                $control._vueApp = null
+                vueApp = null
+            }
+        }
+    }
+}
diff --git a/app/pages/watch.vue b/app/pages/watch.vue
index f55ee74..972ba64 100644
--- a/app/pages/watch.vue
+++ b/app/pages/watch.vue
@@ -9,7 +9,7 @@
 
             <div v-if="hlsUrls">
                 <Player :id="mediaId.toString().concat(episode?.toString() || '')" :urls="hlsUrls" :episode="episode"
-                    :nextEpisodeButton="true" />
+                    :episodeButton="true" />
             </div>
 
             <!-- Loading and Error States -->
-- 
2.49.0


From 2f735587c32bfa707130410802564e986a00ecbc Mon Sep 17 00:00:00 2001
From: bivashy <botyrbojey@gmail.com>
Date: Tue, 19 Aug 2025 14:34:27 +0500
Subject: [PATCH 3/8] Fix eslint

---
 eslint.config.mjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index bff5f97..3985a10 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,6 @@
 // @ts-check
-import withNuxt from '.nuxt/eslint.config.mjs'
+import withNuxt from './.nuxt/eslint.config.mjs'
 
 export default withNuxt(
-  // Your custom configs here
+    // Your custom configs here
 )
-- 
2.49.0


From c2316a672dcde5d460659dc1115a303ad3e05f70 Mon Sep 17 00:00:00 2001
From: bivashy <botyrbojey@gmail.com>
Date: Sun, 24 Aug 2025 22:52:11 +0500
Subject: [PATCH 4/8] Change url episode query param and update artplayer urls

---
 .../ui/player/ChangeEpisodeButton.vue         | 24 +++++++--
 app/components/ui/player/Player.vue           | 52 +++++++++----------
 app/components/util/player-control.js         |  2 -
 app/components/util/route.js                  |  9 ++++
 app/pages/watch.vue                           | 18 +++----
 5 files changed, 62 insertions(+), 43 deletions(-)
 create mode 100644 app/components/util/route.js

diff --git a/app/components/ui/player/ChangeEpisodeButton.vue b/app/components/ui/player/ChangeEpisodeButton.vue
index 0540d7a..ae507d7 100644
--- a/app/components/ui/player/ChangeEpisodeButton.vue
+++ b/app/components/ui/player/ChangeEpisodeButton.vue
@@ -1,15 +1,29 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import type { RouteLocationNormalized } from 'vue-router'
+import { updateUrlParameter } from '~/components/util/route'
 
+const props = defineProps<Props>();
+const route = useRoute()
+const currentEpisode = computed(() => Number(route.query.episode as string))
+</script>
+
+<script lang="ts">
+function changeEpisode(route: RouteLocationNormalized, props: Props, currentEpisode: number) {
+    let episodeOffset = 0
+    if (props.type == EpisodeChangeType.NEXT) {
+        episodeOffset = 1
+    }
+    if (props.type == EpisodeChangeType.PREVIOUS) {
+        episodeOffset = -1
+    }
+    updateUrlParameter(route, 'episode', String(currentEpisode + episodeOffset))
+}
 
 interface Props {
     type: EpisodeChangeType;
 }
 
-const props = defineProps<Props>();
-</script>
-
-<script lang="ts">
 export enum EpisodeChangeType {
     NEXT = "mage:next-fill",
     PREVIOUS = "mage:previous-fill",
@@ -17,7 +31,7 @@ export enum EpisodeChangeType {
 </script>
 
 <template>
-    <UiButton variant="borderless" size="icon">
+    <UiButton v-on:click="changeEpisode(route, props, currentEpisode)" variant="borderless" size="icon">
         <Icon :icon="props.type" class="size-5" />
     </UiButton>
 </template>
diff --git a/app/components/ui/player/Player.vue b/app/components/ui/player/Player.vue
index 86db32b..5a57e92 100644
--- a/app/components/ui/player/Player.vue
+++ b/app/components/ui/player/Player.vue
@@ -6,7 +6,7 @@ import { EpisodeChangeType } from "./ChangeEpisodeButton.vue";
 import { UiPlayerChangeEpisodeButton } from "#components";
 
 interface Props {
-    urls: any;
+    urls: any[];
     id: string;
     episodeButton: boolean;
 }
@@ -17,36 +17,12 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(['get-instance'])
 
 const options = computed(() => {
-    const controls = []
-    if (props.episodeButton) {
-        controls.push(
-            createVueControlSmart(UiPlayerChangeEpisodeButton, {
-                name: "next-episode",
-                index: 50,
-                tooltip: "Next episode",
-                type: EpisodeChangeType.NEXT
-            }, {
-                click: () => console.log("NEXT")
-            })
-        )
-        controls.push(
-            createVueControlSmart(UiPlayerChangeEpisodeButton, {
-                name: "previous-episode",
-                index: 50,
-                tooltip: "Previous episode",
-                type: EpisodeChangeType.PREVIOUS
-            }, {
-                click: () => console.log("Previous")
-            })
-        )
-    }
     return {
         url: props.urls[0].url || '',
         type: 'm3u8',
         customType: {
             m3u8: playM3u8,
         },
-        quality: props.urls,
         autoSize: true,
         autoMini: true,
         playbackRate: true,
@@ -57,7 +33,6 @@ const options = computed(() => {
         autoOrientation: true,
         autoPlayback: true,
         id: props.id,
-        controls: controls,
     }
 })
 const artplayerRef = ref();
@@ -83,6 +58,24 @@ onMounted(() => {
         container: artplayerRef.value,
         ...options.value,
     })
+    if (props.episodeButton) {
+        instance.value.controls.add(
+            createVueControlSmart(UiPlayerChangeEpisodeButton, {
+                name: "next-episode",
+                index: 50,
+                tooltip: "Next episode",
+                type: EpisodeChangeType.NEXT,
+            })
+        )
+        instance.value.controls.add(
+            createVueControlSmart(UiPlayerChangeEpisodeButton, {
+                name: "previous-episode",
+                index: 50,
+                tooltip: "Previous episode",
+                type: EpisodeChangeType.PREVIOUS,
+            })
+        )
+    }
     nextTick(() => {
         emit('get-instance')
     })
@@ -93,6 +86,13 @@ onBeforeUnmount(() => {
         instance.value.destroy(false)
     }
 })
+
+watch([instance, () => props.urls], async ([artplayer, urls]) => {
+    if (!artplayer) return;
+    artplayer.quality = urls;
+    artplayer.switch = urls[0].url;
+    instance.value = artplayer;
+})
 </script>
 
 <template>
diff --git a/app/components/util/player-control.js b/app/components/util/player-control.js
index 831ed9e..80f835a 100644
--- a/app/components/util/player-control.js
+++ b/app/components/util/player-control.js
@@ -14,8 +14,6 @@ export function createVueControlSmart(component, props = {}, events = {}) {
             const container = $control.querySelector('.vue-control-wrapper')
 
             if (container && !vueApp) {
-
-                console.log("111")
                 vueApp = createApp({
                     render() {
                         return h(component, {
diff --git a/app/components/util/route.js b/app/components/util/route.js
new file mode 100644
index 0000000..92ef81f
--- /dev/null
+++ b/app/components/util/route.js
@@ -0,0 +1,9 @@
+export const updateUrlParameter = async (route, paramName, newValue) => {
+    await navigateTo({
+        path: route.path,
+        query: {
+            ...route.query,
+            [paramName]: newValue
+        }
+    }, { replace: true })
+}
diff --git a/app/pages/watch.vue b/app/pages/watch.vue
index 972ba64..67c29ba 100644
--- a/app/pages/watch.vue
+++ b/app/pages/watch.vue
@@ -28,10 +28,10 @@ import { Player } from '~/components/ui/player'
 import { video, type KodikVideoLinks } from '~/openapi/extractor'
 
 const route = useRoute()
-const mediaType = route.query.mediaType
-const mediaId = route.query.mediaId
-const mediaHash = route.query.mediaHash
-const episode = route.query.episode
+const mediaType = computed(() => route.query.mediaType as string)
+const mediaId = computed(() => route.query.mediaId as string)
+const mediaHash = computed(() => route.query.mediaHash as string)
+const episode = computed(() => Number(route.query.episode as string))
 
 const results = ref<KodikVideoLinks | null>(null)
 const isLoading = ref(false)
@@ -39,17 +39,15 @@ const error = ref<unknown>(null)
 const hlsUrls = ref<any>(null)
 
 watchEffect(async () => {
-    if (!mediaType || !mediaId || !mediaHash || !episode) return
-
     try {
         isLoading.value = true
         error.value = null
 
         const videoParams: any = {
-            mediaType: mediaType as string,
-            mediaId: mediaId as string,
-            mediaHash: mediaHash as string,
-            episode: Number(episode as string),
+            mediaType: mediaType.value,
+            mediaId: mediaId.value,
+            mediaHash: mediaHash.value,
+            episode: episode.value,
             quality: '360',
         }
 
-- 
2.49.0


From 030fde7348a728e595dc8b711604982c961e993e Mon Sep 17 00:00:00 2001
From: bivashy <botyrbojey@gmail.com>
Date: Thu, 28 Aug 2025 12:03:35 +0500
Subject: [PATCH 5/8] Add iconify/mage and `line-clamp` anime description

---
 app/components/ui/anime-card/AnimeCard.vue | 2 +-
 bun.lock                                   | 3 +++
 package.json                               | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/ui/anime-card/AnimeCard.vue b/app/components/ui/anime-card/AnimeCard.vue
index a88899b..5f6a8b3 100644
--- a/app/components/ui/anime-card/AnimeCard.vue
+++ b/app/components/ui/anime-card/AnimeCard.vue
@@ -56,7 +56,7 @@ onMounted(async () => {
                     <h3 class="text-2xl font-semibold tracking-tight">
                         {{ props.item.title }}
                     </h3>
-                    <p class="text-sm">
+                    <p class="text-sm line-clamp-5">
                         {{ props.item.material_data?.description }}
                     </p>
                     <div class="flex items-center pt-2">
diff --git a/bun.lock b/bun.lock
index 511b337..8ce700e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -29,6 +29,7 @@
       },
       "devDependencies": {
         "@iconify-json/heroicons": "^1.2.2",
+        "@iconify-json/mage": "^1.2.4",
         "@nuxtjs/color-mode": "^3.5.2",
         "orval": "^7.10.0",
       },
@@ -227,6 +228,8 @@
 
     "@iconify-json/heroicons": ["@iconify-json/heroicons@1.2.2", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-qoW4pXr5kTTL6juEjgTs83OJIwpePu7q1tdtKVEdj+i0zyyVHgg/dd9grsXJQnpTpBt6/VwNjrXBvFjRsKPENg=="],
 
+    "@iconify-json/mage": ["@iconify-json/mage@1.2.4", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-QZnjHtV/RP9/bF6n7bHSnXMPX/MW5dpHqOH2pEHiEytUx76OKrUZ55YBFwrAxPz5f3BoCeWMY1wyEQQD36Bkkw=="],
+
     "@iconify/collections": ["@iconify/collections@1.0.569", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-PclOVcAlvv55Fv5kRJmxk/KMoFLNBMLh0q9LDMlonIPJMUu958VsNw7F7CVurfyEbCf/54i7eF+q6LHqJxeQvg=="],
 
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
diff --git a/package.json b/package.json
index e30ad42..19c085b 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     },
     "devDependencies": {
         "@iconify-json/heroicons": "^1.2.2",
+        "@iconify-json/mage": "^1.2.4",
         "@nuxtjs/color-mode": "^3.5.2",
         "orval": "^7.10.0"
     }
-- 
2.49.0


From 1e604922b93b58412bd041ebee8d431f29590f04 Mon Sep 17 00:00:00 2001
From: bivashy <botyrbojey@gmail.com>
Date: Thu, 28 Aug 2025 17:50:11 +0500
Subject: [PATCH 6/8] Change quality order and default quality

---
 app/components/ui/player/Player.vue | 1 +
 app/pages/watch.vue                 | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/components/ui/player/Player.vue b/app/components/ui/player/Player.vue
index 5a57e92..8decd0e 100644
--- a/app/components/ui/player/Player.vue
+++ b/app/components/ui/player/Player.vue
@@ -89,6 +89,7 @@ onBeforeUnmount(() => {
 
 watch([instance, () => props.urls], async ([artplayer, urls]) => {
     if (!artplayer) return;
+    urls = urls.reverse()
     artplayer.quality = urls;
     artplayer.switch = urls[0].url;
     instance.value = artplayer;
diff --git a/app/pages/watch.vue b/app/pages/watch.vue
index 67c29ba..9adcdb8 100644
--- a/app/pages/watch.vue
+++ b/app/pages/watch.vue
@@ -55,11 +55,13 @@ watchEffect(async () => {
         results.value = response?.data || null
 
         if (results.value?.links) {
-            hlsUrls.value = Object.entries(results.value.links).map(([quality, links], index) => {
+            console.log(results.value.links)
+            hlsUrls.value = Object.entries(results.value.links).map(([quality, links], index, arr) => {
+                const isLatest = index === arr.length - 1
                 return {
                     html: quality,
                     url: links.find(link => link.src?.includes('.m3u8') || link.type?.includes('hls'))?.src,
-                    default: index === 0
+                    default: isLatest
                 }
             })
 
-- 
2.49.0


From c6296003afd214e62f25d02e3d5701c60f5aea9d Mon Sep 17 00:00:00 2001
From: bivashy <botyrbojey@gmail.com>
Date: Mon, 1 Sep 2025 00:07:37 +0500
Subject: [PATCH 7/8] Remove redundant id prop from Player

---
 app/components/ui/player/Player.vue | 2 --
 app/pages/watch.vue                 | 3 +--
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/components/ui/player/Player.vue b/app/components/ui/player/Player.vue
index 8decd0e..cbee975 100644
--- a/app/components/ui/player/Player.vue
+++ b/app/components/ui/player/Player.vue
@@ -7,7 +7,6 @@ import { UiPlayerChangeEpisodeButton } from "#components";
 
 interface Props {
     urls: any[];
-    id: string;
     episodeButton: boolean;
 }
 
@@ -32,7 +31,6 @@ const options = computed(() => {
         lock: true,
         autoOrientation: true,
         autoPlayback: true,
-        id: props.id,
     }
 })
 const artplayerRef = ref();
diff --git a/app/pages/watch.vue b/app/pages/watch.vue
index 9adcdb8..8e090ce 100644
--- a/app/pages/watch.vue
+++ b/app/pages/watch.vue
@@ -8,8 +8,7 @@
             <p>Episode: {{ episode }}</p>
 
             <div v-if="hlsUrls">
-                <Player :id="mediaId.toString().concat(episode?.toString() || '')" :urls="hlsUrls" :episode="episode"
-                    :episodeButton="true" />
+                <Player :urls="hlsUrls" :episode="episode" :episodeButton="true" />
             </div>
 
             <!-- Loading and Error States -->
-- 
2.49.0


From 32e03ad0f7afecf86b60bacaa800876851e2a7f7 Mon Sep 17 00:00:00 2001
From: bivashy <botyrbojey@gmail.com>
Date: Mon, 1 Sep 2025 19:22:25 +0500
Subject: [PATCH 8/8] Use external shared docker network

---
 compose.yml | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/compose.yml b/compose.yml
index c53ead2..9444ceb 100644
--- a/compose.yml
+++ b/compose.yml
@@ -4,7 +4,8 @@ services:
     ports:
       - 3000:3000
     networks:
-      - anyame
+      - anyame-shared
+
 networks:
-  anyame:
-    driver: bridge
+  anyame-shared:
+    external: true
-- 
2.49.0