From 92e6a95fe5bea825dac5083bbb4e31726b7ee7d3 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 6 Dec 2021 17:59:18 -0800
Subject: [PATCH] Moved most components to EJS files in /views/components/

---
 .vscode/tasks.json                            |  17 ++
 resources/cider-ui-tests/index.js             |  65 +----
 .../views/components/hello-world.ejs          |  14 ++
 .../views/components/mediaitem-artwork.ejs    |  29 +++
 .../views/components/mediaitem-hrect.ejs      |  32 +++
 .../views/components/mediaitem-list-item.ejs  |  40 +++
 .../mediaitem-scroller-horizontal-large.ejs   |  17 ++
 .../mediaitem-scroller-horizontal-sp.ejs      |  16 ++
 .../mediaitem-scroller-horizontal.ejs         |  16 ++
 .../components/mediaitem-square-large.ejs     |  56 +++++
 .../views/components/mediaitem-square-sp.ejs  |  59 +++++
 .../views/components/mediaitem-square.ejs     |  27 ++
 resources/cider-ui-tests/views/main.ejs       | 231 +-----------------
 .../cider-ui-tests/views/pages/browse.ejs     |   0
 .../views/pages/cider-playlist.ejs            |   0
 .../views/pages/library-albums.ejs            |   0
 .../views/pages/library-songs.ejs             |   0
 .../cider-ui-tests/views/pages/listen_now.ejs |   0
 .../cider-ui-tests/views/pages/radio.ejs      |   0
 .../cider-ui-tests/views/pages/search.ejs     |   0
 20 files changed, 341 insertions(+), 278 deletions(-)
 create mode 100644 .vscode/tasks.json
 create mode 100644 resources/cider-ui-tests/views/components/hello-world.ejs
 create mode 100644 resources/cider-ui-tests/views/components/mediaitem-artwork.ejs
 create mode 100644 resources/cider-ui-tests/views/components/mediaitem-hrect.ejs
 create mode 100644 resources/cider-ui-tests/views/components/mediaitem-list-item.ejs
 create mode 100644 resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-large.ejs
 create mode 100644 resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-sp.ejs
 create mode 100644 resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal.ejs
 create mode 100644 resources/cider-ui-tests/views/components/mediaitem-square-large.ejs
 create mode 100644 resources/cider-ui-tests/views/components/mediaitem-square-sp.ejs
 create mode 100644 resources/cider-ui-tests/views/components/mediaitem-square.ejs
 create mode 100644 resources/cider-ui-tests/views/pages/browse.ejs
 create mode 100644 resources/cider-ui-tests/views/pages/cider-playlist.ejs
 create mode 100644 resources/cider-ui-tests/views/pages/library-albums.ejs
 create mode 100644 resources/cider-ui-tests/views/pages/library-songs.ejs
 create mode 100644 resources/cider-ui-tests/views/pages/listen_now.ejs
 create mode 100644 resources/cider-ui-tests/views/pages/radio.ejs
 create mode 100644 resources/cider-ui-tests/views/pages/search.ejs

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 00000000..931e3602
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,17 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Cider (Debug)",
+            "type": "shell",
+            "command": "yarn start"
+        },
+        {
+            "label": "Cider (Build)",
+            "type": "shell",
+            "command": "yarn dist"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index edb9b293..05baad45 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -1,68 +1,9 @@
-Vue.component('mediaitem-artwork', {
-    template: '#mediaitem-artwork',
-    props: ['size', 'url', 'type'],
-    methods: {
-        getArtworkStyle() {
-            return {
-                width: this.size + 'px',
-                height: this.size + 'px'
-            };
-        }
-    }
-});
-
 Vue.component('sidebar-library-item', {
     template: '#sidebar-library-item',
     props: ['name', 'page', 'cd-click'],
     methods: {}
 });
 
-Vue.component('mediaitem-scroller-horizontal', {
-    template: '#mediaitem-scroller-horizontal',
-    props: ['items'],
-    methods: {}
-});
-
-Vue.component('mediaitem-scroller-horizontal-sp', {
-    template: '#mediaitem-scroller-horizontal-sp',
-    props: ['items'],
-    methods: {}
-});
-
-Vue.component('mediaitem-scroller-horizontal-large', {
-    template: '#mediaitem-scroller-horizontal-large',
-    props: ['items'],
-    methods: {}
-});
-
-Vue.component('mediaitem-square', {
-    template: '#mediaitem-square',
-    props: ['item'],
-    methods: {}
-});
-Vue.component('mediaitem-square-sp', {
-    template: '#mediaitem-square-sp',
-    props: ['item'],
-    methods: {}
-});
-
-Vue.component('mediaitem-square-large', {
-    template: '#mediaitem-square-large',
-    props: ['item'],
-    methods: {}
-});
-
-Vue.component('mediaitem-hrect', {
-    template: '#mediaitem-hrect',
-    props: ['item'],
-    methods: {}
-});
-
-Vue.component('mediaitem-list-item', {
-    template: '#mediaitem-list-item',
-    props: ['item'],
-    methods: {}
-});
 
 Vue.component('lyrics-view', {
     template: '#lyrics-view',
@@ -110,6 +51,12 @@ Array.prototype.limit = function (n) {
     return this.slice(0, n);
 };
 
+function msToMinSec(ms) {
+    var minutes = Math.floor(ms / 60000);
+    var seconds = ((ms % 60000) / 1000).toFixed(0);
+    return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
+}
+
 const app = new Vue({
     el: "#app",
     data: {
diff --git a/resources/cider-ui-tests/views/components/hello-world.ejs b/resources/cider-ui-tests/views/components/hello-world.ejs
new file mode 100644
index 00000000..6fa4e1f7
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/hello-world.ejs
@@ -0,0 +1,14 @@
+<script type="text/x-template" id="hello-world">
+    <button @click="sayHello()">Hello world!</button>
+</script>
+
+<script>
+    Vue.component('hello-world', {
+        template: '#hello-world',
+        methods: {
+            sayHello: function () {
+                alert('Hello world!');
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/mediaitem-artwork.ejs b/resources/cider-ui-tests/views/components/mediaitem-artwork.ejs
new file mode 100644
index 00000000..e20320d2
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/mediaitem-artwork.ejs
@@ -0,0 +1,29 @@
+<script type="text/x-template" id="mediaitem-artwork">
+    <template v-if="type == 'artists'">
+        <div class="mediaitem-artwork rounded">
+            <img :src="app.getMediaItemArtwork(url, size)"
+                 class="mediaitem-artwork--img">
+        </div>
+    </template>
+    <template v-else>
+        <div class="mediaitem-artwork">
+            <img :src="app.getMediaItemArtwork(url, size)"
+                 class="mediaitem-artwork--img">
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('mediaitem-artwork', {
+        template: '#mediaitem-artwork',
+        props: ['size', 'url', 'type'],
+        methods: {
+            getArtworkStyle() {
+                return {
+                    width: this.size + 'px',
+                    height: this.size + 'px'
+                };
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/mediaitem-hrect.ejs b/resources/cider-ui-tests/views/components/mediaitem-hrect.ejs
new file mode 100644
index 00000000..f7cfd685
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/mediaitem-hrect.ejs
@@ -0,0 +1,32 @@
+<script type="text/x-template" id="mediaitem-hrect">
+    <template>
+        <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
+             class="cd-mediaitem-hrect">
+            <div class="artwork">
+                <mediaitem-artwork
+                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                        size="70"
+                        :type="item.type"></mediaitem-artwork>
+            </div>
+            <div class="info-rect">
+                <div class="title text-overflow-elipsis">
+                    {{ item.attributes.name }}
+                </div>
+                <div class="subtitle text-overflow-elipsis">
+                    {{ item.type }}
+                    <template v-if="item.attributes.artistName">
+                        ∙ {{ item.attributes.artistName }}
+                    </template>
+                </div>
+            </div>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('mediaitem-hrect', {
+        template: '#mediaitem-hrect',
+        props: ['item'],
+        methods: {}
+    });
+</script>
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/mediaitem-list-item.ejs b/resources/cider-ui-tests/views/components/mediaitem-list-item.ejs
new file mode 100644
index 00000000..ba96108b
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/mediaitem-list-item.ejs
@@ -0,0 +1,40 @@
+<script type="text/x-template" id="mediaitem-list-item">
+    <template>
+        <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
+             class="cd-mediaitem-list-item">
+            <div class="artwork">
+                <mediaitem-artwork
+                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                        size="34"
+                        :type="item.type"></mediaitem-artwork>
+            </div>
+            <div class="info-rect">
+                <div class="title text-overflow-elipsis">
+                    {{ item.attributes.name }}
+                </div>
+                <div class="subtitle text-overflow-elipsis">
+                    <template v-if="item.attributes.artistName">
+                        {{ item.attributes.artistName }}
+                        <template v-if="item.attributes.albumName">
+                            - {{ item.attributes.albumName }}
+                        </template>
+                    </template>
+                </div>
+            </div>
+            <div>
+                {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
+            </div>
+            <div class="content-rating" v-if="item.attributes.contentRating">
+                {{ item.attributes.contentRating }}
+            </div>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('mediaitem-list-item', {
+        template: '#mediaitem-list-item',
+        props: ['item'],
+        methods: {}
+    });
+</script>
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-large.ejs b/resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-large.ejs
new file mode 100644
index 00000000..c7f5b9b1
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-large.ejs
@@ -0,0 +1,17 @@
+<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
+    <template>
+        <div class="cd-hmedia-scroller">
+            <mediaitem-square-large :item="item"
+                                    v-for="item in items"></mediaitem-square-large>
+        </div>
+    </template>
+</script>
+
+
+<script>
+    Vue.component('mediaitem-scroller-horizontal-large', {
+        template: '#mediaitem-scroller-horizontal-large',
+        props: ['items'],
+        methods: {}
+    });
+</script>
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-sp.ejs b/resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-sp.ejs
new file mode 100644
index 00000000..562c083a
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-sp.ejs
@@ -0,0 +1,16 @@
+<script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
+    <template>
+        <div class="cd-hmedia-scroller">
+            <mediaitem-square-sp :item="item"
+                                 v-for="item in items"></mediaitem-square-sp>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('mediaitem-scroller-horizontal-sp', {
+        template: '#mediaitem-scroller-horizontal-sp',
+        props: ['items'],
+        methods: {}
+    });
+</script>
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal.ejs b/resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal.ejs
new file mode 100644
index 00000000..272bf174
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal.ejs
@@ -0,0 +1,16 @@
+<script type="text/x-template" id="mediaitem-scroller-horizontal">
+    <template>
+        <div class="cd-hmedia-scroller">
+            <mediaitem-square :item="item"
+                              v-for="item in items"></mediaitem-square>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('mediaitem-scroller-horizontal', {
+        template: '#mediaitem-scroller-horizontal',
+        props: ['items'],
+        methods: {}
+    });
+</script>
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/mediaitem-square-large.ejs b/resources/cider-ui-tests/views/components/mediaitem-square-large.ejs
new file mode 100644
index 00000000..9ce2223b
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/mediaitem-square-large.ejs
@@ -0,0 +1,56 @@
+<script type="text/x-template" id="mediaitem-square-large">
+    <template>
+        <div style="position: relative; display: inline-flex;">
+            <div @click.self='app.routeView(item)'
+                 class="cd-mediaitem-square-large">
+                <div class="artwork">
+                    <mediaitem-artwork
+                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                            size="300"
+                            :type="item.type"></mediaitem-artwork>
+                </div>
+                <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                    <div class="button" style="
+                    border-radius: 50%;
+                    background: rgba(50,50,50,0.7);"
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                        width: '40px',
+                        height: '40px',} :
+                        {margin: '35px',
+                        width: '120px',
+                        height: '120px',}]" @click="app.playMediaItem(item)">
+                        <%- include("../svg/play.svg") %>
+                    </div>
+                </div>
+                <div class="title text-overflow-elipsis" @click='app.routeView(item)'>
+                    {{ item.attributes.name ?? '' }}
+                </div>
+                <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
+                    {{ item.attributes.artistName ?? '' }}
+                </div>
+
+            </div>
+            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                <div class="button" style="
+                border-radius: 50%;
+                background: rgba(50,50,50,0.7);"
+                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                    width: '40px',
+                    height: '40px',} :
+                    {margin: '35px',
+                    width: '120px',
+                    height: '120px',}]" @click="app.playMediaItem(item)">
+                    <%- include("../svg/play.svg") %>
+                </div>
+            </div>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('mediaitem-square-large', {
+        template: '#mediaitem-square-large',
+        props: ['item'],
+        methods: {}
+    });
+</script>
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/mediaitem-square-sp.ejs b/resources/cider-ui-tests/views/components/mediaitem-square-sp.ejs
new file mode 100644
index 00000000..b80e06b3
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/mediaitem-square-sp.ejs
@@ -0,0 +1,59 @@
+<script type="text/x-template" id="mediaitem-square-sp">
+    <template>
+        <div style="position: relative; display: inline-flex;">
+            <div @click.self='app.routeView(item)'
+                 class="cd-mediaitem-square-sp" :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
+                <div class="artwork">
+                    <mediaitem-artwork
+                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                            size="300"
+                            :type="item.type"></mediaitem-artwork>
+                </div>
+                <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                    <div class="button" style="
+                    border-radius: 50%;
+                    background: rgba(50,50,50,0.7);"
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                        width: '40px',
+                        height: '40px',} :
+                        {margin: '35px',
+                        width: '120px',
+                        height: '120px',}]" @click="app.playMediaItem(item)">
+                        <%- include("../svg/play.svg") %>
+                    </div>
+                </div>
+                <div class="title text-overflow-elipsis"
+                     :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="font-weight: 600">
+                    {{ item.attributes.name }}
+                </div>
+                <div class="subtitle text-overflow-elipsis"
+                     :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;">
+                    {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
+                    :(item.attributes.artistName ?? '') }}
+                </div>
+
+            </div>
+            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                <div class="button" style="
+               border-radius: 50%;
+               background: rgba(50,50,50,0.7);"
+                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                   width: '40px',
+                   height: '40px',} :
+                   {margin: '35px',
+                   width: '120px',
+                   height: '120px',}]" @click="app.playMediaItem(item)">
+                    <%- include("../svg/play.svg") %>
+                </div>
+            </div>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('mediaitem-square-sp', {
+        template: '#mediaitem-square-sp',
+        props: ['item'],
+        methods: {}
+    });
+</script>
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/mediaitem-square.ejs b/resources/cider-ui-tests/views/components/mediaitem-square.ejs
new file mode 100644
index 00000000..7641c9eb
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/mediaitem-square.ejs
@@ -0,0 +1,27 @@
+<script type="text/x-template" id="mediaitem-square">
+    <template>
+        <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
+             class="cd-mediaitem-square">
+            <div class="artwork">
+                <mediaitem-artwork
+                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                        size="300"
+                        :type="item.type"></mediaitem-artwork>
+            </div>
+            <div class="title text-overflow-elipsis">
+                {{ item.attributes.name }}
+            </div>
+            <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
+                {{ item.attributes.artistName }}
+            </div>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('mediaitem-square', {
+        template: '#mediaitem-square',
+        props: ['item'],
+        methods: {}
+    });
+</script>
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index 3f7792e3..4d6ca796 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/resources/cider-ui-tests/views/main.ejs
@@ -294,8 +294,7 @@
                                        spellcheck="false"
                                        placeholder="Search..."
                                        @input="searchLibrarySongs"
-                                       v-model="library.songs.search"
-                                       class="search-input">
+                                       v-model="library.songs.search" class="search-input">
                             </div>
                             <mediaitem-list-item :item="item"
                                                  v-for="item in library.songs.displayListing"></mediaitem-list-item>
@@ -339,22 +338,7 @@
 
 </div>
 
-<script type="text/x-template" id="mediaitem-artwork">
-    <template v-if="type == 'artists'">
-        <div class="mediaitem-artwork rounded"
-             >
-            <img :src="app.getMediaItemArtwork(url, size)"
-                 class="mediaitem-artwork--img">
-        </div>
-    </template>
-    <template v-else>
-        <div class="mediaitem-artwork"
-             >
-            <img :src="app.getMediaItemArtwork(url, size)"
-                 class="mediaitem-artwork--img">
-        </div>
-    </template>
-</script>
+<%- include("components/mediaitem-artwork"); %>
 
 <!-- Generic Collection of MediaItems -->
 <script type="text/x-template" id="collection-view-generic">
@@ -500,221 +484,29 @@
 </script>
 
 <!-- Horizontal MediaItem Scroller -->
-<script type="text/x-template" id="mediaitem-scroller-horizontal">
-    <template>
-        <div class="cd-hmedia-scroller">
-            <mediaitem-square :item="item"
-                              v-for="item in items"></mediaitem-square>
-        </div>
-    </template>
-</script>
-
+<%- include('components/mediaitem-scroller-horizontal') %>
 <!-- Horizontal MediaItem Scroller (Large) -->
-<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
-    <template>
-        <div class="cd-hmedia-scroller">
-            <mediaitem-square-large :item="item"
-                                    v-for="item in items"></mediaitem-square-large>
-        </div>
-    </template>
-</script>
-
+<%- include('components/mediaitem-scroller-horizontal-large') %>
 <!-- Horizontal MediaItem Scroller (SP : Special) -->
-
-<script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
-    <template>
-        <div class="cd-hmedia-scroller">
-            <mediaitem-square-sp :item="item"
-                                 v-for="item in items"></mediaitem-square-sp>
-        </div>
-    </template>
-</script>
-
+<%- include('components/mediaitem-scroller-horizontal-sp') %>
 <!-- MediaItem List Item -->
-
-<script type="text/x-template" id="mediaitem-list-item">
-    <template>
-        <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
-             class="cd-mediaitem-list-item">
-            <div class="artwork">
-                <mediaitem-artwork
-                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
-                        size="34"
-                        :type="item.type"></mediaitem-artwork>
-            </div>
-            <div class="info-rect">
-                <div class="title text-overflow-elipsis">
-                    {{ item.attributes.name }}
-                </div>
-                <div class="subtitle text-overflow-elipsis">
-                    <template v-if="item.attributes.artistName">
-                        {{ item.attributes.artistName }}
-                        <template v-if="item.attributes.albumName">
-                            - {{ item.attributes.albumName }}
-                        </template>
-                    </template>
-                </div>
-            </div>
-            <div class="content-rating" v-if="item.attributes.contentRating">
-                {{ item.attributes.contentRating }}
-            </div>
-        </div>
-    </template>
-</script>
+<%- include('components/mediaitem-list-item') %>
 
 <!-- MediaItem Horizontal Rectangle -->
-<script type="text/x-template" id="mediaitem-hrect">
-    <template>
-        <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
-             class="cd-mediaitem-hrect">
-            <div class="artwork">
-                <mediaitem-artwork
-                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
-                        size="70"
-                        :type="item.type"></mediaitem-artwork>
-            </div>
-            <div class="info-rect">
-                <div class="title text-overflow-elipsis">
-                    {{ item.attributes.name }}
-                </div>
-                <div class="subtitle text-overflow-elipsis">
-                    {{ item.type }}
-                    <template v-if="item.attributes.artistName">
-                        ∙ {{ item.attributes.artistName }}
-                    </template>
-                </div>
-            </div>
-        </div>
-    </template>
-</script>
+<%- include('components/mediaitem-hrect') %>
 
 <!-- MediaItem Square -->
+<%- include('components/mediaitem-square') %>
 
-<script type="text/x-template" id="mediaitem-square">
-    <template>
-        <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
-             class="cd-mediaitem-square">
-            <div class="artwork">
-                <mediaitem-artwork
-                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
-                        size="300"
-                        :type="item.type"></mediaitem-artwork>
-            </div>
-            <div class="title text-overflow-elipsis">
-                {{ item.attributes.name }}
-            </div>
-            <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
-                {{ item.attributes.artistName }}
-            </div>
-        </div>
-    </template>
-</script>
 
 <!-- MediaItem Square (Large) -->
+<%- include('components/mediaitem-square-large') %>
 
-<script type="text/x-template" id="mediaitem-square-large">
-    <template>
-        <div style="position: relative; display: inline-flex;">
-            <div @click.self='app.routeView(item)'
-                 class="cd-mediaitem-square-large">
-                <div class="artwork">
-                    <mediaitem-artwork
-                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
-                            size="300"
-                            :type="item.type"></mediaitem-artwork>
-                </div>
-                <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
-                    <div class="button" style="
-                    border-radius: 50%;
-                    background: rgba(50,50,50,0.7);"
-                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
-                        width: '40px',
-                        height: '40px',} :
-                        {margin: '35px',
-                        width: '120px',
-                        height: '120px',}]" @click="app.playMediaItem(item)">
-                        <%- include("svg/play.svg") %>
-                    </div>
-                </div>
-                <div class="title text-overflow-elipsis" @click='app.routeView(item)'>
-                    {{ item.attributes.name ?? '' }}
-                </div>
-                <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
-                    {{ item.attributes.artistName ?? '' }}
-                </div>
-
-            </div>
-            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
-                <div class="button" style="
-                border-radius: 50%;
-                background: rgba(50,50,50,0.7);"
-                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
-                    width: '40px',
-                    height: '40px',} :
-                    {margin: '35px',
-                    width: '120px',
-                    height: '120px',}]" @click="app.playMediaItem(item)">
-                    <%- include("svg/play.svg") %>
-                </div>
-            </div>
-        </div>
-    </template>
-</script>
 
 <!-- MediaItem Square SP -->
-<script type="text/x-template" id="mediaitem-square-sp">
-    <template>
-        <div style="position: relative; display: inline-flex;">
-            <div @click.self='app.routeView(item)'
-                 class="cd-mediaitem-square-sp"
-                 :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
-                <div class="artwork">
-                    <mediaitem-artwork
-                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
-                            size="300"
-                            :type="item.type"
-                    ></mediaitem-artwork>
-                </div>
-                <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
-                    <div class="button" style="
-                    border-radius: 50%;
-                    background: rgba(50,50,50,0.7);"
-                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
-                        width: '40px',
-                        height: '40px',} :
-                        {margin: '35px',
-                        width: '120px',
-                        height: '120px',}]" @click="app.playMediaItem(item)">
-                        <%- include("svg/play.svg") %>
-                    </div>
-                </div>
-                <div class="title text-overflow-elipsis"
-                     :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="font-weight: 600">
-                    {{ item.attributes.name }}
-                </div>
-                <div class="subtitle text-overflow-elipsis"
-                     :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;">
-                    {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
-                    :(item.attributes.artistName ?? '') }}
-                </div>
+<%- include('components/mediaitem-square-sp') %>
 
