├── .gitattributes
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── index.html
    └── logo.png
├── src
    ├── App.vue
    ├── assets
    │   ├── audios
    │   │   ├── Azealia Banks - Jumanji.mp3
    │   │   ├── Baby Metal - Gimme Chocolate.mp3
    │   │   ├── Baby Metal - Karate.mp3
    │   │   ├── Britney Spears - Pretty Girls.mp3
    │   │   ├── Iggy Azalea - Kream (ft. Tyga).mp3
    │   │   ├── Iggy Azalea - Started.mp3
    │   │   ├── Linn da Quebrada - MEnorme.mp3
    │   │   ├── Little Mix - Salute.mp3
    │   │   ├── Marina and the Diamonds - Lies.mp3
    │   │   ├── Mc Tha - Oceano.mp3
    │   │   ├── Miley Cyrus - FU.mp3
    │   │   ├── Sia - Burn The Pages.mp3
    │   │   ├── Viktoria Modesta - Counterflow.mp3
    │   │   └── Wednesday Campanella - Shakushain.mp3
    │   ├── images
    │   │   ├── azealia banks - jumanji.jpg
    │   │   ├── baby metal - gimme chocolate.jpg
    │   │   ├── baby metal - karate.jpg
    │   │   ├── britney spears - pretty girls.jpg
    │   │   ├── iggy azalea - kream.jpg
    │   │   ├── iggy azalea - started.jpg
    │   │   ├── linn da quebrada - menorme.jpg
    │   │   ├── little mix - salute.jpg
    │   │   ├── marina and the diamonds - lies.jpg
    │   │   ├── mc tha - oceano.jpg
    │   │   ├── miley cyrus - fu.jpg
    │   │   ├── sia - burn the pages.jpg
    │   │   ├── viktoria modesta - counterflow.jpg
    │   │   └── wednesday campanella - shakushain.jpg
    │   └── styles
    │   │   ├── animations.css
    │   │   ├── fonts.css
    │   │   └── main.css
    ├── helpers
    │   ├── timer.js
    │   └── utils.js
    ├── main.js
    ├── mocks
    │   └── songs.js
    └── services
    │   └── api.js
└── yarn.lock


/.gitattributes:
--------------------------------------------------------------------------------
1 | * linguist-vendored
2 | *.vue linguist-vendored=false


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">
 2 |   <img alt="logo" src="https://i.imgur.com/iHflppC.png" width="200"/>
 3 |   <br>
 4 | </h1>
 5 | 
 6 | <p align="center">
 7 |   <a href="https://github.com/Davigl/vue-music-player/commits/master">
 8 |     <img alt="GitHub Last Commit" src="https://img.shields.io/github/last-commit/Davigl/vue-music-player?style=flat-square&color=ff69b4">
 9 |   </a>
