feat:add demo video

apps/client/components/Player/Player.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import { onMounted } from "vue";
+  import Player from "xgplayer";
+  import "xgplayer/dist/index.min.css";
+
+  import Poster from "~/assets/demo-video.png";
+
+  const props = defineProps({
+    videoUrl: String,
+  });
+
+  onMounted(() => {
+    let player = new Player({
+      id: "player",
+      url: props.videoUrl,
+      width: "85%",
+      height: 650,
+      poster: Poster,
+      videoFillMode: "fill",
+      commonStyle: {
+        playedColor: "#9d59ef",
+        volumeColor: "#9d59ef",
+      },
+    });
+  });
+</script>
+
+<template>
+  <div id="player"></div>
+</template>
+
+<style>
+  .xgplayer .xg-options-list li:hover,
+  .xgplayer .xg-options-list li.selected {
+    opacity: 1;
+    color: #9d59ef;
+  }
+</style>

apps/client/components/home/Banner.vue

@@ -57,13 +57,18 @@
         src="~/assets/home-page-preview.png"
         class="w-3/4"
       />
+
+<!-- demo video show -->
+<!-- <Player video-url="https://media.w3.org/2010/05/sintel/trailer.mp4"/> -->
+
     </div>
 
     <CommonDivider />
   </section>
 </template>
 
 <script setup lang="ts">
+
 const emit = defineEmits(["startEarthworm"]);
 
 function handleKeydown() {
@@ -248,4 +253,4 @@ strong {
     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
   }
 }
-</style>
+</style>

apps/client/package.json

@@ -47,6 +47,7 @@
     "pinia": "^2.1.7",
     "satori": "^0.10.13",
     "vee-validate": "^4.12.5",
+    "xgplayer": "^3.0.16",
     "yup": "^1.3.3"
   }
 }