From 9e8f972e93e6056b21b08a134ae07bf6164a96c1 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 3 Dec 2021 14:01:10 -0800
Subject: [PATCH] added vue transitions, added recent radio stations

---
 resources/cider-ui-tests/index.html | 144 ++++++++++++++++++----------
 resources/cider-ui-tests/index.js   |  12 ++-
 resources/cider-ui-tests/style.css  |   9 +-
 3 files changed, 110 insertions(+), 55 deletions(-)

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 479abd58..d424087d 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -31,7 +31,8 @@
                     <div class="app-title"></div>
                 </div>
                 <div class="app-chrome-item">
-                    <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" @click="mk.shuffleMode = 1"></button>
+                    <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
+                            @click="mk.shuffleMode = 1"></button>
                     <button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
                 </div>
                 <div class="app-chrome-item">
@@ -45,9 +46,12 @@
                     <button class="playback-button next" @click="mk.skipToNextItem()"></button>
                 </div>
                 <div class="app-chrome-item">
-                    <button class="playback-button--small repeat" v-if="mk.repeatMode == 0" @click="mk.repeatMode = 1"></button>
-                    <button class="playback-button--small repeat active" @click="mk.repeatMode = 2" v-else-if="mk.repeatMode == 1"></button>
-                    <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></button>
+                    <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
+                            @click="mk.repeatMode = 1"></button>
+                    <button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
+                            v-else-if="mk.repeatMode == 1"></button>
+                    <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
+                            v-else-if="mk.repeatMode == 2"></button>
                 </div>
             </div>
             <div class="app-chrome--center">
@@ -126,7 +130,7 @@
                     </div>
                     <sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
                     <sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
-                    <sidebar-library-item name="Radio" page="Radio"></sidebar-library-item>
+                    <sidebar-library-item name="Radio" page="radio"></sidebar-library-item>
                     <div class="app-sidebar-header-text">
                         Library
                     </div>
@@ -153,62 +157,95 @@
             </div>
             <div id="app-content">
                 <!-- Browse -->
+                <transition name="wpfade">
                     <template v-if="page == 'browse'">
-                        <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
-                        <button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">Stop MusicKit</button>
-                        <br>
-                        <template v-if="mk.nowPlayingItem">
-                            currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
+                        <div class="content-inner">
+                            <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start MusicKit
+                            </button>
+                            <button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">Stop
+                                MusicKit
+                            </button>
                             <br>
-                            currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
-                        </template>
-                        <div><input type="text" v-model="quickPlayQuery">
-                            <button @click="quickPlay(quickPlayQuery)">Play</button>
-                        </div>
-                        <h1 class="header-text">Browse</h1>
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
-                            consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
-                        </p>
-                        <div class="media-item--small">
-                            <div class="artwork">
+                            <template v-if="mk.nowPlayingItem">
+                                currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
+                                <br>
+                                currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
+                            </template>
+                            <div><input type="text" v-model="quickPlayQuery">
+                                <button @click="quickPlay(quickPlayQuery)">Play</button>
+                            </div>
+                            <h1 class="header-text">Browse</h1>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
+                                consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
+                            </p>
+                            <div class="media-item--small">
+                                <div class="artwork">
 
+                                </div>
+                                <div class="text">
+                                    Text
+                                </div>
+                                <div class="subtext">
+                                    Subtext
+                                </div>
                             </div>
-                            <div class="text">
-                                Text
-                            </div>
-                            <div class="subtext">
-                                Subtext
-                            </div>
+                            <br>
+                            <br>
+                            <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
+                            <button class="md-btn">Button</button>
+                            <button class="md-btn md-btn-primary">Button</button>
                         </div>
-                        <br>
-                        <br>
-                        <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
-                        <button class="md-btn">Button</button>
-                        <button class="md-btn md-btn-primary">Button</button>
                     </template>
+                </transition>
+                <!-- Listen Now -->
+                <transition name="wpfade">
+                    <template v-if="page == 'listen_now'">
+                        <div class="content-inner">
+
+                        </div>
+                    </template>
+                </transition>
+                <!-- Radio -->
+                <transition v-on:enter="getRadioStations()" name="wpfade">
+                    <template v-if="page == 'radio'" @created="console.log('radio')">
+                        <div class="content-inner">
+                            <h1 class="header-text">Radio</h1>
+                            <h3>Recent Stations</h3>
+                            <mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
+                        </div>
+                    </template>
+                </transition>
                 <!-- Search -->
