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] 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)
     }
   }
 }