10 |   
11 |   <a href="https://github.com/Davigl/vue-music-player/stargazers">
12 |     <img alt="GitHub Stars" src="https://img.shields.io/github/stars/Davigl/vue-music-player.svg">
13 |   </a>
14 | 
15 |   <a href="https://github.com/Davigl/vue-music-player/issues">
16 |     <img alt="Repository issues" src="https://img.shields.io/github/issues/Davigl/vue-music-player?style=flat-square&color=yellow">
17 |   </a>
18 | 
19 |   <img alt="Repository Size" src="https://img.shields.io/github/repo-size/Davigl/vue-music-player?style=flat-square&color=blueviolet">
20 | </p>
21 | 
22 | <p align="center">
23 |   <a href="#thinking-about">About</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
24 |   <a href="#rocket-technologies">Technologies</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
25 |   <a href="#user-content--add-your-music">Add your Music</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
26 |   <a href="#memo-license">License</a>
27 | </p>
28 | 
29 | ## :thinking: About
30 | 
31 | This project is a basic public music player that you can add your musics and make it public, (keeps the music of all the contributors) check [contributing](#user-content--add-your-music). Visit this project by clicking [here](https://basic-music-player.netlify.com/).
32 | 
33 | <div align="center">
34 | 
35 | ![](https://i.imgur.com/8AYdnRt.gif)
36 | 
37 | *Music Player*
38 | 
39 | </div>
40 | 
41 | ## :rocket: Technologies
42 | 
43 | This project was developed with the following technologies:
44 | 
45 | - [Vue.js](https://github.com/axios/axios)
46 | - [Eslint](https://github.com/eslint/eslint)
47 | - [Vue Fontawesome](https://github.com/FortAwesome/vue-fontawesome)
48 | 
49 | ## 💁🏻 Add your Music
50 | 
51 | Want to add some nice music to this public playlist? follow these steps:
52 | 
53 | 1. Fork it & create your feature branch;
54 | 
55 | ```bash
56 | $ git checkout -b new-songs
57 | ```
58 | 
59 | 2. Edit [songs](https://github.com/Davigl/vue-music-player/blob/master/src/mocks/songs.js), make sure to add music and cover to the assets folder, sources must be from [soundcloud](https://soundcloud.com/) or content without copyright;
60 | 3. Commit your changes & push to the branch;
61 | 
62 | ```bash
63 | $ git commit -am 'Add some feature'
64 | $ git push origin new-songs
65 | ```
66 | 
67 | 4. Submit a pull request.
68 | 
69 | ## :memo: License
70 | 
71 | Copyright © 2020, [Davi Guimarães](https://github.com/davigl).
72 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "music-vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@fortawesome/fontawesome-svg-core": "^1.2.28",
12 |     "@fortawesome/free-brands-svg-icons": "^5.13.0",
13 |     "@fortawesome/free-solid-svg-icons": "^5.13.0",
14 |     "@fortawesome/vue-fontawesome": "^0.1.9",
15 |     "axios": "^0.19.2",
16 |     "core-js": "^3.6.4",
17 |     "k-progress": "^1.5.0",
18 |     "vue": "^2.6.11"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "~4.3.0",
22 |     "@vue/cli-plugin-eslint": "~4.3.0",
23 |     "@vue/cli-service": "~4.3.0",
24 |     "@vue/eslint-config-prettier": "^6.0.0",
25 |     "babel-eslint": "^10.1.0",
26 |     "eslint": "^6.7.2",
27 |     "eslint-plugin-prettier": "^3.1.1",
28 |     "eslint-plugin-vue": "^6.2.2",
29 |     "prettier": "^1.19.1",
30 |     "vue-template-compiler": "^2.6.11"
31 |   },
32 |   "eslintConfig": {
33 |     "root": true,
34 |     "env": {
35 |       "node": true
36 |     },
37 |     "extends": [
38 |       "plugin:vue/essential",
39 |       "eslint:recommended",
40 |       "@vue/prettier"
41 |     ],
42 |     "parserOptions": {
43 |       "parser": "babel-eslint"
44 |     },
45 |     "rules": {}
46 |   },
47 |   "browserslist": [
48 |     "> 1%",
49 |     "last 2 versions",
50 |     "not dead"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>logo.png">
 8 |     <meta property="og:image" content="https://i.imgur.com/bv3yT20.png">
 9 |     <meta name="application-name" content="VUE Music Player">
10 |     <meta name="description" content="Basic Music Player builded with Vue">
11 |     <meta name="keywords" content="Music, Player, Basic, Vue, Javascript, Davi Guimarães Leite">
12 |     <meta name="copyright" content="Davi Guimarães Leite">
13 |     <meta name="author" content="Davi Guimarães Leite">
14 |     <meta name="coverage" content="Worldwide">
15 |     <meta name="distribution" content="Global">
16 |     <meta name="rating" content="General">
17 |     <meta name="msapplication-TileColor" content="#82adf0">
18 |     <meta name="theme-color" content="#82adf0">
19 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
20 |     <meta http-equiv="cleartype" content="on">
21 |     <title>Vue Public Music Player</title>
22 |   </head>
23 |   <body>
24 |     <noscript>
25 |       <strong>We're sorry but Vue Music Player doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
26 |     </noscript>
27 |     <div id="app"></div>
28 |     <!-- built files will be auto injected -->
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/public/logo.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <main>
  4 |       <section class="player">
  5 |         <div class="cover-wrapper">
  6 |           <img v-bind:class="coverObject" :src="current.cover" />
  7 |         </div>
  8 |         <div class="song-details">
  9 |           <h2 class="song-title">
 10 |             {{ current.title }}
 11 |           </h2>
 12 |           <p class="artist">{{ current.artist }}</p>
 13 |           <KProgress
 14 |             :show-text="false"
 15 |             class="progress-bar-wrapper"
 16 |             v-bind:percent="current.percent"
 17 |             :color="['#df83f1', '#82279f', '#53cfe0']"
 18 |           />
 19 |           <div class="timer">
 20 |             <p class="start">{{ currentlyTimer }}</p>
 21 |             <p class="end">
 22 |               {{ current.totalTimer }}
 23 |             </p>
 24 |           </div>
 25 |         </div>
 26 |         <div class="controls">
 27 |           <button class="prev" @click="prev" v-if="songs.length > 1">
 28 |             <font-awesome-icon icon="step-backward" />
 29 |           </button>
 30 |           <button class="play" v-if="!isPlaying" @click="play">
 31 |             <font-awesome-icon icon="play" />
 32 |           </button>
 33 |           <button class="pause" v-else @click="pause">
 34 |             <font-awesome-icon icon="pause" />
 35 |           </button>
 36 |           <button class="next" @click="next" v-if="songs.length > 1">
 37 |             <font-awesome-icon icon="step-forward" />
 38 |           </button>
 39 |         </div>
 40 |         <div class="footer">
 41 |           <p>Powered by Soundcloud</p>
 42 |           <a
 43 |             href="https://github.com/Davigl/vue-music-player"
 44 |             alt="Give a Star"
 45 |             title="Give a Star"
 46 |           >
 47 |             <font-awesome-icon :icon="['fab', 'github']" />
 48 |           </a>
 49 |         </div>
 50 |       </section>
 51 |     </main>
 52 |     <section class="playlist">
 53 |       <h3>Now Playing <span> 🎵 </span></h3>
 54 |       <ul>
 55 |         <li v-for="song in songs" :key="song.src" class="song">
 56 |           <div class="cover-playlist">
 57 |             <img class="cover" :src="song.cover" />
 58 |           </div>
 59 |           <div class="details" @click="play(song)">
 60 |             <h2 class="song-title">
 61 |               {{ song.title }}
 62 |             </h2>
 63 |             <p class="artist">{{ song.artist }}</p>
 64 |             <KProgress
 65 |               v-if="song.isPlaying"
 66 |               :color="['#df83f1', '#82279f', '#53cfe0']"
 67 |               :show-text="false"
 68 |               class="progress-bar-wrapper"
 69 |               v-bind:percent="song.percent"
 70 |             />
 71 |           </div>
 72 |           <div class="actions">
 73 |             <button @click="removeSongFromPlaylist(song)" class="delete">
 74 |               <font-awesome-icon icon="times" />
 75 |             </button>
 76 |           </div>
 77 |         </li>
 78 |       </ul>
 79 |     </section>
 80 |   </div>
 81 | </template>
 82 | 
 83 | <script>
 84 | import KProgress from "k-progress";
 85 | 
 86 | import { formatTimer } from "./helpers/timer";
 87 | import { deleteElement, threatSongs, shuffleArray } from "./helpers/utils";
 88 | import songs from "./mocks/songs";
 89 | 
 90 | export default {
 91 |   components: { KProgress },
 92 |   name: "App",
 93 |   data() {
 94 |     return {
 95 |       current: {},
 96 |       coverObject: { cover: true, animated: false },
 97 |       index: 0,
 98 |       isPlaying: false,
 99 |       currentlyTimer: "00:00",
100 |       songs: shuffleArray(songs),
101 |       player: new Audio()
102 |     };
103 |   },
104 |   methods: {
105 |     listenersWhenPlay() {
106 |       this.player.addEventListener("timeupdate", () => {
107 |         var playerTimer = this.player.currentTime;
108 | 
109 |         this.currentlyTimer = formatTimer(playerTimer);
110 |         this.current.percent = (playerTimer * 100) / this.current.seconds;
111 |         this.current.isPlaying = true;
112 |       });
113 |       this.player.addEventListener(
114 |         "ended",
115 |         function() {
116 |           this.next();
117 |         }.bind(this)
118 |       );
119 |     },
120 |     setCover() {
121 |       this.coverObject.animated = true;
122 | 
123 |       setTimeout(() => {
124 |         this.coverObject.animated = false;
125 |       }, 1000);
126 |     },
127 |     setCurrentSong() {
128 |       this.current = this.songs[this.index];
129 |       this.play(this.current);
130 |       this.setCover();
131 |     },
132 |     play(song) {
133 |       if (typeof song.src !== "undefined") {
134 |         this.current.isPlaying = false;
135 |         this.index = this.songs.indexOf(this.current);
136 |         this.current = song;
137 |         this.player.src = this.current.src;
138 |       }
139 | 
140 |       this.player.play();
141 |       this.isPlaying = true;
142 | 
143 |       this.setCover();
144 |       this.listenersWhenPlay();
145 |     },
146 |     pause() {
147 |       this.player.pause();
148 |       this.isPlaying = false;
149 |     },
150 |     next() {
151 |       this.current.isPlaying = false;
152 |       this.index = this.songs.indexOf(this.current);
153 |       this.index++;
154 |       if (this.index > this.songs.length - 1) {
155 |         this.index = 0;
156 |       }
157 |       this.setCurrentSong();
158 |     },
159 |     prev() {
160 |       this.current.isPlaying = false;
161 |       this.index = this.songs.indexOf(this.current);
162 |       this.index--;
163 |       if (this.index < 0) {
164 |         this.index = this.songs.length - 1;
165 |       }
166 |       this.setCurrentSong();
167 |     },
168 |     removeSongFromPlaylist(song) {
169 |       if (this.songs.length > 1) {
170 |         if (this.index > 0) {
171 |           this.index--;
172 |         }
173 |         this.current.isPlaying = false;
174 |         this.songs = deleteElement(this.songs, song);
175 |         this.setCurrentSong();
176 |       }
177 |     }
178 |   },
179 |   mounted() {
180 |     this.songs = threatSongs(this.songs);
181 |     this.current = this.songs[this.index];
182 |     this.player.src = this.current.src;
183 |   }
184 | };
185 | </script>
186 | 
187 | <style>
188 | @import "./assets/styles/main.css";
189 | </style>
190 | 


--------------------------------------------------------------------------------
/src/assets/audios/Azealia Banks - Jumanji.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Azealia Banks - Jumanji.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Baby Metal - Gimme Chocolate.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Baby Metal - Gimme Chocolate.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Baby Metal - Karate.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Baby Metal - Karate.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Britney Spears - Pretty Girls.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Britney Spears - Pretty Girls.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Iggy Azalea - Kream (ft. Tyga).mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Iggy Azalea - Kream (ft. Tyga).mp3


--------------------------------------------------------------------------------
/src/assets/audios/Iggy Azalea - Started.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Iggy Azalea - Started.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Linn da Quebrada - MEnorme.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Linn da Quebrada - MEnorme.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Little Mix - Salute.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Little Mix - Salute.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Marina and the Diamonds - Lies.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Marina and the Diamonds - Lies.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Mc Tha - Oceano.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Mc Tha - Oceano.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Miley Cyrus - FU.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Miley Cyrus - FU.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Sia - Burn The Pages.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Sia - Burn The Pages.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Viktoria Modesta - Counterflow.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Viktoria Modesta - Counterflow.mp3


--------------------------------------------------------------------------------
/src/assets/audios/Wednesday Campanella - Shakushain.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/audios/Wednesday Campanella - Shakushain.mp3


--------------------------------------------------------------------------------
/src/assets/images/azealia banks - jumanji.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/azealia banks - jumanji.jpg


--------------------------------------------------------------------------------
/src/assets/images/baby metal - gimme chocolate.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/baby metal - gimme chocolate.jpg


--------------------------------------------------------------------------------
/src/assets/images/baby metal - karate.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/baby metal - karate.jpg


--------------------------------------------------------------------------------
/src/assets/images/britney spears - pretty girls.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/britney spears - pretty girls.jpg


--------------------------------------------------------------------------------
/src/assets/images/iggy azalea - kream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/iggy azalea - kream.jpg


--------------------------------------------------------------------------------
/src/assets/images/iggy azalea - started.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/iggy azalea - started.jpg


--------------------------------------------------------------------------------
/src/assets/images/linn da quebrada - menorme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/linn da quebrada - menorme.jpg


--------------------------------------------------------------------------------
/src/assets/images/little mix - salute.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/little mix - salute.jpg


--------------------------------------------------------------------------------
/src/assets/images/marina and the diamonds - lies.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/marina and the diamonds - lies.jpg


--------------------------------------------------------------------------------
/src/assets/images/mc tha - oceano.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/mc tha - oceano.jpg


--------------------------------------------------------------------------------
/src/assets/images/miley cyrus - fu.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/miley cyrus - fu.jpg


--------------------------------------------------------------------------------
/src/assets/images/sia - burn the pages.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/sia - burn the pages.jpg


--------------------------------------------------------------------------------
/src/assets/images/viktoria modesta - counterflow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/viktoria modesta - counterflow.jpg


--------------------------------------------------------------------------------
/src/assets/images/wednesday campanella - shakushain.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davigl/vue-music-player/HEAD/src/assets/images/wednesday campanella - shakushain.jpg


--------------------------------------------------------------------------------
/src/assets/styles/animations.css:
--------------------------------------------------------------------------------
 1 | @keyframes gradient {
 2 | 	0% {
 3 | 		background-position: 0% 50%;
 4 | 	}
 5 | 	50% {
 6 | 		background-position: 100% 50%;
 7 | 	}
 8 | 	100% {
 9 | 		background-position: 0% 50%;
10 | 	}
11 | }
12 | 
13 | @keyframes scale-up-center {
14 |   0% {
15 |     -webkit-transform: scale(0.5);
16 |             transform: scale(0.5);
17 |   }
18 |   100% {
19 |     -webkit-transform: scale(1);
20 |             transform: scale(1);
21 |   }
22 | }
23 | 
24 | @keyframes flip-in-hor-bottom {
25 |   0% {
26 |     -webkit-transform: rotateX(80deg);
27 |             transform: rotateX(80deg);
28 |     opacity: 0;
29 |   }
30 |   100% {
31 |     -webkit-transform: rotateX(0);
32 |             transform: rotateX(0);
33 |     opacity: 1;
34 |   }
35 | }
36 | 
37 | @keyframes appear-smoothly {
38 |   0% {
39 |     opacity: 0;
40 |   }
41 |   100% {
42 |     opacity: 1;
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/assets/styles/fonts.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');


--------------------------------------------------------------------------------
/src/assets/styles/main.css:
--------------------------------------------------------------------------------
  1 | @import './animations.css';
  2 | @import './fonts.css';
  3 | 
  4 | * {
  5 |   box-sizing: border-box;
  6 |   user-select: none;
  7 |   overflow-wrap: break-word;
  8 |   margin: 0px;
  9 |   padding: 0px;
 10 | }
 11 | 
 12 | ::-webkit-scrollbar-track
 13 | {
 14 | 	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 15 | 	background-color: #F5F5F5;
 16 | }
 17 | 
 18 | ::-webkit-scrollbar
 19 | {
 20 | 	width: 10px;
 21 | 	background-color: #F5F5F5;
 22 | }
 23 | 
 24 | ::-webkit-scrollbar-thumb
 25 | {
 26 | 	background-color: #ba83ca;	
 27 | 	background-image: -webkit-linear-gradient(45deg,
 28 | 	                                          rgba(255, 255, 255, .2) 25%,
 29 | 											  transparent 25%,
 30 | 											  transparent 50%,
 31 | 											  rgba(255, 255, 255, .2) 50%,
 32 | 											  rgba(255, 255, 255, .2) 75%,
 33 | 											  transparent 75%,
 34 | 											  transparent)
 35 | }
 36 | 
 37 | ul {
 38 |   list-style: none;
 39 | }
 40 | 
 41 | body {
 42 |   display: flex;
 43 |   align-items: center;
 44 |   justify-content: center;
 45 |   min-height: 100vh;
 46 |   font-family: Lato, sans-serif;
 47 |   background: rgb(223,131,241);
 48 |   background: linear-gradient(90deg, rgba(223,131,241,1) 0%, rgba(130,39,159,1) 35%, rgba(83,207,224,1) 100%);
 49 |   background-size: 400% 400%;
 50 |   animation: gradient 15s ease infinite;
 51 |   -webkit-font-smoothing: antialiased;
 52 | }
 53 | 
 54 | main {
 55 |   display: flex;
 56 |   flex-direction: column;
 57 |   flex-wrap: nowrap;
 58 |   width: 100%;
 59 |   max-width: 375px;
 60 |   max-height: 623px;
 61 |   margin: 0 auto;
 62 |   padding: 25px;
 63 |   background-color: #fff;
 64 |   border-radius: 15px;
 65 |   animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 66 | }
 67 | 
 68 | button {
 69 |   appearance: none;
 70 |   background: none;
 71 |   border: none;
 72 |   outline: none;
 73 |   cursor: pointer;
 74 | }
 75 | 
 76 | button:hover {
 77 |   opacity: 0.8;
 78 |   transform: scale(1.1);
 79 | }
 80 | 
 81 | .song-details {
 82 |   margin-top: 25px;
 83 | }
 84 | 
 85 | .cover-playlist {
 86 |   height: 50px;
 87 |   width: 50px;
 88 | }
 89 | 
 90 | .cover-wrapper {
 91 |   width: 100%;
 92 |   margin-top: 30px;
 93 |   height: 270px;
 94 |   text-align: center;
 95 | }
 96 | 
 97 | .animated {
 98 |   animation: appear-smoothly 1s normal both;
 99 |   transition: all 0.3s; 
100 | }
101 | 
102 | .cover {
103 |   height: 100%;
104 |   width: 270px;
105 |   box-shadow: 0 24px 35px -16px rgba(107,179,237,.5);
106 |   border-radius: 5px;
107 | }
108 | 
109 | .cover-playlist > .cover {
110 |   margin-right: 15px;
111 |   width: 50px;
112 | }
113 | 
114 | .song-title {
115 |   width: 100%;
116 |   color: #53565a;
117 |   font-size: 1.13em;
118 |   text-align: center;
119 |   margin-bottom: 5px;
120 | }
121 | 
122 | .artist {
123 |   font-family: Muli;
124 |   width: 100%;
125 |   font-weight: 400;
126 |   text-align: center;
127 | }
128 | 
129 | .details {
130 |   margin-left: 10px;
131 |   width: 100%;
132 | }
133 | 
134 | .details > .song-title {
135 |   color: #585858;
136 |   font-size: inherit;
137 |   text-align: left;
138 | }
139 | 
140 | .details > .artist {
141 |   color: #5d5555;
142 |   text-align: left;
143 | }
144 | 
145 | .controls {
146 |   display: flex;
147 |   justify-content: center;
148 |   align-items: center;
149 |   padding: 20px 15px;
150 | }
151 | 
152 | .play,
153 | .pause {
154 |   background-image: linear-gradient(to right top,#d16ba5,#c777b9,#ba83ca,#aa8fd8,#9a9ae1,#8aa7ec,#79b3f4,#69bff8,#52cffe,#41dfff,#46eefa,#5ffbf1);
155 |   border-radius: 50%;
156 |   width: 80px;
157 |   height: 80px;
158 |   justify-content: center;
159 |   box-shadow: -1px 17px 24px -6px rgba(0,0,0,.2);
160 |   cursor: pointer;
161 |   font-size: 25px;
162 |   color: #fff;
163 |   margin-left: 20px;
164 |   margin-right: 20px;
165 | }
166 | 
167 | .next,
168 | .prev {
169 |   border: 0;
170 |   border-radius: 50%;
171 |   font-size: 20px;
172 |   width: 50px;
173 |   height: 50px;
174 |   display: flex;
175 |   justify-content: center;
176 |   align-items: center;
177 |   cursor: pointer;
178 |   background-color: rgba(0,0,0,.09);
179 |   color: #fff;
180 |   transition: background-color .2s;
181 |   position: relative;
182 | }
183 | 
184 | .playlist {
185 |   background-color: #fff;
186 |   overflow-y: auto;
187 |   max-height: 622px;
188 |   border-radius: 5px;
189 | }
190 | 
191 | .playlist h3 {
192 |   color: #212121;
193 |   font-size: 18px;
194 |   font-weight: 400;
195 |   margin-top: 20px;
196 |   margin-bottom: 20px;
197 |   text-align: center;
198 | }
199 | 
200 | .playlist .song {
201 |   display: flex;
202 |   padding: 10px;
203 | }
204 | 
205 | .actions > .delete {
206 |   border-radius: 50%;
207 |   width: 40px;
208 |   height: 40px;
209 |   justify-content: center;
210 |   box-shadow: -1px 17px 24px -6px rgba(0,0,0,.2);
211 |   cursor: pointer;
212 |   font-size: 20px;
213 |   color: #ba83ca;
214 | }
215 | 
216 | .playlist .song:hover {
217 |   background-color: #ededed;
218 |   transition: box-shadow .2s,background-color .3s;
219 | }
220 | 
221 | .timer {
222 |   display: flex;
223 |   width: 100%;
224 |   justify-content: space-between;
225 |   padding: 10px;
226 | }
227 | 
228 | .k-progress-outer {
229 |   margin-top: 15px !important;
230 |   padding-right: 0 !important;
231 | }
232 | 
233 | .footer {
234 |   display: flex;
235 |   justify-content: space-between;
236 |   font-size: 10px;
237 | }
238 | 
239 | .footer > a {
240 |   cursor: pointer;
241 |   color: #d4d4d4;
242 |   position: relative;
243 |   top: -10px;
244 |   font-size: 25px;
245 | }
246 | 
247 | #app {
248 |   display: grid;
249 |   gap: 1rem;
250 |   grid-template-columns: 1fr 1fr;
251 |   padding: 20px;
252 | }
253 | 
254 | @media (max-width: 768px) {
255 |   #app {
256 |     grid-template-columns: 1fr;
257 |   }
258 | 
259 |   body {
260 |     height: 100%;
261 |     margin-top: 10px;
262 |   }
263 | 
264 |   .playlist {
265 |     max-height: 200px;
266 |   }
267 | }


--------------------------------------------------------------------------------
/src/helpers/timer.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Format seconds into a string minutes:seconds
 3 |  * @param {integer} seconds
 4 |  */
 5 | 
 6 | const formatTimer = seconds => {
 7 |   let minutes = parseInt(seconds / 60).toString();
 8 |   seconds = parseInt(seconds % 60).toString();
 9 | 
10 |   let output = minutes >= 10 ? `${minutes}` : `0${minutes}`;
11 |   output += seconds >= 10 ? `:${seconds}` : `:0${seconds}`;
12 | 
13 |   return output;
14 | };
15 | 
16 | export { formatTimer };
17 | 


--------------------------------------------------------------------------------
/src/helpers/utils.js:
--------------------------------------------------------------------------------
 1 | import { formatTimer } from "./timer";
 2 | 
 3 | /**
 4 |  * Remove a target object from array
 5 |  * @param {array} array
 6 |  * @param {object} target
 7 |  */
 8 | 
 9 | const deleteElement = (array, target) => {
10 |   return array.filter(item => {
11 |     return item != target;
12 |   });
13 | };
14 | 
15 | /**
16 |  * Insert initial songs params
17 |  * @param {array} songs
18 |  */
19 | 
20 | const threatSongs = songs => {
21 |   return songs.map(song => {
22 |     song["isPlaying"] = false;
23 |     song["percent"] = 0;
24 |     song["currentlyTimer"] = "00:00";
25 |     song["totalTimer"] = formatTimer(song.seconds);
26 | 
27 |     return song;
28 |   });
29 | };
30 | 
31 | /**
32 |  * Shuffle songs.
33 |  * @param {array} array
34 |  */
35 | 
36 | function shuffleArray(array) {
37 |   for (let i = array.length - 1; i > 0; i--) {
38 |     const j = Math.floor(Math.random() * (i + 1));
39 |     [array[i], array[j]] = [array[j], array[i]];
40 |   }
41 | 
42 |   return array;
43 | }
44 | 
45 | export { deleteElement, threatSongs, shuffleArray };
46 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import { library } from "@fortawesome/fontawesome-svg-core";
 4 | import {
 5 |   faPlay,
 6 |   faPause,
 7 |   faStepForward,
 8 |   faStepBackward,
 9 |   faTimes
10 | } from "@fortawesome/free-solid-svg-icons";
11 | import { faGithub } from "@fortawesome/free-brands-svg-icons";
12 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
13 | 
14 | library.add(faPlay, faPause, faStepForward, faStepBackward, faTimes, faGithub);
15 | 
16 | Vue.component("font-awesome-icon", FontAwesomeIcon);
17 | 
18 | Vue.config.productionTip = false;
19 | 
20 | new Vue({
21 |   render: h => h(App)
22 | }).$mount("#app");
23 | 


--------------------------------------------------------------------------------
/src/mocks/songs.js:
--------------------------------------------------------------------------------
  1 | const songs = [
  2 |   {
  3 |     title: "MEnorme",
  4 |     artist: "Linn da Quebrada",
  5 |     seconds: 244,
  6 |     cover: require("../assets/images/linn da quebrada - menorme.jpg"),
  7 |     src: require("../assets/audios/Linn da Quebrada - MEnorme.mp3")
  8 |   },
  9 |   {
 10 |     title: "Oceano",
 11 |     artist: "Mc Tha",
 12 |     seconds: 128,
 13 |     cover: require("../assets/images/mc tha - oceano.jpg"),
 14 |     src: require("../assets/audios/Mc Tha - Oceano.mp3")
 15 |   },
 16 |   {
 17 |     title: "FU",
 18 |     artist: "Miley Cyrus",
 19 |     seconds: 229,
 20 |     cover: require("../assets/images/miley cyrus - fu.jpg"),
 21 |     src: require("../assets/audios/Miley Cyrus - FU.mp3")
 22 |   },
 23 |   {
 24 |     title: "Counterflow",
 25 |     artist: "Viktoria Modesta",
 26 |     seconds: 204,
 27 |     cover: require("../assets/images/viktoria modesta - counterflow.jpg"),
 28 |     src: require("../assets/audios/Viktoria Modesta - Counterflow.mp3")
 29 |   },
 30 |   {
 31 |     title: "Shakushain",
 32 |     artist: "Wednesday Campanella",
 33 |     seconds: 219,
 34 |     cover: require("../assets/images/wednesday campanella - shakushain.jpg"),
 35 |     src: require("../assets/audios/Wednesday Campanella - Shakushain.mp3")
 36 |   },
 37 |   {
 38 |     title: "Gimme Chocolate",
 39 |     artist: "Baby Metal",
 40 |     seconds: 243,
 41 |     cover: require("../assets/images/baby metal - gimme chocolate.jpg"),
 42 |     src: require("../assets/audios/Baby Metal - Gimme Chocolate.mp3")
 43 |   },
 44 |   {
 45 |     title: "Karate",
 46 |     artist: "Baby Metal",
 47 |     seconds: 270,
 48 |     cover: require("../assets/images/baby metal - karate.jpg"),
 49 |     src: require("../assets/audios/Baby Metal - Karate.mp3")
 50 |   },
 51 |   {
 52 |     title: "Kream (Ft. Tyga) [Remix]",
 53 |     artist: "Iggy Azalea",
 54 |     seconds: 150,
 55 |     cover: require("../assets/images/iggy azalea - kream.jpg"),
 56 |     src: require("../assets/audios/Iggy Azalea - Kream (ft. Tyga).mp3")
 57 |   },
 58 |   {
 59 |     title: "Started",
 60 |     artist: "Iggy Azalea",
 61 |     seconds: 186,
 62 |     cover: require("../assets/images/iggy azalea - started.jpg"),
 63 |     src: require("../assets/audios/Iggy Azalea - Started.mp3")
 64 |   },
 65 |   {
 66 |     title: "Burn the Pages",
 67 |     artist: "Sia",
 68 |     seconds: 235,
 69 |     cover: require("../assets/images/sia - burn the pages.jpg"),
 70 |     src: require("../assets/audios/Sia - Burn The Pages.mp3")
 71 |   },
 72 |   {
 73 |     title: "Jumanji",
 74 |     artist: "Azealia Banks",
 75 |     seconds: 174,
 76 |     cover: require("../assets/images/azealia banks - jumanji.jpg"),
 77 |     src: require("../assets/audios/Azealia Banks - Jumanji.mp3")
 78 |   },
 79 |   {
 80 |     title: "Pretty Girls",
 81 |     artist: "Britney Spears",
 82 |     seconds: 164,
 83 |     cover: require("../assets/images/britney spears - pretty girls.jpg"),
 84 |     src: require("../assets/audios/Britney Spears - Pretty Girls.mp3")
 85 |   },
 86 |   {
 87 |     title: "Salute (TroyBoi Remix)",
 88 |     artist: "Little Mix",
 89 |     seconds: 251,
 90 |     cover: require("../assets/images/little mix - salute.jpg"),
 91 |     src: require("../assets/audios/Little Mix - Salute.mp3")
 92 |   },
 93 |   {
 94 |     title: "Lies",
 95 |     artist: "Marina and the Diamonds",
 96 |     seconds: 368,
 97 |     cover: require("../assets/images/marina and the diamonds - lies.jpg"),
 98 |     src: require("../assets/audios/Marina and the Diamonds - Lies.mp3")
 99 |   }
100 | ];
101 | 
102 | export default songs;
103 | 


--------------------------------------------------------------------------------
/src/services/api.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | 
3 | const api = axios.create({
4 |   baseURL: "http://192.168.0.9:1212"
5 | });
6 | 
7 | export default api;
8 | 


--------------------------------------------------------------------------------