+                <transition name="wpfade">
                     <template v-if="page == 'search'">
-                        <h1 class="header-text">{{ search.term }}</h1>
-                        <template v-if="search.results['meta']">
-                            <template v-if="search.results.songs">
-                                <h3>Artists</h3>
-                                <mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
+                        <div class="content-inner">
+                            <h1 class="header-text">{{ search.term }}</h1>
+                            <template v-if="search.results['meta']">
+                                <template v-if="search.results.songs">
+                                    <h3>Artists</h3>
+                                    <mediaitem-square :item="item"
+                                                      v-for="item in search.results.artists.data"></mediaitem-square>
+                                </template>
+                                <template v-if="search.results.songs">
+                                    <h3>Songs</h3>
+                                    <mediaitem-list-item :item="item"
+                                                         v-for="item in search.results.songs.data"></mediaitem-list-item>
+                                </template>
+                                <template v-if="search.results.songs">
+                                    <h3>Albums</h3>
+                                    <mediaitem-square :item="item"
+                                                      v-for="item in search.results.albums.data"></mediaitem-square>
+                                </template>
+                                <template v-if="search.results.songs">
+                                    <h3>Playlists</h3>
+                                    <mediaitem-square :item="item"
+                                                      v-for="item in search.results.playlists.data"></mediaitem-square>
+                                </template>
                             </template>
-                            <template v-if="search.results.songs">
-                                <h3>Songs</h3>
-                                <mediaitem-list-item :item="item" v-for="item in search.results.songs.data"></mediaitem-list-item>
-                            </template>
-                            <template v-if="search.results.songs">
-                                <h3>Albums</h3>
-                                <mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square>
-                            </template>
-                            <template v-if="search.results.songs">
-                                <h3>Playlists</h3>
-                                <mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
-                            </template>
-                        </template>
+                        </div>
                     </template>
+                </transition>
             </div>
             <div class="app-drawer" v-if="drawertest">
 
@@ -221,7 +258,8 @@
 <script type="text/x-template" id="sidebar-library-item">
     <button class="app-sidebar-item"
             :class="$parent.getSidebarItemClass(page)"
-            @click="$parent.page = page">{{ name }}</button>
+            @click="$parent.page = page">{{ name }}
+    </button>
 </script>
 
 <script type="text/x-template" id="mediaitem-list-item">
@@ -275,7 +313,7 @@
 <script type="text/x-template" id="mediaitem-square">
     <template>
         <div @click="$parent.playMediaItemById(item.id, item.type)"
-                class="cd-mediaitem-square">
+             class="cd-mediaitem-square">
             <div class="artwork"
                  :class="{'round': item.type == 'artists'}"
                  :style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 8b35d4a4..1b858808 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -1,6 +1,6 @@
 Vue.component('sidebar-library-item', {
     template: '#sidebar-library-item',
-    props: ['name', 'page'],
+    props: ['name', 'page', 'cd-click'],
     methods: {}
 });
 
@@ -46,6 +46,9 @@ const app = new Vue({
         playerLCD: {
             playbackDuration: 0
         },
+        radio: {
+            personal: []
+        },
         playlists: {
             listing: [],
             details: {}
@@ -74,6 +77,13 @@ const app = new Vue({
                 return []
             }
         },
+        async getRadioStations() {
+            this.radio.personal = await this.mk.api.recentRadioStations("",
+                {
+                    "platform": "web",
+                    "art[url]": "f"
+                });
+        },
         unauthorize() {
             this.mk.unauthorize()
         },
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index a518f311..c8ee06cc 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -153,13 +153,20 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     background-color: var(--color2);
     height: 100%;
     width: 100%;
-    padding: 32px;
     overflow-y: scroll;
     overflow-y: overlay;
     overflow-x: hidden;
     border-radius: 10px 0px;
     border-left: 1px solid rgb(0 0 0 / 25%);
     border-top: 1px solid rgb(0 0 0 / 25%);
+    position:relative;
+}
+
+.content-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 32px;
 }