Merge pull request #4 from thuongtruong1009/slider-custom

feat: style slider custom

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2

README.md

@@ -1,6 +1,13 @@
+[![Dev.to](https://img.shields.io/twitter/url?color=green&label=Dev.to&logo=dev.to&logoColor=yellow&style=for-the-badge&url=https%3A%2F%2Fdev.to%2Fthuongtruong1009)](https://dev.to/thuongtruong1009)
+[![Github](https://img.shields.io/twitter/url?color=green&label=Github&logo=github&logoColor=white&style=for-the-badge&url=https%3A%2F%2Fdev.to%2Fthuongtruong1009)](https://github.com/thuongtruong1009)
+[![Email](https://img.shields.io/twitter/url?color=green&label=Email&logo=gmail&logoColor=red&style=for-the-badge&url=https%3A%2F%2Fdev.to%2Fthuongtruong1009)](mailto:[email protected])
+
 <h1 align="center">bee music 🎵</h1>
 
-![demo](/public/demo_main.jpg)
+## Demo
+[Preview at here](https://bee-music.netlify.app/)
+
+![image demo](/public/demo_main.jpg)
 
 This template should help get you started developing with Vue 3 in Vite.
 
@@ -56,7 +63,36 @@ npm run lint
 ## Plugin
 + [Pinia for vue](https://github.com/vuejs/pinia)
 + [Windicss for Vite](https://windicss.org/integrations/vite.html)
++ implicity module error fixes [here](https://pjausovec.medium.com/how-to-fix-error-ts7016-could-not-find-a-declaration-file-for-module-xyz-has-an-any-type-ecab588800a8)
+
+## Contribute
++ star this repo
++ click fork button
++ clone to your local
++ and make new Pull Request on your new branch
++ Congratulate, you have just contribute to them.
 
 ## Reference
-+ inspiration: [bee-music](https://dribbble.com/shots/16618273-Bee-Music-Music-Media-Player-Dashboard?fbclid=IwAR35hkSSs2dB2Ek66GAX-yPDfx3JYxxJgeQdwweuEiEtne02IUYk13kxDnk)
++ idea inspiration: [bee-music](https://dribbble.com/shots/16618273-Bee-Music-Music-Media-Player-Dashboard?fbclid=IwAR35hkSSs2dB2Ek66GAX-yPDfx3JYxxJgeQdwweuEiEtne02IUYk13kxDnk)
 + progress at [latest project updated](https://github.com/thuongtruong1009/bee-music/projects)
++ Learning front-end web full course at [Front-end course](https://github.com/thuongtruong1009/challenge-resposive-web-design).
++ Learn Snake Game tutorial at [Snake-Game-OOP](https://github.com/thuongtruong1009/Snake-Game-OOP)
++ Learn Java for new beginner at [Java training](https://github.com/thuongtruong1009/java-oop-training)
++ Make flip card game at [flip-card](https://github.com/thuongtruong1009/flip-cards)
++ Learn computer architecture at [architecture](https://github.com/thuongtruong1009/computer-architecture)
++ Pratice UI/UX at [league-fo-legend](https://github.com/thuongtruong1009/league-of-legends-clone)
+
+## ❤️ [Support me](https://www.paypal.me/thuongtruong1009)
+> We are looking for sponsors to join us to have better community reach and impact.
+
+[![MOMO](https://img.shields.io/badge/-MOMO-red?style=flat&labelColor=RED&logo=MOMO&logoColor=black)](https://nhantien.momo.vn/0917085937)
+<a href="https://www.paypal.me/thuongtruong1009">
+  <img height="25" marginTop="10" src="https://www.paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/optimize/26_Blue_PayPal_Pill_Button.png">
+</a>
+<a href='https://ko-fi.com/thuongtruong1009' target='_blank'>
+  <img height='25' style='border:0px;height:28px;color:blue' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />
+</a>
+
+## 📰 [License](LICENSE)
++ ##### This project is distributed under the [MIT License](LICENSE).
++ ##### Copyright of [@thuongtruong1009](https://github.com/thuongtruong1009), 2022.

package.json

@@ -5,7 +5,7 @@
     "description": "Enjoy relaxing tunes after stressful working hours.",
     "license": "MIT",
     "scripts": {
-        "dev": "vite",
+        "dev": "vite --port 3000 --open",
         "build": "vue-tsc --noEmit && vite build",
         "preview": "vite preview --port 5050",
         "test:unit": "vitest --environment jsdom",

src/components/CBetween.vue

@@ -1,6 +1,6 @@
 <script setup>
 import CLeft from "../components/CLeft.vue";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useCounterStore } from "../stores/counter";
 import { storeToRefs } from "pinia";
 const numberFormatter = (n) => {
@@ -14,6 +14,24 @@ const onLeftToggleClick = () => {
 
 const main = useCounterStore();
 const { counter } = storeToRefs(main);
+
+// const slider = document.getElementById("myRange2");
+// const output = document.getElementById("demo2");
+// output.innerHTML = slider.value;
+
+// slider.oninput = function () {
+//   output.innerHTML = this.value;
+// };
+const isPlaying = ref(false);
+const onPlaySong = () => {
+  isPlaying.value = !isPlaying.value;
+};
+const isHeart = ref(false);
+const onHeart = () => {
+  isHeart.value = !isHeart.value;
+};
+const currentTime = ref(0);
+const currentVolume = ref(30);
 </script>
 
 <template>
@@ -109,41 +127,83 @@ const { counter } = storeToRefs(main);
         class="flex justify-between items-center pr-3 py-3 hover:(pl-2 pr-5 bg-white) duration-200 rounded-md cursor-pointer text-gray-500 text-xs"
       >
         <p class="-mr-30">{{ numberFormatter(i) }}</p>
-        <p>Artics name</p>
         <p>name song {{ i }}</p>
+        <p>artics name {{ i }}</p>
         <p>{{ main.counter }}</p>
       </div>
     </div>
 
     <div class="play-song p-3 bg-white rounded-lg">
       <div class="play-control flex justify-between items-center">
-        <div class="play-control__act flex items-center text-gray-500">
-          <i class="far fa-heart" id="heart"></i>
+        <div
+          class="play-control__act flex justify-between items-center text-gray-500 w-[18%]"
+        >
+          <i
+            class="far fa-heart"
+            @click="onHeart"
+            v-show="isHeart === false"
+          ></i>
+          <i
+            class="fas fa-heart text-red-600"
+            @click="onHeart"
+            v-show="isHeart === true"
+          ></i>
           <i class="fas fa-music"></i>
           <i class="fas fa-expand-alt"></i>
         </div>
-        <div class="play-control__main flex items-center">
+        <div
+          class="play-control__main w-[30%] flex justify-between items-center cursor-pointer"
+        >
           <i class="fas fa-redo-alt play-repeat text-gray-500"></i>
           <i class="fas fa-fast-backward play-backward main-icon"></i>
-          <!-- <i class="fas fa-pause-circle pause-icon main-icon main-icon--big"></i> -->
-          <span class="play-inner">
-            <i
-              class="fas fa-play-circle play-icon main-icon main-icon--big"
-            ></i>
-          </span>
+          <i
+            class="fas fa-pause-circle"
+            @click="onPlaySong"
+            v-show="isPlaying === true"
+          ></i>
+          <i
+            class="fas fa-play-circle"
+            @click="onPlaySong"
+            v-show="isPlaying === false"
+          ></i>
           <i class="fas fa-fast-forward play-forward main-icon"></i>
           <i class="fas fa-random shuffle-song text-gray-500"></i>
         </div>
-        <div class="play-control__volume flex items-center">
+        <div class="play-control__volume w-[30%] flex justify-end items-center">
           <i class="fas fa-volume-down text-gray-500"></i>
-          <input type="range" id="volume" class="volume" />
-
+          <div class="slidecontainer1 relative">
+            <span
+              class="w-full h-0.25 bg-red-500 absolute top-1/2 left-0"
+            ></span>
+            <input
+              type="range"
+              min="1"
+              max="100"
+              class="slider1"
+              id="myRange1"
+              v-model="currentVolume"
+            />
+          </div>
           <i class="fas fa-volume-up text-gray-500"></i>
         </div>
       </div>
       <div class="play-seekbar flex justify-between items-center">
-        <div class="timer__left text-gray-500">0:00</div>
-        <input type="range" name="range" id="range" class="range" />
+        <div class="timer__left text-gray-500" id="demo2">
+          {{ currentTime }}
+        </div>
+        <div class="slidecontainer2 relative">
+          <span
+            class="w-full h-0.75 bg-gray-500 absolute top-1/2 left-0"
+          ></span>
+          <input
+            type="range"
+            min="1"
+            max="100"
+            class="slider2"
+            id="myRange2"
+            v-model="currentTime"
+          />
+        </div>
         <audio src="/mp3/ntt.mp3" id="song"></audio>
         <div class="timer__right text-gray-500">3.00</div>
       </div>
@@ -164,8 +224,80 @@ const { counter } = storeToRefs(main);
 i {
   margin: 0 0.2rem;
 }
+.play-control i {
+  cursor: pointer;
+}
+/* **************************************************** */
+.slidecontainer2 {
+  width: 85%;
+  height: 1.5rem;
+}
+
+.slider2 {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+}
 
-/* @media (max-width: 800px) {
+.slider2::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.4rem;
+  height: 1.4rem;
+  border: 0;
+  background: url("https://img.icons8.com/external-flatart-icons-lineal-color-flatarticons/25/000000/external-right-arrow-arrow-flatart-icons-lineal-color-flatarticons-4.png");
+  cursor: pointer;
+}
+
+.slider2::-moz-range-thumb {
+  width: 1.4rem;
+  height: 1.4rem;
+  border: 0;
+  background: url("https://img.icons8.com/external-flatart-icons-lineal-color-flatarticons/25/000000/external-right-arrow-arrow-flatart-icons-lineal-color-flatarticons-4.png");
+  cursor: pointer;
+}
+/* ****************************************************** */
+.slidecontainer1 {
+  width: 80%;
+  height: 1.5rem;
+}
+
+.slider1 {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+}
+
+.slider1::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.4rem;
+  height: 1.4rem;
+  border: 0;
+  background: url("https://img.icons8.com/material-two-tone/24/000000/circled.png");
+  cursor: pointer;
+  transform: scale(0.6);
+}
+
+.slider1::-moz-range-thumb {
+  width: 1.4rem;
+  height: 1.4rem;
+  border: 0;
+  background: url("https://img.icons8.com/material-two-tone/24/000000/circled.png");
+  cursor: pointer;
+  transform: scale(0.6);
+}
+/* ****************************************************** */
+
+@media (max-width: 800px) {
   .between-container {
     border-radius: 1rem;
   }
@@ -189,5 +321,5 @@ i {
   .fa-arrow-right {
     font-size: 1.4rem;
   }
-} */
+}
 </style>

src/components/slider.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        .slidecontainer {
+            width: 100%;
+        }
+
+        .slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 3px;
+            background: #d3d3d3;
+            outline: none;
+            opacity: 0.7;
+            -webkit-transition: .2s;
+            transition: opacity .2s;
+        }
+
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 23px;
+            height: 24px;
+            border: 0;
+            background: url('https://img.icons8.com/material-two-tone/24/000000/circled.png');
+            cursor: pointer;
+        }
+
+        .slider::-moz-range-thumb {
+            width: 23px;
+            height: 24px;
+            border: 0;
+            background: url('https://img.icons8.com/material-two-tone/24/000000/circled.png');
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <div style="width:100px">
+        <div class="slidecontainer">
+            <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
+            <p>Value: <span id="demo"></span></p>
+        </div>
+    </div>
+
+
+    <script>
+        var slider = document.getElementById("myRange");
+        var output = document.getElementById("demo");
+        output.innerHTML = slider.value;
+
+        slider.oninput = function() {
+            output.innerHTML = this.value;
+        }
+    </script>
+
+</body>
+
+</html>

src/views/HomeView.vue

@@ -15,7 +15,7 @@ import CRight from "../components/CRight.vue";
 </template>
 
 <style scoped>
-/* @media (max-width: 800px) {
+@media (max-width: 800px) {
   .left,
   .right {
     display: none;
@@ -24,5 +24,5 @@ import CRight from "../components/CRight.vue";
     grid-template-columns: 0 1fr 0;
     border-radius: 1rem;
   }
-} */
+}
 </style>