usrbinomarbash · usrbinomarbash · Apr 22, 2021 · Apr 22, 2021
diff --git a/Projects/musicapp/.gitignore b/Projects/musicapp/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Projects/musicapp/README.md b/Projects/musicapp/README.md
@@ -0,0 +1,24 @@
+# musicapp
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/Projects/musicapp/babel.config.js b/Projects/musicapp/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/Projects/musicapp/package-lock.json b/Projects/musicapp/package-lock.json
diff --git a/Projects/musicapp/package.json b/Projects/musicapp/package.json
@@ -0,0 +1,42 @@
+{
+ "name": "musicapp",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^2.6.11"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^6.2.2",
+ "vue-template-compiler": "^2.6.11"
+ },
+ "eslintConfig": {
+ "root": true,
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "plugin:vue/essential",
+ "eslint:recommended"
+ ],
+ "parserOptions": {
+ "parser": "babel-eslint"
+ },
+ "rules": {}
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "not dead"
+ ]
+}
diff --git a/Projects/musicapp/public/favicon.ico b/Projects/musicapp/public/favicon.ico
diff --git a/Projects/musicapp/public/index.html b/Projects/musicapp/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/Projects/musicapp/src/App.vue b/Projects/musicapp/src/App.vue
@@ -0,0 +1,239 @@
+<template>
+ <div id="app">
+ <header>
+ <h1>My Music</h1>
+ </header>
+ <main>
+
+ <section>
+ <h2 class="song-title">
+ {{ current.title }} -
+ <span>{{ current.artist }} </span>
+ </h2>
+ {{/*creating some controls*/}}
+ <div class="controls">
+ <button class="prev" @click="previous">Previous</button>
+ <button class="play" v-if="!isPlaying" @click="play">Play</button>
+ <button class="pause" v-else @click="pause">Pause</button>
+ <button class="next" @click="next">Next</button>
+ </div>
+ </section>
+ <section class="playlist">
+ <h3>My Playlist</h3>
+ <button v-for="mysong in songs" :key="mysong.src" @click="play(mysong)" :class="(mysong.src == current.src) ? 'song playing': 'song' ">
+ {{ mysong.title }} - {{ mysong.artist }}
+ </button>
+ </section>
+ </main>
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: 'App',
+ data() {
+ //returning an object of my state aka this is the same thing in react as useState hook
+ return{
+ current: {},
+ index: 0,
+ isPlaying: false,
+ songs: [
+ {
+ title: 'D.U.C.',
+ artist: 'Booba',
+ src: require('./assets/duc.mp3')
+ },
+ {
+ title: 'Overdrive',
+ artist: 'Hippie Sabotage',
+ src: require('./assets/overdrive.mp3')
+ },
+ {
+ title: 'Rodeo',
+ artist: 'Lil Nas X',
+ src: require('./assets/rodeo.mp3')
+ }
+
+ ],
+ player: new Audio()
+ }
+ },
+ methods: {
+ play(mysong){
+ if(typeof mysong.src != "undefined")
+ {
+ this.current = mysong;
+
+ this.player.src= this.current.src;
+ }
+ this.player.play();
+ this.player.addEventListener('ended', function(){
+ this.index++;
+
+
+ if(this.index > this.songs.length - 1 ){
+ this.index = 0;
+ }
+
+ this.current = this.songs[this.index];
+
+ this.play(this.current);
+ }.bind(this));
+ this.isPlaying = true;
+
+ },
+
+ pause(){
+ this.player.pause();
+ this.isPlaying = false;
+ },
+
+ next(){
+ this.index++;
+
+ if(this.index > this.songs.length - 1 ){
+ this.index = 0;
+ }
+
+ this.current = this.songs[this.index];
+
+ this.play(this.current);
+ },
+ previous(){
+ this.index--;
+
+ if(this.index < 0){
+ this.index = this.songs.length -1;
+ }
+
+ this.current = this.songs[this.index];
+
+ this.play(this.current);
+ }
+ },
+ created(){
+ this.current = this.songs[this.index];
+ this.player.src = this.current.src;
+ this.player.play();
+ }
+}
+</script>
+
+<style>
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+p{
+ font-family: sans-serif;
+}
+/*
+button{
+ border-radius:10px;
+ padding: 2px;
+ margin: 4px;
+}
+*/
+
+
+
+.song-title{
+ color: #212121;
+ font-size: 32px;
+ font-weight: 700;
+ text-transform: uppercase;
+ text-align: center;
+}
+
+.song-title span{
+ font-weight: 400;
+ font-style: italic
+}
+
+.controls{
+ display: flex;
+ justify-content: center;
+ padding: 30px 15px;
+ align-items: center;
+}
+
+header{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 15px;
+ background-color: #212121;
+ color: #FFF; 
+}
+
+main{
+ width: 100%;
+ max-width: 768px; 
+ padding: 25px;
+}
+
+button{
+ appearance: none;
+ background: none;
+ border: none;
+ outline: none;
+ cursor: pointer;
+}
+
+.play, .pause{
+ font-weight: 700;
+ font-size: 20px;
+ padding: 15px 25px;
+ margin: 0px 15px;
+ border-radius: 8px;
+ color: blue;
+ background-color: #CC2E5D;
+}
+
+.next, .prev{
+ font-weight: 700;
+ font-size: 16px;
+ padding: 10px 20px;
+ margin: 0px 15px;
+ border-radius: 8px;
+ color: blue;
+ background-color: #1fbb50;
+}
+
+.playlist{
+ padding: 0px 30px;
+}
+
+.playlist h3{
+ color: #212121;
+ font-size: 28px;
+ font-weight: 400;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+.playlist .song{
+ display: block; /*from crammed to every song on one line*/
+ width: 100%;
+ padding: 15px;
+ font-size: 20px;
+ font-weight: 700;
+ cursor:pointer;
+}
+
+.playlist .song:hover{
+ color: #FF5858;
+}
+
+.playlist .song .playing{
+ color: #FFF;
+ background-image: linear-gradient(to right, #000046, #1cb5e0);
+}
+
+button:hover{
+ opacity: 0.8;
+}
+</style>
diff --git a/Projects/musicapp/src/assets/duc.mp3 b/Projects/musicapp/src/assets/duc.mp3
diff --git a/Projects/musicapp/src/assets/logo.png b/Projects/musicapp/src/assets/logo.png
diff --git a/Projects/musicapp/src/assets/overdrive.mp3 b/Projects/musicapp/src/assets/overdrive.mp3
diff --git a/Projects/musicapp/src/assets/rodeo.mp3 b/Projects/musicapp/src/assets/rodeo.mp3