-            </div>
-            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
-                <div class="button" style="
-               border-radius: 50%;
-               background: rgba(50,50,50,0.7);"
-                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
-                   width: '40px',
-                   height: '40px',} :
-                   {margin: '35px',
-                   width: '120px',
-                   height: '120px',}]" @click="app.playMediaItem(item)">
-                    <%- include("svg/play.svg") %>
-                </div>
-            </div>
-        </div>
-    </template>
-</script>
+<!-- Lyrics View -->
 <script type="text/x-template" id="lyrics-view">
     <div class="md-body lyric-body">
         <template v-if="lyrics">
@@ -743,6 +535,7 @@
         </template>
     </div>
 </script>
+
 <script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
 <script src="index.js?v=1"></script>
 </body>
diff --git a/resources/cider-ui-tests/views/pages/browse.ejs b/resources/cider-ui-tests/views/pages/browse.ejs
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/cider-ui-tests/views/pages/cider-playlist.ejs b/resources/cider-ui-tests/views/pages/cider-playlist.ejs
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/cider-ui-tests/views/pages/library-albums.ejs b/resources/cider-ui-tests/views/pages/library-albums.ejs
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/cider-ui-tests/views/pages/library-songs.ejs b/resources/cider-ui-tests/views/pages/library-songs.ejs
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/cider-ui-tests/views/pages/listen_now.ejs b/resources/cider-ui-tests/views/pages/listen_now.ejs
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/cider-ui-tests/views/pages/radio.ejs b/resources/cider-ui-tests/views/pages/radio.ejs
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/cider-ui-tests/views/pages/search.ejs b/resources/cider-ui-tests/views/pages/search.ejs
new file mode 100644
index 00000000..e69de29b