From fc3eaba39cb4ccdacd7dc12bc210777d671d8867 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Tue, 30 Jul 2019 22:28:37 +0430
Subject: [PATCH 1/8] Made MusicRow scrollbar hidden

---
 src/renderer/layouts/MusicRow.vue              | 2 ++
 src/renderer/utility/HorizontalScrollPlugin.js | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
index f1d6683..fd1e0ae 100644
--- a/src/renderer/layouts/MusicRow.vue
+++ b/src/renderer/layouts/MusicRow.vue
@@ -36,4 +36,6 @@ section.music-row
       overflow: visible !important
     .scroll-content
         display: flex
+    .scrollbar-thumb,.scrollbar-track
+      display: none !important
 </style>
diff --git a/src/renderer/utility/HorizontalScrollPlugin.js b/src/renderer/utility/HorizontalScrollPlugin.js
index 7c96166..4c5bf71 100644
--- a/src/renderer/utility/HorizontalScrollPlugin.js
+++ b/src/renderer/utility/HorizontalScrollPlugin.js
@@ -3,6 +3,7 @@ import Scrollbar from 'smooth-scrollbar'
 export default class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {
     static pluginName = 'horizontalScroll';
     transformDelta (delta, fromEvent) {
+      console.log(fromEvent.type)
       if (!/wheel/.test(fromEvent.type)) {
         return delta
       }

From f9647294781e0d9932550472625c37723a9dd889 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Tue, 30 Jul 2019 22:30:25 +0430
Subject: [PATCH 2/8] Made images not clickable nor selectable by default

---
 src/renderer/App.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 5fd81c2..4066456 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -48,6 +48,15 @@ $lato-font-path: '/node_modules/lato-font/fonts'
     flex-grow: 1
     overflow-x: hidden
     transition: padding-top 300ms
+
+img
+  user-drag: none 
+  user-select: none
+  -moz-user-select: none
+  -webkit-user-drag: none
+  -webkit-user-select: none
+  -ms-user-select: none
+  
 @media(max-width: 800px)
   .page
     padding-top: 64px

From 8c0eebe51541cd3fd598278e888e39b719adaea2 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Tue, 30 Jul 2019 22:40:12 +0430
Subject: [PATCH 3/8] Fixed scroll issue of recommended musicrow

---
 src/renderer/layouts/HomePage.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 7590ac8..81b6b1d 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -272,7 +272,10 @@ section.page
     display: flex
 
   .grow-half
-    flex: 1 0 50% // deviding the space equally between two element
+    flex: 1 0 50% 
+    max-width: 50%
+    &.recommend
+      max-width: 30%
 
 .favourite
   background: white

From 8766dc6642153d2fda7fd1c4f4db97f56242c2f9 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Tue, 30 Jul 2019 22:43:37 +0430
Subject: [PATCH 4/8] Created Dialog component

---
 src/renderer/components/Dialog.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/renderer/components/Dialog.vue

diff --git a/src/renderer/components/Dialog.vue b/src/renderer/components/Dialog.vue
new file mode 100644
index 0000000..00adcc0
--- /dev/null
+++ b/src/renderer/components/Dialog.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="dialog" :class="{'open' : open}">
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Dialog'
+}
+</script>
+
+<style scoped lang="sass">
+.dialog
+    display: block
+</style>

From 171fbaba5a352e77bceb0dbffc7ab37af5443a93 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Tue, 30 Jul 2019 22:44:47 +0430
Subject: [PATCH 5/8] Added baseline of Dialog component

---
 src/renderer/components/Dialog.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/Dialog.vue b/src/renderer/components/Dialog.vue
index 00adcc0..b529d0a 100644
--- a/src/renderer/components/Dialog.vue
+++ b/src/renderer/components/Dialog.vue
@@ -1,12 +1,18 @@
 <template>
-    <div class="dialog" :class="{'open' : open}">
+    <div class="dialog-wrapper" :class="{'open' : open}">
+        <div class="overlay">
 
+        </div>
+        <div class="dialog">
+
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-    name: 'Dialog'
+    name: 'Dialog',
+    props: ['open']
 }
 </script>
 

From 165913ecf37a9eb9b6707acdff88b96697c67588 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Tue, 30 Jul 2019 22:53:01 +0430
Subject: [PATCH 6/8] Added viewmode button to playerbar

