feat: music-progress-bar

Piyush-linux · Aug 15, 2024 · 74e7d0e · 74e7d0e
1 parent 3f36bcd
commit 74e7d0e
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,8 @@
 
 ### About
 "Welcome to Astra OS, a next-generation web UI inspired by the power and versatility of Linux distributions. Experience seamless navigation, sleek design, and unparalleled functionality. With Astra OS, embark on a journey of innovation, where every click opens doors to new horizons. Whether you're a seasoned tech enthusiast or a curious explorer, Astra OS is your gateway to a world of limitless possibilities. Elevate your online experience and discover the future of web interfaces with Astra OS."
+- Geological API
+- Animation
 
 ### Inpiration
 - __UI Inspiration__ : https://i.pinimg.com/736x/87/3b/b7/873bb76870c5831b3db734cfbf7cf165.jpg
@@ -56,7 +58,9 @@ __v1__
 - [x] UI: Gallery Comp
 - [x] Github: workflow for deploy
 + v1.1
-	- [ ] weather APi using User Current location @Geo-location API
+	- [x] weather APi using User Current location @Geo-location API
+	- [ ] Skip Dialog Modal Option for New Comer 
+
 __v2__
 - [ ] UI: Social Media in Profile Card
 - [ ] UI: Notificarion/Toast  

diff --git a/app.vue b/app.vue
@@ -60,6 +60,7 @@
                 <!-- <Terminal/> -->
                 <div class=" w-full h-full " ref="comp_gallery">
                     <Gallery/>
+                    <Panel/>
                 </div>
             </div>
         </div>
