Initial implementation of "Next episode" button in player

app/components/ui/button/index.ts

@@ -18,7 +18,6 @@ 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',

app/components/ui/player/ChangeEpisodeButton.vue

@@ -1,23 +0,0 @@
-<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>

app/components/ui/player/Player.vue

@@ -1,14 +1,11 @@
 <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;
-    episodeButton: boolean;
+    nextEpisodeButton: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,26 +15,20 @@ const emit = defineEmits(['get-instance'])
 
 const options = computed(() => {
     const controls = []
-    if (props.episodeButton) {
+    if (props.nextEpisodeButton) {
         controls.push(
-            createVueControlSmart(UiPlayerChangeEpisodeButton, {
+            {
-                name: "next-episode",
+                name: 'next-episode',
                 index: 50,
-                tooltip: "Next episode",
+                position: 'left',
-                type: EpisodeChangeType.NEXT
+                html: '<button>Test</button>',
-            }, {
+                tooltip: 'Next episode',
-                click: () => console.log("NEXT")
+                style: {
-            })
+                    color: 'red',
-        )
+                },
-        controls.push(
+                click: function () {
-            createVueControlSmart(UiPlayerChangeEpisodeButton, {
+                },
-                name: "previous-episode",
+            },
-                index: 50,
-                tooltip: "Previous episode",
-                type: EpisodeChangeType.PREVIOUS
-            }, {
-                click: () => console.log("Previous")
-            })
         )
     }
     return {

app/components/util/player-control.js

@@ -1,44 +0,0 @@
-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
-            }
-        }
-    }
-}

app/pages/watch.vue

@@ -9,7 +9,7 @@
 
             <div v-if="hlsUrls">
                 <Player :id="mediaId.toString().concat(episode?.toString() || '')" :urls="hlsUrls" :episode="episode"
-                    :episodeButton="true" />
+                    :nextEpisodeButton="true" />
             </div>
 
             <!-- Loading and Error States -->

eslint.config.mjs

@@ -1,5 +1,5 @@
 // @ts-check
-import withNuxt from '.nuxt/eslint.config.mjs'
+import withNuxt from './.nuxt/eslint.config.mjs'
 
 export default withNuxt(
     // Your custom configs here