Add "ChangeEpisodeButton" and hook as player control

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',

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>

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 {