Merge branch 'innolab' of https://github.com/ciderapp/Cider into innolab

package.json

@@ -21,6 +21,10 @@
     "start:win32": "yarn build && set ELECTRON_ENABLE_LOGGING=true && electron ./build/index.js --enable-accelerated-mjpeg-decode --enable-accelerated-video --disable-gpu-driver-bug-workarounds --ignore-gpu-blacklist --enable-native-gpu-memory-buffers",
     "start:linux": "yarn build && ELECTRON_ENABLE_LOGGING=true && electron ./build/index.js --enable-accelerated-mjpeg-decode --enable-accelerated-video --disable-gpu-driver-bug-workarounds --ignore-gpu-blacklist --enable-native-gpu-memory-buffers",
     "start:darwin": "yarn build && ELECTRON_ENABLE_LOGGING=true && electron ./build/index.js --enable-accelerated-mjpeg-decode --enable-accelerated-video --disable-gpu-driver-bug-workarounds --ignore-gpu-blacklist --enable-native-gpu-memory-buffers",
+    "start-renderer": "run-script-os",
+    "start-renderer:win32": "set ELECTRON_ENABLE_LOGGING=true && electron ./build/index.js --enable-accelerated-mjpeg-decode --enable-accelerated-video --disable-gpu-driver-bug-workarounds --ignore-gpu-blacklist --enable-native-gpu-memory-buffers",
+    "start-renderer:linux": "ELECTRON_ENABLE_LOGGING=true && electron ./build/index.js --enable-accelerated-mjpeg-decode --enable-accelerated-video --disable-gpu-driver-bug-workarounds --ignore-gpu-blacklist --enable-native-gpu-memory-buffers",
+    "start-renderer:darwin": "ELECTRON_ENABLE_LOGGING=true && electron ./build/index.js --enable-accelerated-mjpeg-decode --enable-accelerated-video --disable-gpu-driver-bug-workarounds --ignore-gpu-blacklist --enable-native-gpu-memory-buffers",
     "pack": "electron-builder --dir",
     "dist": "yarn build && electron-builder",
     "dist:macarm": "yarn build && electron-builder --mac --arm64",

src/i18n/README.md

@@ -116,3 +116,9 @@ Update 12/02/2022 12:00 UTC
 * `settings.notyf.visual.theme.install.error`: Added for `en_US`.
 * `term.defaultPresets`: Added for `en_US`.
 * `term.userPresets`: Added for `en_US`.