---
 src/renderer/layouts/PlayerBar.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 09cd312..b7ebf33 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -28,6 +28,9 @@
             <IconButton variant="contained">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
             </IconButton>
+            <IconButton variant="contained">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+            </IconButton>
         </div>
     </section>
 </template>

From 46e66675f67053183f5ed29f359fab519d950117 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Tue, 30 Jul 2019 22:56:06 +0430
Subject: [PATCH 7/8] Added playerbar fullscreen functionality

---
 src/renderer/layouts/HomePage.vue  |  2 +-
 src/renderer/layouts/PlayerBar.vue | 25 ++++++++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 81b6b1d..55d5b26 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -1,5 +1,5 @@
 <template>
-      <section class="wtf">
+      <section>
         <ActionBar class="action-bar" />
         <div class="upper-row" >
           <MusicRow :items='items' title="Top rated" />
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index b7ebf33..c5af1f7 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="player">
+    <section class="player" :class="{'fullscreen' : isFullscreen}">
         <img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
         <div>
             <p class="title">Yellow</p>
@@ -28,7 +28,7 @@
             <IconButton variant="contained">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
             </IconButton>
-            <IconButton variant="contained">
+            <IconButton variant="contained" :click="toggleFullscreen">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
             </IconButton>
         </div>
@@ -44,6 +44,14 @@ import IconButton from '../components/IconButton'
 export default {
   name: 'PlayerBar',
   components: { IconButton },
+  data () {
+    return {
+      playingStatus: false,
+      isFavorited: false,
+      duration: '00:00',
+      isFullscreen: false
+    }
+  },
   mounted () {
     let progress = this.$el.getElementsByClassName('progress')[0]
     this.wavesurfer = WaveSurfer.create({
@@ -114,13 +122,6 @@ export default {
       currentWidth = progressWave.style.width
     })
   },
-  data () {
-    return {
-      playingStatus: false,
-      isFavorited: false,
-      duration: '00:00'
-    }
-  },
   methods: {
     onArtworkLoad () {
       let img = this.$el.getElementsByTagName('img')[0]
@@ -189,6 +190,12 @@ export default {
     },
     toggleFavorite () {
       this.isFavorited = !this.isFavorited
+    },
+    setFullscreen (state) {
+      this.isFullscreen = state
+    },
+    toggleFullscreen () {
+      this.setFullscreen(!this.isFullscreen)
     }
   }
 }

From 2a96cda6df939f91e4a91a6883bfdc329face180 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Tue, 30 Jul 2019 23:14:44 +0430
Subject: [PATCH 8/8] Moved fullscreen functionality to player state and made
 other components react according fullscreen state

---
 src/renderer/App.vue                     | 10 ++++++---
 src/renderer/layouts/DockableSidebar.vue | 15 ++++++++++----
 src/renderer/layouts/PlayerBar.vue       | 22 ++++++++++++--------
 src/renderer/store/modules/Player.js     | 26 ++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 16 deletions(-)
 create mode 100644 src/renderer/store/modules/Player.js

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 4066456..d4852a5 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -2,7 +2,7 @@
   <div id="app" class="root">
     <DockableSidebar />
     <div class="page-wrapper">
-      <router-view class="page"></router-view>
+      <router-view class="page" :class="{'fullscreen' : fullscreenStatus}"></router-view>
       <PlayerBar class="player-bar" />
     </div>
   </div>
@@ -11,10 +11,12 @@
 <script>
 import DockableSidebar from './layouts/DockableSidebar'
 import PlayerBar from './layouts/PlayerBar'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'jukebox',
-  components: { DockableSidebar, PlayerBar }
+  components: { DockableSidebar, PlayerBar },
+  computed: mapGetters(['fullscreenStatus'])
 }
 </script>
 
@@ -56,8 +58,10 @@ img
   -webkit-user-drag: none
   -webkit-user-select: none
   -ms-user-select: none
-  
+
 @media(max-width: 800px)
   .page
     padding-top: 64px
+    &.fullscreen
+      padding-top: 0px
 </style>
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index bc1a055..8a6307c 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <section class="handle" :class="{'open': menuStatus === true}">
+        <section class="handle" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}">
             <div @click="toggleMenuStatus" class="icon">
                 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
                     <g>
