Merge pull request #483 from kyw504100/Lab2

Irregular update 20/02

src/renderer/index.js

@@ -25,6 +25,7 @@ const CiderFrontAPI = {
     },
     AddMenuEntry(entry) {
         app.pluginMenuEntries.push(entry)
+        app.pluginInstalled = true
     }
 }
 
@@ -76,6 +77,7 @@ const app = new Vue({
         platform: "",
         mk: {},
         quickPlayQuery: "",
+        pluginInstalled: false,
         pluginMenuEntries: [],
         lz: ipcRenderer.sendSync("get-i18n", "en_US"),
         lzListing: ipcRenderer.sendSync("get-i18n-listing"),
@@ -247,6 +249,7 @@ const app = new Vue({
             qrcode: false,
             equalizer: false,
             audioSettings: false,
+            pluginMenu: false,
             audioControls: false,
             showPlaylist: false,
         },

src/renderer/less/helpers.less

@@ -226,6 +226,7 @@
       }
 
       .name {
+        position: relative;
       }
 
       &:hover {

src/renderer/views/app/panels.ejs

@@ -22,6 +22,9 @@
 <transition name="modal">
     <audio-settings v-if="modals.audioSettings"></audio-settings>
 </transition>
+<transition name="modal">
+    <plugin-menu v-if="modals.pluginMenu"></plugin-menu>
+</transition>
 <transition name="modal">
     <eq-view v-if="modals.equalizer"></eq-view>
 </transition>

src/renderer/views/app/sidebar.ejs

@@ -101,6 +101,11 @@
                     <span class="usermenu-item-icon"><%- include("../svg/headphones.svg") %></span>
                     <span class="usermenu-item-name">{{$root.getLz('term.audioSettings')}}</span>
                 </button>
+                <button class="usermenu-item" v-if="pluginInstalled" 
+                        @click="modals.pluginMenu = true">
+                    <span class="usermenu-item-icon"><%- include("../svg/grid.svg") %></span>
+                    <span class="usermenu-item-name">{{$root.getLz('term.plugin')}}</span>
+                </button>
                 <button class="usermenu-item" @click="appRoute('about')">
                     <span class="usermenu-item-icon"><%- include("../svg/info.svg") %></span>
                     <span class="usermenu-item-name">{{$root.getLz('term.about')}}</span>
@@ -111,12 +116,9 @@
                 </button>
                 <button class="usermenu-item" @click="unauthorize()">
                     <span class="usermenu-item-icon"
-                                style="right:2.5px;"><%- include("../svg/log-out.svg") %></span>
+                            style="right:2.5px;"><%- include("../svg/log-out.svg") %></span>
                     <span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
                 </button>
-                <button class="usermenu-item" @click="entry.onClick()" v-for="entry in pluginMenuEntries">
-                    {{ entry.name }}
-                </button>
             </div>
         </div>
     </transition>

src/renderer/views/components/audio-settings.ejs

@@ -25,7 +25,7 @@
                     <button class="playlist-item"
                             @click="$root.appRoute('audiolabs')" style="width:100%;">
                         <div class="icon"><%- include("../svg/speaker.svg") %></div>
-                        <div class="name">Cider Audio Lab</div>
+                        <div class="name">{{app.getLz('settings.option.audio.audioLab')}}</div>
                     </button>
                 </div>
             </div>

src/renderer/views/components/plugin-menu.ejs

@@ -0,0 +1,37 @@
+<script type="text/x-template" id="plugin-menu">
+  <!--template-->
+      <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
+          <div class="modal-window">
+              <div class="modal-header">
+                  <div class="modal-title">{{$root.getLz('term.pluginMenu')}}</div>
+                  <button class="close-btn" @click="app.resetState()"></button>
+              </div>
+              <div class="modal-content">
+                <button class="playlist-item" @click="entry.onClick(); closeMenu();" v-for="entry in app.pluginMenuEntries">
+                  <span class="icon"><%- include("../svg/grid.svg") %></span>
+                  <span class="name" style="top: 1px;">{{ entry.name }}</span>
+                </button>
+              </div>
+          </div>
+      </div>
+  <!--template-->
+</script>
+
+<script>
+  Vue.component('plugin-menu', {
+      template: '#plugin-menu',
+      data: function () {
+          return {
+              app: this.$root,
+          }
+      },
+      props: {},
+      mounted() {},
+      methods: {
+          closeMenu() {
+              app.modals.pluginMenu = false
+          },
+          },
+      }
+  );
+</script>

src/renderer/views/pages/audiolabs.ejs

@@ -2,15 +2,15 @@
     <div class="content-inner settings-page">
         <div class="md-option-container">  
             <div class="md-option-header">
-                <span>Cider Audio Laboratory</span>
+                <span>{{$root.getLz('settings.option.audio.audioLab')}}</span>
             </div>
             <div class="settings-option-body">       
                 <div class="md-option-line" v-show="!app.cfg.advanced.AudioContext">
                     <div class="md-option-segment">
-                        AudioContext (Advanced Functionality) is required to enable Cider Audio Laboratory.
+                        {{$root.getLz('settings.warn.audioLab.withoutAF')}}
                     </div>
                     <button class="md-btn" style="margin-top: 5px;" onclick="app.appRoute('settings')">
-                        Settings
+                        {{$root.getLz('term.settings')}}
                     </button>
                 </div>    
             <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
@@ -40,9 +40,9 @@
             </div>
             <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
                 <div class="md-option-segment">
-                    Analog Warmth
+                    {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmth')}}
                     <br>
-                    <small>Simulates the analog warmth modelled after the Korg Nutube 6P1</small>
+                    <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmth.description')}}</small>
                 </div>
                 <div class="md-option-segment md-option-segment_auto">
                     <input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.analogWarmth"  v-on:change="CiderAudio.hierarchical_loading();" switch/>
@@ -50,16 +50,16 @@
             </div>
             <div class="md-option-line" v-show="app.cfg.advanced.AudioContext && app.cfg.audio.maikiwiAudio.analogWarmth === true">
                 <div class="md-option-segment">
-                    Analog Warmth Intensity
+                    {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity')}}
                     <br>
-                    <small>Changes the intensity of the Analog Warmth Module processing.</small>
+                    <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.description')}}</small>
                 </div>
                 <div class="md-option-segment md-option-segment_auto">
                     <button class="md-btn" :disabled="app.cfg.audio.maikiwiAudio.analogWarmth_value === 1.25" v-model="app.cfg.audio.maikiwiAudio.analogWarmth_value" onclick="app.cfg.audio.maikiwiAudio.analogWarmth_value = 1.25; CiderAudio.hierarchical_loading();">
-                        Smooth
+                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.smooth')}}
                     </button>
                     <button class="md-btn" :disabled="app.cfg.audio.maikiwiAudio.analogWarmth_value === 1.75" v-model="app.cfg.audio.maikiwiAudio.analogWarmth_value" onclick="app.cfg.audio.maikiwiAudio.analogWarmth_value = 1.75; CiderAudio.hierarchical_loading();">
-                        Warm
+                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.warm')}}
                     </button>
                 </div>
             </div>
@@ -75,9 +75,9 @@
             </div>
             <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
                 <div class="md-option-segment">
-                    Cider Tuned Spatialization 
+                    {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization')}}
                     <br>
-                    <small>Pre-tuned Spatializing Effect, disables the customizable settings of Audio Spatialization. Spatialization must be enabled as a prerequisite.</small>
+                    <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description')}}</small>
                 </div>
                 <div class="md-option-segment md-option-segment_auto">
                     <input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.spatial" :disabled="app.cfg.audio.spatial === false" v-on:change="toggleSpatial" switch/>
@@ -85,16 +85,16 @@
             </div>
             <div class="md-option-line" v-show="app.cfg.audio.maikiwiAudio.spatial">
             <div class="md-option-segment">
-                Cider Spatialization Profile
+                {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile')}}
                 <br>
-                <small>Changes the Tuning Profile of the Spatialization. (Requires App Restart)</small>
+                <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.description')}}</small>
             </div>
             <div class="md-option-segment md-option-segment_auto">
                 <button class="md-btn" :disabled="app.cfg.audio.maikiwiAudio.spatialType === 0" v-model="app.cfg.audio.maikiwiAudio.spatialType" onclick="app.cfg.audio.maikiwiAudio.spatialType = 0; CiderAudio.hierarchical_loading();">
-                    Standard
+                    {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.standard')}}
                 </button>
                 <button class="md-btn" :disabled="app.cfg.audio.maikiwiAudio.spatialType === 1" v-model="app.cfg.audio.maikiwiAudio.spatialType" onclick="app.cfg.audio.maikiwiAudio.spatialType = 1; CiderAudio.hierarchical_loading();">
-                    Audiophile
+                    {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.audiophile')}}
                 </button>
             </div>
             </div>

src/renderer/views/pages/home.ejs

@@ -51,7 +51,7 @@
             <!--            </div>-->
             <div class="row" v-if="!seenReplay">
                 <div class="col">
-                    <button class="md-btn md-btn-block md-btn-replay--hero" @click="$root.appRoute('replay')">Replay {{ year }}</button>
+                    <button class="md-btn md-btn-block md-btn-replay--hero" @click="$root.appRoute('replay')">{{$root.getLz('term.replay')}} {{ year }}</button>
                 </div>
             </div>
             <div class="row">
@@ -61,7 +61,7 @@
                             <h3>{{app.getLz('home.madeForYou')}}</h3>
                         </div>
                         <div class="col-auto nopadding flex-center">
-                            <button class="md-btn md-btn-replay" v-if="seenReplay" @click="$root.appRoute('replay')">Replay {{ year }}</button>
+                            <button class="md-btn md-btn-replay" v-if="seenReplay" @click="$root.appRoute('replay')">{{$root.getLz('term.replay')}} {{ year }}</button>
                         </div>
                     </div>
                     <div class="well">

src/renderer/views/pages/replay.ejs

@@ -18,21 +18,21 @@
             :video="loaded.playlist.attributes.editorialVideo.motionWideVideo21x9.video" 
             :video-priority="true"></mediaitem-artwork>
             </div>
-            <h1 class="replay-header">{{ loaded.attributes.year }} Replay</h1>
+            <h1 class="replay-header">{{ loaded.attributes.year }} {{$root.getLz('term.replay')}}</h1>
             <hr>
             <div class="row">
                 <div class="col">
-                    <h4>{{ loaded.attributes.listenTimeInMinutes }} minutes</h4>
-                    <h4>{{ loaded.attributes.uniqueAlbumCount }} Unique Albums</h4>
-                    <h4>{{ loaded.attributes.uniqueArtistCount }} Unique Artists</h4>
-                    <h4>{{ loaded.attributes.uniqueSongCount }} Unique Songs</h4>
+                    <h4>{{ loaded.attributes.listenTimeInMinutes }} {{$root.getLz('term.time.minutes')}}</h4>
+                    <h4>{{ loaded.attributes.uniqueAlbumCount }} {{$root.getLz('term.uniqueAlbums')}}</h4>
+                    <h4>{{ loaded.attributes.uniqueArtistCount }} {{$root.getLz('term.uniqueArtists')}}</h4>
+                    <h4>{{ loaded.attributes.uniqueSongCount }} {{$root.getLz('term.uniqueSongs')}}</h4>
                 </div>
                 <div class="col-auto replay-playlist-container">
                     <mediaitem-square kind="card" :force-video="true" :item="loaded.playlist"></mediaitem-square>
                 </div>
             </div>
             <!--            Top Artists-->
-            <h3>Top Artists</h3>
+            <h3>{{$root.getLz('term.topArtists')}}</h3>
             <div class="well">
                 <mediaitem-scroller-horizontal>
                     <div class="card replay-card" v-for="artistData in loaded.views['top-artists'].data">
@@ -40,14 +40,14 @@
                             <mediaitem-square :item="artistData.relationships.artist.data[0]"></mediaitem-square>
                         </div>
                         <div class="card-footer">
-                            {{ artistData.attributes.listenTimeInMinutes }} minutes<br>
-                            Listened to: {{ artistData.attributes.playCount }} times
+                            {{ artistData.attributes.listenTimeInMinutes }} {{$root.getLz('term.time.minutes')}}<br>
+                            {{$root.getLz('term.listenedTo')}} {{ artistData.attributes.playCount }} {{$root.getLz('term.times')}}
                         </div>
                     </div>
                 </mediaitem-scroller-horizontal>
             </div>
             <!--            Top Albums-->
-            <h3>Top Albums</h3>
+            <h3>{{$root.getLz('term.topAlbums')}}</h3>
             <div class="well">
                 <mediaitem-scroller-horizontal>
                     <div class="card replay-card" v-for="albumData in loaded.views['top-albums'].data">
@@ -55,18 +55,18 @@
                             <mediaitem-square :item="albumData.relationships.album.data[0]"></mediaitem-square>
                         </div>
                         <div class="card-footer">
-                            {{ albumData.attributes.listenTimeInMinutes }} minutes<br>
-                            {{ albumData.attributes.playCount }} plays
+                            {{ albumData.attributes.listenTimeInMinutes }} {{$root.getLz('term.time.minutes')}}<br>
+                            {{ albumData.attributes.playCount }} {{$root.getLz('term.plays')}}
                         </div>
                     </div>
                 </mediaitem-scroller-horizontal>
             </div>
             <!--            Top Songs-->
-            <h3>Top Songs</h3>
+            <h3>{{$root.getLz('term.topSongs')}}</h3>
             <div class="well">
                 <listitem-horizontal :show-library-status="false" :items="songsToArray(loaded.views['top-songs'].data)"></listitem-horizontal>
             </div>
-            <h3>Top Genres</h3>
+            <h3>{{$root.getLz('term.topGenres')}}</h3>
             <div class="top-genres-container">
                 <div v-for="genre in loaded.topGenres" class="replay-genre-display">
                     <div class="genre-name">

src/renderer/views/pages/settings.ejs

@@ -25,18 +25,20 @@
                 </div>
                 <div class="md-option-line">
                     <div class="md-option-segment">
-                        Resume behavior<br>
+                        {{$root.getLz('settings.option.general.resumebehavior')}}<br>
                         <small>
-                            Resume behavior affects how Cider will resume your session when you return to the app.<br>
-                            <b>Locally: </b> Cider will resume your last session on this machine.<br>
-                            <b>History: </b> Cider will queue the last song from your overall Apple Music history, across devices.
+                            {{$root.getLz('settings.option.general.resumebehavior.description')}}<br>
+                            <b>{{$root.getLz('settings.option.general.resumebehavior.locally')}}: </b> 
+                            {{$root.getLz('settings.option.general.resumebehavior.locally.description')}}<br>
+                            <b>{{$root.getLz('settings.option.general.resumebehavior.history')}}: </b> 
+                            {{$root.getLz('settings.option.general.resumebehavior.history.description')}}
                         </small>
                     </div>
                     <div class="md-option-segment md-option-segment_auto">
                         <select class="md-select" style="width:180px;" v-model="$root.cfg.general.resumeOnStartupBehavior">
-                            <option value="disabled">Disabled</option>
-                            <option value="local">Locally</option>
-                            <option value="history">History</option>
+                            <option value="disabled">{{$root.getLz('term.disabled')}}</option>
+                            <option value="local">{{$root.getLz('settings.option.general.resumebehavior.locally')}}</option>
+                            <option value="history">{{$root.getLz('settings.option.general.resumebehavior.history')}}</option>
                         </select>
                     </div>
                 </div>
@@ -90,13 +92,13 @@
                 </div>
                 <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
                     <div class="md-option-segment">
-                        Cider Audio Lab
+                        {{$root.getLz('settings.option.audio.audioLab')}}
                         <br>
-                        <small>Contains an assortment of Audio Tweaks made by the Cider Dev Team</small>
+                        <small>{{$root.getLz('settings.option.audio.audioLab.description')}}</small>
                     </div>
                     <div class="md-option-segment md-option-segment_auto">
                         <button class="md-btn" onclick="app.appRoute('audiolabs')">
-                            Browse
+                            {{$root.getLz('term.browse')}}
                         </button>
                     </div>
                 </div>
@@ -650,9 +652,9 @@
 
                 <div class="md-option-line">
                     <div class="md-option-segment">
-                        Unknown Sources
+                        {{$root.getLz('settings.option.experimental.unknownPlugin')}}
                         <br>
-                        <small>Allow installation of plugins from repos other than the Cider Plugin Repository</small>
+                        <small>{{$root.getLz('settings.option.experimental.unknownPlugin.description')}}</small>
                     </div>
                     <div class="md-option-segment md-option-segment_auto">
                         <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('unknown-sources')" @click="app.cfg.advanced.experiments.includes('unknown-sources') ? removeExperiment('unknown-sources') : addExperiment('unknown-sources')" switch/>

src/renderer/views/pages/themes-github.ejs

@@ -3,7 +3,7 @@
         <div class="gh-header">
             <div class="row">
                 <div class="col nopadding">
-                    <h1 class="header-text">Themes from GitHub</h1>
+                    <h1 class="header-text">{{$root.getLz('settings.header.visual.theme.github.page')}}</h1>
                 </div>
                 <div class="col-auto nopadding flex-center">
                     <button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()">
@@ -45,8 +45,8 @@
                         </div>
                         <div class="col-auto nopadding flex-center">
                             <button class="md-btn md-btn-primary" @click="installThemeRepo(openRepo)">
-                                <span v-if="!themesInstalled.includes(openRepo.full_name)">Install</span>
-                                <span v-else>Update</span>
+                                <span v-if="!themesInstalled.includes(openRepo.full_name)">{{$root.getLz('action.install')}}</span>
+                                <span v-else>{{$root.getLz('action.update')}}</span>
                             </button>
                         </div>
                     </div>

src/renderer/views/svg/grid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>