+
+Update 16/02/2022 21:45 UTC
+
+* `term.audioControls`: Added for `en_US`.
+* `settings.option.audio.volumeStep`: Added for `en_US`.
+* `settings.option.audio.maxVolume`: Added for `en_US`.`

src/i18n/en_US.jsonc

@@ -109,6 +109,7 @@
   "term.fullscreenView": "Fullscreen View",
   "term.defaultView": "Default View",
   "term.audioSettings": "Audio Settings",
+  "term.audioControls": "Audio Controls",
   "term.clearAll": "Clear All",
   "term.recentStations": "Recent Stations",
   "term.language": "Language",
@@ -154,6 +155,7 @@
   "term.videoExtras": "Video Extras",
   "term.top": "Top",
   "term.version": "Version",
+  "term.noVideos": "No videos found.",
   
   // Home
   "home.title": "Home",
@@ -250,6 +252,8 @@
   // Settings - Audio
   "settings.header.audio": "Audio",
   "settings.header.audio.description": "Adjust the audio settings for Cider.",
+  "settings.option.audio.volumeStep": "Volume Step",
+  "settings.option.audio.maxVolume": "Max Volume",
   "settings.option.audio.quality": "Audio Quality", // Dropdown
   "settings.header.audio.quality.hireslossless": "Hi-Res Lossless",
   "settings.header.audio.quality.hireslossless.description": "up to 24-bit/192 kHz",

src/main/base/browserwindow.ts

@@ -53,6 +53,7 @@ export class BrowserWindow {
                 "components/sidebar-playlist",
                 "components/spatial-properties",
                 "components/audio-settings",
+                "components/audio-controls",
                 "components/qrcode-modal",
                 "components/equalizer",
                 "components/add-to-playlist",

src/main/index.ts

@@ -69,6 +69,10 @@ ipcMain.on('nowPlayingItemDidChange', (_event, attributes) => {
     CiderPlug.callPlugins('onNowPlayingItemDidChange', attributes);
 });
 
+ipcMain.on('lfmItemChange', (_event, attributes) => {
+    CiderPlug.callPlugins('lfmItemChange', attributes);
+});
+
 app.on('before-quit', () => {
     CiderPlug.callPlugins('onBeforeQuit');
     console.warn(`${app.getName()} exited.`);

src/main/plugins/lastfm.ts

@@ -258,17 +258,19 @@ export default class LastFMPlugin {
      */
     onPlaybackStateDidChange(attributes: object): void {
           this.updateNowPlayingSong(attributes)
-        this.scrobbleSong(attributes)
+    //    this.scrobbleSong(attributes)
     }
 
     /**
      * Runs on song change
      * @param attributes Music Attributes
      */
-    onNowPlayingItemDidChange(attributes: object): void {
+    lfmItemChange(attributes: any): void {
+        attributes.status = true
         if (!this._store.lastfm.filterLoop){
             this._lastfm.cachedNowPlayingAttributes = false;
-            this._lastfm.cachedAttributes = false}    
+            this._lastfm.cachedAttributes = false
+        }
         this.updateNowPlayingSong(attributes)    
         this.scrobbleSong(attributes)            
     }

src/preload/cider-preload.js

@@ -25,8 +25,10 @@ const MusicKitInterop = {
 		MusicKit.getInstance().addEventListener(MusicKit.Events.nowPlayingItemDidChange, async () => {
 			// await MusicKitInterop.modifyNamesOnLocale();
 			if (MusicKitInterop.filterTrack(MusicKitInterop.getAttributes(), false, true) || !app.cfg.lastfm.filterLoop) {
-				global.ipcRenderer.send('nowPlayingItemDidChange', MusicKitInterop.getAttributes());
+				global.ipcRenderer.send('lfmItemChange', MusicKitInterop.getAttributes());
 			}
+
+			global.ipcRenderer.send('nowPlayingItemDidChange', MusicKitInterop.getAttributes());
 		});
 
 		MusicKit.getInstance().addEventListener(MusicKit.Events.authorizationStatusDidChange, () => {

src/renderer/index.js

@@ -233,6 +233,7 @@ const app = new Vue({
             qrcode: false,
             equalizer: false,
             audioSettings: false,
+            audioControls: false,
             showPlaylist: false,
         },
         socialBadges: {
@@ -272,7 +273,7 @@ const app = new Vue({
         artistPage: () => {
             document.getElementById("app-content").scrollTo(0, 0);
             app.resetState()
-        },
+        }
     },
     methods: {
         songLinkShare(amUrl) {
@@ -1094,7 +1095,7 @@ const app = new Vue({
             let playlistId = response.id
             this.playlists.loadingState = (!transient) ? 0 : 1
             this.showingPlaylist = response
-            if (!response.relationships.tracks.next) {
+            if (!response.relationships?.tracks?.next) {
                 this.playlists.loadingState = 1
                 return
             }
@@ -1170,7 +1171,7 @@ const app = new Vue({
             let max = this.mk.currentPlaybackDuration
             let value = (val - min) / (max - min) * 100
             return {
-                'background': ('linear-gradient(to right, var(--keyColor) 0%, var(--keyColor) ' + value + '%, #333 ' + value + '%, #333 100%)')
+                'background': ('linear-gradient(to right, var(--songProgressColor) 0%, var(--songProgressColor) ' + value + '%, var(--songProgressBackground) ' + value + '%, var(--songProgressBackground) 100%)')
             }
         },
         async getRecursive(response) {
@@ -3321,7 +3322,7 @@ const app = new Vue({
                 console.log('setting max volume')
             } else {
                 console.log('volume up')
-                app.mk.volume += app.cfg.audio.volumeStep;
+                app.mk.volume = ((app.mk.volume * 100) + (app.cfg.audio.volumeStep * 100)) / 100
             }
         },
         volumeDown() {
@@ -3330,11 +3331,11 @@ const app = new Vue({
                 console.log('setting volume to 0')
             } else {
                 console.log('volume down')
-                app.mk.volume -= app.cfg.audio.volumeStep;
+                app.mk.volume = ((app.mk.volume * 100) - (app.cfg.audio.volumeStep * 100)) / 100
             }
         },
         volumeWheel(event) {
-            app.checkScrollDirectionIsUp(event) ? app.volumeUp() : app.volumeDown()
+            app.checkScrollDirectionIsUp(event) ? this.volumeUp() : this.volumeDown()
         },
         muteButtonPressed() {
             if (this.cfg.audio.muted) {

src/renderer/style.less

@@ -35,6 +35,8 @@
   --keyColor-disabled: rgba(250, 88, 106, 0.35);
   --navigationBarHeight: 38px;
   --modalBackground: #262626;
+  --songProgressColor: var(--keyColor);
+  --songProgressBackground: #333;
   --textColor: #eee;
 }
 
@@ -3132,5 +3134,25 @@ body[platform='darwin'] {
   }
 }
 
+.percent {
+  display: inline-block;
+  position: relative;
+}
+
+.percent::after {
+  position: relative;
+  right: 2em;
+  transition: all .05s ease-in-out;
+}
+
+.percent:hover::after,
+.percent:focus-within::after {
+  right: 3.5em;
+}
+
+.percent::after {
+  content: '%';
+}
+
 
 @import url("less/compact.less");

src/renderer/views/app/panels.ejs

@@ -16,6 +16,9 @@
 <transition name="modal">
     <spatial-properties v-if="modals.spatialProperties"></spatial-properties>
 </transition>
+<transition name="modal">
+    <audio-controls v-if="modals.audioControls"></audio-controls>
+</transition>
 <transition name="modal">
     <audio-settings v-if="modals.audioSettings"></audio-settings>
 </transition>

src/renderer/views/app/sidebar.ejs

@@ -152,7 +152,7 @@
                 <div class="input-container">
                     <button class="volume-button--small volume" @click="muteButtonPressed()"
                             :class="{'active': this.cfg.audio.volume == 0}"></button>
-                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0"
+                    <input type="range" class="" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0"
                            :max="cfg.audio.maxVolume"
                            v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
                            @change="checkMuteChange()">

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

@@ -0,0 +1,87 @@
+<script type="text/x-template" id="audio-controls">
+    <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">{{app.getLz('term.audioControls')}}</div>
+                <button class="close-btn" @click="app.resetState()"></button>
+            </div>
+            <div class="modal-content">
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        {{app.getLz('term.volume')}}
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto percent">
+                        <input type="number"
+                               style="width: 100%; text-align: center; margin-right: 5px;" min="0"
+                               step="5" v-model="volume"/>
+                    </div>
+                </div>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        {{app.getLz('settings.option.audio.volumeStep')}}
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto percent">
+                        <input type="number" style="width: 100%; text-align: center; margin-right: 5px;" min="0"
+                               v-model="volumeStep"/>
+                    </div>
+                </div>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        {{app.getLz('settings.option.audio.maxVolume')}}
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto percent">
+                        <input type="number" style="width: 100%; text-align: center; margin-right: 5px;" min="0"
+                               v-model="maxVolume"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script>
+	Vue.component('audio-controls', {
+		template: '#audio-controls',
+		data: function () {
+			return {
+				app: this.$root,
+				maxVolume: this.$root.cfg.audio.maxVolume * 100,
+				volumeStep: this.$root.cfg.audio.volumeStep * 100,
+				volume: this.$root.cfg.audio.volume * 100
+			}
+		},
+		watch: {
+			maxVolume: function (newValue, _oldValue) {
+				if (newValue > 100) {
+					newValue = 100
+				} else {
+					newValue = Math.round(newValue)
+				}
+				this.$root.cfg.audio.maxVolume = newValue / 100
+                this.maxVolume = newValue
+				console.log(newValue, _oldValue)
+			},
+			volume: function (newValue, _oldValue) {
+				if (newValue > this.maxVolume) {
+					newValue = 100
+				} else {
+					newValue = Math.round(newValue)
+				}
+				this.$root.mk.volume = newValue / 100
+				this.volume = newValue
+				console.log(newValue, _oldValue)
+			},
+			volumeStep: function (newValue, _oldValue) {
+				if (newValue > this.maxVolume) {
+					newValue = 100
+				} else {
+					newValue = Math.round(newValue)
+				}
+				this.$root.cfg.audio.volumeStep = newValue / 100
+				this.volumeStep = newValue
+				console.log(newValue, _oldValue)
+            }
+		}
+	});
+</script>

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

@@ -17,6 +17,11 @@
                         <div class="icon"><%- include("../svg/speaker.svg") %></div>
                         <div class="name">{{app.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization')}}</div>
                     </button>
+                    <button class="playlist-item"
+                            @click="openAudioControls" style="width:100%;">
+                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
+                        <div class="name">{{app.getLz('term.audioControls')}}</div>
+                    </button>
                 </div>
             </div>
         </div>
@@ -46,6 +51,10 @@
                     notyf.error(app.getLz('spatial.notTurnedOn'))
                 }
             },
+            openAudioControls() {
+	            app.modals.audioControls = true
+	            app.modals.audioSettings = false
+            }
         }
     });
 </script>

src/renderer/views/components/fullscreen.ejs

@@ -80,7 +80,7 @@
                     <div class="app-chrome-item volume display--large">
                         <div class="input-container">
                         <button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
-                        <input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="$root.cfg.audio.maxVolume" v-model="app.mk.volume"
+                        <input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume" v-model="app.mk.volume"
                                v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()">
                         </div>       
                     </div>

src/renderer/views/components/mediaitem-square.ejs

@@ -144,13 +144,15 @@
             },
             async isInLibrary() {
                 if (this.item.type && !this.item.type.includes("library")) {
-                    var params = {
+                    let params = {
-                        "fields[playlists]": "inLibrary",
+                        relate:"library",
-                        "fields[albums]": "inLibrary",
+                        "fields":"inLibrary",
-                        "relate": "library",
                         "extend": this.revisedRandId()
                     }
-                    var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
+                    let kind = this.item.type ?? this.item.attributes.playParams.kind
+                    let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
+                    if (truekind == "musicVideos") {truekind = "music-videos"}
+                    let res = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/?ids[${truekind}]=${this.item.attributes.playParams.id ?? this.item.id}`,params);
                     res = res.data.data[0]
                     this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
                 } else {
@@ -158,21 +160,20 @@
                 }
             },
             async removeFromLibrary(id) {
-                var params = {
+                let params = {
-                    "fields[playlists]": "inLibrary",
+                        relate:"library",
-                    "fields[songs]": "inLibrary",
+                        "fields":"inLibrary",
-                    "fields[albums]": "inLibrary",
-                    "relate": "library",
                         "extend": this.revisedRandId()
                     }
-                var id = this.item.id ?? this.item.attributes.playParams.id
+                    let kind = this.item.type ?? this.item.attributes.playParams.kind
-                var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
+                    let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
+                    if (truekind == "musicVideos") {truekind = "music-videos"}
+                    let res = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/?ids[${truekind}]=${this.item.attributes.playParams.id ?? this.item.id}`,params);
                 res= res.data.data[0]
                 if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
                     id = res.relationships.library.data[0].id
                 }
-                let kind = this.item.attributes.playParams.kind ?? this.item.type ?? '';
+
-                var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
                 app.mk.api.v3.music(`v1/me/library/${truekind}/${id.toString()}`,{},
                     {
                     fetchOptions: {

src/renderer/views/pages/library-videos.ejs

@@ -6,8 +6,13 @@
                 </div>
             </div> 
             <div class="madeforyou-body">  
+                <template v-if="videos.length > 0">
                     <mediaitem-square :size="300" :item="item" v-for="item in videos">
                     </mediaitem-square>  
+                </template>
+                <template v-else-if="loaded == true">
+                    <div>{{$root.getLz('term.noVideos')}}</div>
+                </template>    
             </div>                   
     </div>
 </script>
@@ -19,12 +24,14 @@
         data: function(){
             return {
                 videos: [],
+                loaded: false
             }
         },
         mounted() {
             this.$nextTick(async function () {
                 if (this.$data.videos == null || this.$data.videos.length == 0)
                 this.$data.videos = (await this.$root.mk.api.v3.music('/v1/me/library/music-videos')).data?.data ?? []
+                this.$data.loaded = true
             })
         }
     })    

src/renderer/views/pages/settings.ejs

@@ -42,6 +42,16 @@
                         </select>
                     </div>
                 </div>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        {{$root.getLz('term.audioControls')}}
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <button class="md-btn" onclick="app.modals.audioControls = true">
+                            {{$root.getLz('term.audioControls')}}
+                        </button>
+                    </div>
+                </div>
                 <div class="md-option-line">
                     <div class="md-option-segment">
                         {{$root.getLz('settings.option.audio.seamlessTransition')}}