@@ -106,6 +107,36 @@ const tour = useShepherd({
 
 onMounted(() => {
 
+    // Menu-location
+    tour.addStep({
+        id: 'example-step',
+        text: '🌍 Please Share Your Location for the Weather Forecast',
+        attachTo: {
+            element: btn_power.value ,
+        },
+        classes: 'step1',
+        buttons: [{
+            text: 'Next',
+            classes: 'step1-btn1',
+            action: tour.next
+        }]
+    });
+
+    // ESC
+    tour.addStep({
+        id: 'example-step',
+        text: 'Skip these steps and explore yourself, press the ESC key at any time.',
+        attachTo: {
+            element: btn_power.value ,
+        },
+        classes: 'step1',
+        buttons: [{
+            text: 'Next',
+            classes: 'step1-btn1',
+            action: tour.next
+        }]
+    });
+
     // Tour-Power
     tour.addStep({
         id: 'example-step',

diff --git a/components/Music.vue b/components/Music.vue
@@ -3,33 +3,36 @@
 let progress = ref(null)
 let song = ref(null)
 let ctrlIcon = ref(null)
+let timer = ref(0)
 let songState = ref(false)
 // const counter = useState ('counter', () => Math.round(Math.random() * 1000))
 
 
 
-onMounted(() => {
-    // console.log(song.value)
-    song.value.onloadedmetadata = function () {
+onUpdated(() => {
+    song.value.onloadedmetadata = () => {
         progress.value.max = song.value.duration;
         progress.value.value = song.value.currentTime
     }
 
-    if (songState.value) {
+    if (songState.value == true) {
+        console.log("---2")
         song.value.play()
+        
         setInterval(() => {
             progress.value.value = song.value.currentTime;
         }, 500);
-    }
 
-    progress.value.onChange = function () {
-        song.value.play();
-        song.value.currentTime = progress.value.value;
-        songState = !songState;
+        // setInterval(() => {
+        //     console.log("---timer")
+        //     timer.value = timer.value + 1;
+        // }, 1000);
     }
 
 })
 
+
+
 let play = () => {
     if (songState.value) {
         song.value.pause()
@@ -45,6 +48,7 @@ let songInfo = ref({
     author: "Megan Thee Stallion",
     cover: "https://raw.githubusercontent.com/Piyush-linux/AstraOS/master/assets/music/MU.jpg",
     music: "https://raw.githubusercontent.com/Piyush-linux/AstraOS/master/assets/music/MU.mp3",
+    max:"2:37"
 })
 
 let songList = [{
@@ -53,31 +57,34 @@ let songList = [{
     author: "Megan Thee Stallion",
     cover: "https://raw.githubusercontent.com/Piyush-linux/AstraOS/master/assets/music/MU.jpg",
     music: "https://raw.githubusercontent.com/Piyush-linux/AstraOS/master/assets/music/MU.mp3",
+    max:"2:37"
 }, {
     id: 2,
     name: "Shinunoga E-Wa",
     author: "Fujii Kaze",
     cover: "https://raw.githubusercontent.com/Piyush-linux/AstraOS/master/assets/music/SEW.jpg",
     music: "https://raw.githubusercontent.com/Piyush-linux/AstraOS/master/assets/music/SEW.mp3",
+    max:"3:05"
 }, {
     id: 3,
     name: "Stay With Me",
     author: "Miki Matsubara",
     cover: "https://raw.githubusercontent.com/Piyush-linux/AstraOS/master/assets/music/SWM.jpg",
     music: "https://raw.githubusercontent.com/Piyush-linux/AstraOS/master/assets/music/SWM.mp3",
+    max:""
 }]
 
 let PlayNext = () => {
 
     switch (songInfo.value.id) {
         case 1:
-        songInfo.value = songList[1];
+            songInfo.value = songList[1];
             break;
         case 2:
-        songInfo.value = songList[2];
+            songInfo.value = songList[2];
             break;
         case 3:
-        songInfo.value = songList[0];
+            songInfo.value = songList[0];
             break;
         default:
             break;
@@ -122,7 +129,8 @@ let PlayNext = () => {
                             class="text-4xl text-gray-600" ref="ctrlIcon" id="ctrlIcon" />
                     </button>
                     <!-- next -->
-                    <button @click="PlayNext()" class="p-3 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
+                    <button @click="PlayNext()"
+                        class="p-3 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
                         <Icon name="material-symbols:skip-next-rounded" color="#151515"
                             class="text-2xl text-gray-600" />
                     </button>
@@ -131,12 +139,12 @@ let PlayNext = () => {
                 <!-- <div class="mt-6 bg-gray-200 h-2 rounded-full"> -->
                 <!-- <div class="bg-teal-500 h-2 rounded-full w-1/2"></div> -->
                 <div class="flex justify-center">
-                    <input type="range" value="0" id="progress" ref="progress" class=" mt-6">
+                    <input type="range" value="0" id="progress" ref="progress" class="mt-6 bg-purple-300">
                 </div>
                 <!-- </div> -->
                 <div class="flex justify-between mt-2 text-sm text-gray-600">
-                    <span>1:57</span>
-                    <span>3:53</span>
+                    <span> {{ timer }} </span>
+                    <span> {{ songInfo.max }} </span>
                 </div>
                 <!-- /// -->
                 <audio controls id="song" ref="song" class="hidden">
@@ -159,3 +167,23 @@ let PlayNext = () => {
         </div>
     </div>
 </template>
+
+
+<style>
+#progress {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 7px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+#progress::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background-color: black;
+    /* width: 100%; */
+    /* height: 7px; */
+    /* border-radius: 3px; */
+    cursor: pointer;
+}
+</style>
diff --git a/components/Notepad.vue b/components/Notepad.vue
@@ -4,6 +4,6 @@ let txt = "Made with Love by Piyush \n\n## Tech Stack \n- Nuxt JS \n- Tailwind C
 
 <template>
 	<div class="h-full w-full bg-gray-900 p-5 rounded-xl opacity-[.8]">
-		<textarea name="" id="" class="w-full h-full bg-gray-900 text-pink-200 f1 outline-none p-3 border-l-2 border-pink-400" :value="txt"></textarea>
+		<textarea name="notepad" id="" class="w-full h-full bg-gray-900 text-pink-200 f1 outline-none p-3 border-l-2 border-pink-400" :value="txt"></textarea>
 	</div>
 </template>
diff --git a/components/Panel.vue b/components/Panel.vue
@@ -0,0 +1,30 @@
+<script setup>
+
+    let newX = ref(0);
+    let newY = ref(0);
+    let startX = ref(0);
+    let startY = ref(0);
+
+
+    let mouseDown = (e) => {
+        startX = e.clientX;
+        startY = e.clientY;
+        console.log(e) 
+    }
+
+</script>
+<template>
+    <div class="panel" @mousedown="mouseDown">
+        Panel
+    </div>
+</template>
+
+<style>
+.panel{
+    width: 100px;
+    height: 100px;
+    position: fixed;
+    cursor: pointer;
+    background-color: aliceblue;
+}
+</style>
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,4 +1,4 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  // "extends": "./.nuxt/tsconfig.json"
 }