@@ -16,8 +16,8 @@
             </div>
             <Logo :nopadding="true"/>
         </section>
-        <section class="overlay" :class="{'open': menuStatus === true}"  @click="toggleMenuStatus" />
-            <section class="sidebar" :class="{'open': menuStatus === true}">
+        <section class="overlay" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}"  @click="toggleMenuStatus" />
+            <section class="sidebar" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}">
                 <div class="logo-wrapper">
                     <Logo class="logo" />
                 </div>
@@ -142,7 +142,7 @@ export default {
   methods: {
     ...mapActions(['toggleMenuStatus'])
   },
-  computed: mapGetters(['menuStatus'])
+  computed: mapGetters(['menuStatus', 'fullscreenStatus'])
 }
 </script>
 
@@ -208,6 +208,13 @@ section.sidebar
         min-height: 48px
         .icon
             display: none
+    &.fullscreen
+        transform: translateX(-100%)
+        overflow-y: hidden
+        z-index: 1200
+        position: absolute
+        left: 0
+        top: 0
     &.open
         transform: translateX(0%)
         padding: 1rem 0rem 0rem 1rem
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index c5af1f7..09ef395 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="player" :class="{'fullscreen' : isFullscreen}">
+    <section class="player" :class="{'fullscreen' : fullscreenStatus}">
         <img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
         <div>
             <p class="title">Yellow</p>
@@ -28,7 +28,7 @@
             <IconButton variant="contained">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
             </IconButton>
-            <IconButton variant="contained" :click="toggleFullscreen">
+            <IconButton variant="contained" :click="toggleFullscreenStatus">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
             </IconButton>
         </div>
@@ -41,6 +41,8 @@ import minimap from 'wavesurfer.js/dist/plugin/wavesurfer.minimap'
 import color from 'dominant-color'
 import { formatSeconds } from '../utility/DateTime'
 import IconButton from '../components/IconButton'
+import { mapActions, mapGetters } from 'vuex'
+
 export default {
   name: 'PlayerBar',
   components: { IconButton },
@@ -52,6 +54,7 @@ export default {
       isFullscreen: false
     }
   },
+  computed: mapGetters(['fullscreenStatus']),
   mounted () {
     let progress = this.$el.getElementsByClassName('progress')[0]
     this.wavesurfer = WaveSurfer.create({
@@ -191,12 +194,7 @@ export default {
     toggleFavorite () {
       this.isFavorited = !this.isFavorited
     },
-    setFullscreen (state) {
-      this.isFullscreen = state
-    },
-    toggleFullscreen () {
-      this.setFullscreen(!this.isFullscreen)
-    }
+    ...mapActions(['toggleFullscreenStatus'])
   }
 }
 </script>
@@ -207,7 +205,13 @@ section.player
     align-items: center
     border-top: 1px solid rgba(0,0,0,0.1)
     height: 4.5rem
+    background-color: white
     min-height: 4.5rem
+    transition: height 500ms ease, min-height 500ms ease, width 500ms ease
+    &.fullscreen
+      height: 100vh
+      min-height: 100vh
+      z-index: 1300
     .control-buttons
       span
         margin: 0 0.2rem
@@ -231,7 +235,7 @@ section.player
           top: 0
           bottom: 0
           margin: auto
-          transition: height 500ms ease
+          transition: height 500ms ease ease
           height: 0px
           width: 100%
           z-index: 
diff --git a/src/renderer/store/modules/Player.js b/src/renderer/store/modules/Player.js
new file mode 100644
index 0000000..7c1f541
--- /dev/null
+++ b/src/renderer/store/modules/Player.js
@@ -0,0 +1,26 @@
+const state = {
+  fullscreen_mode: false
+}
+
+const getters = {
+  fullscreenStatus: (state) => state.fullscreen_mode
+}
+
+const mutations = {
+  TOGGLE_FULLSCREEN (state) {
+    state.fullscreen_mode = !state.fullscreen_mode
+  }
+}
+
+const actions = {
+  toggleFullscreenStatus ({ commit }) {
+    commit('TOGGLE_FULLSCREEN')
+  }
+}
+
+export default {
+  actions,
+  state,
+  mutations,
+  getters
+}