okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into enhancement/search-bar

Browse source
This commit is contained in:
Pedro Galhardo 2022-06-28 23:32:26 +01:00
commit 773209a170
No known key found for this signature in database
GPG key ID: 4740524CD85770A9
33 changed files with 3146 additions and 1311 deletions
Download patch file Download diff file Expand all files Collapse all files

265
src/main/base/browserwindow.ts
View file

@ -1,9 +1,9 @@
import {join} from "path"; import { join } from "path";
import {app, BrowserWindow as bw, ipcMain, ShareMenu, shell, screen} from "electron"; import { app, BrowserWindow as bw, ipcMain, ShareMenu, shell, screen } from "electron";
import * as windowStateKeeper from "electron-window-state"; import * as windowStateKeeper from "electron-window-state";
import * as express from "express"; import * as express from "express";
import * as getPort from "get-port"; import * as getPort from "get-port";
import {search} from "youtube-search-without-api-key"; import { search } from "youtube-search-without-api-key";
import { import {
existsSync, existsSync,
rmSync, rmSync,
@ -16,14 +16,14 @@ import {
rmdirSync, rmdirSync,
lstatSync, lstatSync,
} from "fs"; } from "fs";
import {Stream} from "stream"; import { Stream } from "stream";
import {networkInterfaces} from "os"; import { networkInterfaces } from "os";
import * as mm from 'music-metadata'; import * as mm from 'music-metadata';
import fetch from 'electron-fetch' import fetch from 'electron-fetch'
import {wsapi} from "./wsapi"; import { wsapi } from "./wsapi";
import {utils} from './utils'; import { utils } from './utils';
import {Plugins} from "./plugins"; import { Plugins } from "./plugins";
import {watch} from "chokidar"; import { watch } from "chokidar";
import * as os from "os"; import * as os from "os";
import wallpaper from "wallpaper"; import wallpaper from "wallpaper";
import * as AdmZip from "adm-zip"; import * as AdmZip from "adm-zip";
@ -123,6 +123,7 @@ export class BrowserWindow {
"components/artist-chip", "components/artist-chip",
"components/hello-world", "components/hello-world",
"components/inline-collection-list", "components/inline-collection-list",
"components/settings-window",
], ],
appRoutes: [ appRoutes: [
{ {
@ -201,12 +202,12 @@ export class BrowserWindow {
component: `<cider-browse :data="browsepage"></cider-browse>`, component: `<cider-browse :data="browsepage"></cider-browse>`,
condition: `page == 'browse'`, condition: `page == 'browse'`,
onEnter: `` onEnter: ``
},{ }, {
page: "groupings", page: "groupings",
component: `<cider-groupings :data="browsepage"></cider-groupings>`, component: `<cider-groupings :data="browsepage"></cider-groupings>`,
condition: `page == 'groupings'`, condition: `page == 'groupings'`,
onEnter: `` onEnter: ``
},{ }, {
page: "charts", page: "charts",
component: `<cider-charts :data="browsepage"></cider-charts>`, component: `<cider-charts :data="browsepage"></cider-charts>`,
condition: `page == 'charts'`, condition: `page == 'charts'`,
@ -292,7 +293,7 @@ export class BrowserWindow {
show: false, show: false,
// backgroundColor: "#1E1E1E", // backgroundColor: "#1E1E1E",
titleBarStyle: 'hidden', titleBarStyle: 'hidden',
trafficLightPosition: {x: 15, y: 20}, trafficLightPosition: { x: 15, y: 20 },
webPreferences: { webPreferences: {
experimentalFeatures: true, experimentalFeatures: true,
nodeIntegration: true, nodeIntegration: true,
@ -358,7 +359,7 @@ export class BrowserWindow {
* @yields {object} Electron browser window * @yields {object} Electron browser window
*/ */
async createWindow(): Promise<Electron.BrowserWindow> { async createWindow(): Promise<Electron.BrowserWindow> {
this.clientPort = await getPort({port: 9000}); this.clientPort = await getPort({ port: 9000 });
BrowserWindow.verifyFiles(); BrowserWindow.verifyFiles();
this.StartWatcher(utils.getPath('themes')); this.StartWatcher(utils.getPath('themes'));
@ -495,9 +496,9 @@ export class BrowserWindow {
app.get("/cideraudio/impulses/:file", (req, res) => { app.get("/cideraudio/impulses/:file", (req, res) => {
const impulseExternals = join(utils.getPath("externals"), "/impulses/") const impulseExternals = join(utils.getPath("externals"), "/impulses/")
const impulseFile = join(impulseExternals, req.params.file) const impulseFile = join(impulseExternals, req.params.file)
if(existsSync(impulseFile)) { if (existsSync(impulseFile)) {
res.sendFile(impulseFile) res.sendFile(impulseFile)
}else{ } else {
res.sendFile(join(utils.getPath('srcPath'), "./renderer/audio/impulses/" + req.params.file)) res.sendFile(join(utils.getPath('srcPath'), "./renderer/audio/impulses/" + req.params.file))
} }
}) })
@ -550,8 +551,10 @@ export class BrowserWindow {
app.get("/ciderlocal/:songs", (req, res) => { app.get("/ciderlocal/:songs", (req, res) => {
const audio = atob(req.params.songs.replace(/_/g, '/').replace(/-/g, '+')); const audio = atob(req.params.songs.replace(/_/g, '/').replace(/-/g, '+'));
console.log('auss', audio) console.log('auss', audio)
let data = {data: let data = {
this.localSongs.filter((f: any) => audio.split(',').includes(f.id))}; data:
this.localSongs.filter((f: any) => audio.split(',').includes(f.id))
};
res.send(data); res.send(data);
}); });
@ -638,7 +641,7 @@ export class BrowserWindow {
remote.use(express.static(join(utils.getPath('srcPath'), "./web-remote/"))) remote.use(express.static(join(utils.getPath('srcPath'), "./web-remote/")))
remote.set("views", join(utils.getPath('srcPath'), "./web-remote/views")); remote.set("views", join(utils.getPath('srcPath'), "./web-remote/views"));
remote.set("view engine", "ejs"); remote.set("view engine", "ejs");
getPort({port: 6942}).then((port: number) => { getPort({ port: 6942 }).then((port: number) => {
this.remotePort = port; this.remotePort = port;
// Start Remote Discovery // Start Remote Discovery
this.broadcastRemote() this.broadcastRemote()
@ -671,11 +674,11 @@ export class BrowserWindow {
}); });
} else if (details.url.includes("ciderlocal")) { } else if (details.url.includes("ciderlocal")) {
let text = details.url.toString().includes('ids=') ? decodeURIComponent(details.url.toString()).split("?ids=")[1] : decodeURIComponent(details.url.toString().substring(details.url.toString().lastIndexOf('/') + 1)); let text = details.url.toString().includes('ids=') ? decodeURIComponent(details.url.toString()).split("?ids=")[1] : decodeURIComponent(details.url.toString().substring(details.url.toString().lastIndexOf('/') + 1));
console.log('localurl',text) console.log('localurl', text)
callback({ callback({
redirectURL: `http://localhost:${this.clientPort}/ciderlocal/${Buffer.from(text).toString('base64url')}`, redirectURL: `http://localhost:${this.clientPort}/ciderlocal/${Buffer.from(text).toString('base64url')}`,
}); });
}else { } else {
callback({ callback({
cancel: false, cancel: false,
}); });
@ -717,7 +720,7 @@ export class BrowserWindow {
'KHTML, like Gecko) Mobile/17D50 UCBrowser/12.8.2.1268 Mobile AliApp(TUnionSDK/0.1.20.3) ' 'KHTML, like Gecko) Mobile/17D50 UCBrowser/12.8.2.1268 Mobile AliApp(TUnionSDK/0.1.20.3) '
details.requestHeaders['Referer'] = "https://y.qq.com/portal/player.html" details.requestHeaders['Referer'] = "https://y.qq.com/portal/player.html"
} }
callback({requestHeaders: details.requestHeaders}); callback({ requestHeaders: details.requestHeaders });
} }
); );
@ -774,7 +777,7 @@ export class BrowserWindow {
const Jimp = require("jimp") const Jimp = require("jimp")
const img = await Jimp.read(wpPath) const img = await Jimp.read(wpPath)
const blurAmount = args.blurAmount ?? 256 const blurAmount = args.blurAmount ?? 256
if(blurAmount) { if (blurAmount) {
img.blur(blurAmount) img.blur(blurAmount)
} }
const screens = await screen.getAllDisplays() const screens = await screen.getAllDisplays()
@ -811,7 +814,7 @@ export class BrowserWindow {
} }
// if path is directory, delete it // if path is directory, delete it
if (lstatSync(path).isDirectory()) { if (lstatSync(path).isDirectory()) {
await rmdirSync(path, {recursive: true}); await rmdirSync(path, { recursive: true });
} else { } else {
// if path is file, delete it // if path is file, delete it
await unlinkSync(path); await unlinkSync(path);
@ -842,7 +845,7 @@ export class BrowserWindow {
// remove WidevineCDM from appdata folder // remove WidevineCDM from appdata folder
const widevineCdmPath = join(app.getPath("userData"), "./WidevineCdm"); const widevineCdmPath = join(app.getPath("userData"), "./WidevineCdm");
if (existsSync(widevineCdmPath)) { if (existsSync(widevineCdmPath)) {
rmSync(widevineCdmPath, {recursive: true, force: true}) rmSync(widevineCdmPath, { recursive: true, force: true })
} }
// reinstall WidevineCDM // reinstall WidevineCDM
app.relaunch() app.relaunch()
@ -1134,7 +1137,7 @@ export class BrowserWindow {
// Move window // Move window
ipcMain.on("windowmove", (_event, x, y) => { ipcMain.on("windowmove", (_event, x, y) => {
BrowserWindow.win.setBounds({x, y}); BrowserWindow.win.setBounds({ x, y });
}); });
//Fullscreen //Fullscreen
@ -1149,7 +1152,7 @@ export class BrowserWindow {
//Fullscreen //Fullscreen
ipcMain.on('detachDT', (_event, _) => { ipcMain.on('detachDT', (_event, _) => {
BrowserWindow.win.webContents.openDevTools({mode: 'detach'}); BrowserWindow.win.webContents.openDevTools({ mode: 'detach' });
}) })
ipcMain.handle('relaunchApp', (_event, _) => { ipcMain.handle('relaunchApp', (_event, _) => {
@ -1187,75 +1190,75 @@ export class BrowserWindow {
ipcMain.on("scanLibrary", async (event, folders) => { ipcMain.on("scanLibrary", async (event, folders) => {
async function getFiles(dir : any) { async function getFiles(dir: any) {
const dirents = await readdir(dir, { withFileTypes: true }); const dirents = await readdir(dir, { withFileTypes: true });
const files = await Promise.all(dirents.map((dirent: any) => { const files = await Promise.all(dirents.map((dirent: any) => {
const res = path.resolve(dir, dirent.name); const res = path.resolve(dir, dirent.name);
return dirent.isDirectory() ? getFiles(res) : res; return dirent.isDirectory() ? getFiles(res) : res;
})); }));
return Array.prototype.concat(...files); return Array.prototype.concat(...files);
} }
if (folders == null || folders.length == null || folders.length == 0) folders = ["D:\\Music"] if (folders == null || folders.length == null || folders.length == 0) folders = ["D:\\Music"]
console.log('folders', folders) console.log('folders', folders)
let files: any[] = [] let files: any[] = []
for (var folder of folders){ for (var folder of folders) {
// get files from the Music folder // get files from the Music folder
files = files.concat(await getFiles(folder)) files = files.concat(await getFiles(folder))
} }
//console.log("cider.files", files2); //console.log("cider.files", files2);
let supporttedformats = ["mp3", "aac", "webm", "flac", "m4a", "ogg", "wav", "opus"] let supporttedformats = ["mp3", "aac", "webm", "flac", "m4a", "ogg", "wav", "opus"]
let audiofiles = files.filter(f => supporttedformats.includes(f.substring(f.lastIndexOf('.') + 1))); let audiofiles = files.filter(f => supporttedformats.includes(f.substring(f.lastIndexOf('.') + 1)));
// console.log("cider.files2", audiofiles, audiofiles.length); // console.log("cider.files2", audiofiles, audiofiles.length);
let metadatalist = [] let metadatalist = []
let numid = 0; let numid = 0;
for (var audio of audiofiles) { for (var audio of audiofiles) {
try{ try {
const metadata = await mm.parseFile(audio); const metadata = await mm.parseFile(audio);
if (metadata != null){ if (metadata != null) {
let form = { let form = {
"id": "ciderlocal" + numid, "id": "ciderlocal" + numid,
"type": "podcast-episodes", "type": "podcast-episodes",
"href": audio, "href": audio,
"attributes": { "attributes": {
"artwork": { "artwork": {
"width": 3000, "width": 3000,
"height": 3000, "height": 3000,
"url": metadata.common.picture != undefined ? "data:image/png;base64,"+metadata.common.picture[0].data.toString('base64')+"" : "", "url": metadata.common.picture != undefined ? "data:image/png;base64," + metadata.common.picture[0].data.toString('base64') + "" : "",
}, },
"topics": [], "topics": [],
"url": "", "url": "",
"subscribable": true, "subscribable": true,
"mediaKind": "audio", "mediaKind": "audio",
"genreNames": [ "genreNames": [
"" ""
], ],
// "playParams": { // "playParams": {
// "id": "ciderlocal" + numid, // "id": "ciderlocal" + numid,
// "kind": "podcast", // "kind": "podcast",
// "isLibrary": true, // "isLibrary": true,
// "reporting": false }, // "reporting": false },
"trackNumber": metadata.common.track?.no ?? 0, "trackNumber": metadata.common.track?.no ?? 0,
"discNumber": metadata.common.disk?.no ?? 0, "discNumber": metadata.common.disk?.no ?? 0,
"name": metadata.common.title ?? audio.substring(audio.lastIndexOf('\\') + 1), "name": metadata.common.title ?? audio.substring(audio.lastIndexOf('\\') + 1),
"albumName": metadata.common.album, "albumName": metadata.common.album,
"artistName": metadata.common.artist, "artistName": metadata.common.artist,
"copyright": metadata.common.copyright ?? "", "copyright": metadata.common.copyright ?? "",
"assetUrl": "file:///" +audio, "assetUrl": "file:///" + audio,
"contentAdvisory": "", "contentAdvisory": "",
"releaseDateTime": "2022-05-13T00:23:00Z", "releaseDateTime": "2022-05-13T00:23:00Z",
"durationInMilliseconds": Math.floor((metadata.format.duration?? 0) * 1000), "durationInMilliseconds": Math.floor((metadata.format.duration ?? 0) * 1000),
"offers": [ "offers": [
{ {
"kind": "get", "kind": "get",
"type": "STDQ" "type": "STDQ"
} }
], ],
"contentRating": "clean" "contentRating": "clean"
} }
}; };
numid += 1; numid += 1;
// let form = {"id": "/ciderlocal?" + audio, // let form = {"id": "/ciderlocal?" + audio,
// "type": "library-songs", // "type": "library-songs",
@ -1273,15 +1276,16 @@ export class BrowserWindow {
// "name": metadata.common.title, // "name": metadata.common.title,
// "albumName": metadata.common.album, // "albumName": metadata.common.album,
// "artistName": metadata.common.artist}} // "artistName": metadata.common.artist}}
metadatalist.push(form)} metadatalist.push(form)
} catch (e){} }
} } catch (e) { }
// console.log('metadatalist', metadatalist);
this.localSongs = metadatalist;
BrowserWindow.win.webContents.send('getUpdatedLocalList', metadatalist);
} }
// console.log('metadatalist', metadatalist);
this.localSongs = metadatalist;
BrowserWindow.win.webContents.send('getUpdatedLocalList', metadatalist);
}
) )
ipcMain.on('writeWAV', (event, leftpcm, rightpcm, bufferlength) => { ipcMain.on('writeWAV', (event, leftpcm, rightpcm, bufferlength) => {
@ -1449,8 +1453,8 @@ export class BrowserWindow {
console.log('sc', SoundCheckTag) console.log('sc', SoundCheckTag)
BrowserWindow.win.webContents.send('SoundCheckTag', SoundCheckTag) BrowserWindow.win.webContents.send('SoundCheckTag', SoundCheckTag)
}).catch(err => { }).catch(err => {
console.log(err) console.log(err)
}); });
}); });
@ -1502,35 +1506,38 @@ export class BrowserWindow {
/* ********************************************************************************************* /* *********************************************************************************************
* Window Events * Window Events
* **********************************************************************************************/ * **********************************************************************************************/
if (process.platform === "win32") { let WND_STATE = {
let WND_STATE = { MINIMIZED: 0,
MINIMIZED: 0, NORMAL: 1,
NORMAL: 1, MAXIMIZED: 2,
MAXIMIZED: 2, FULL_SCREEN: 3,
FULL_SCREEN: 3, };
}; let wndState = WND_STATE.NORMAL;
let wndState = WND_STATE.NORMAL;
BrowserWindow.win.on("resize", (_: any) => {
const isMaximized = BrowserWindow.win.isMaximized();
const isMinimized = BrowserWindow.win.isMinimized();
const isFullScreen = BrowserWindow.win.isFullScreen();
const state = wndState;
if (isMinimized && state !== WND_STATE.MINIMIZED) {
wndState = WND_STATE.MINIMIZED;
BrowserWindow.win.webContents.send('window-state-changed', 'minimized');
} else if (isFullScreen && state !== WND_STATE.FULL_SCREEN) {
wndState = WND_STATE.FULL_SCREEN;
BrowserWindow.win.webContents.send('window-state-changed', 'fullscreen')
} else if (isMaximized && state !== WND_STATE.MAXIMIZED) {
wndState = WND_STATE.MAXIMIZED;
BrowserWindow.win.webContents.send('window-state-changed', 'maximized')
BrowserWindow.win.webContents.executeJavaScript(`app.chrome.maximized = true`);
} else if (state !== WND_STATE.NORMAL) {
wndState = WND_STATE.NORMAL;
BrowserWindow.win.webContents.send('window-state-changed', 'normal')
BrowserWindow.win.webContents.executeJavaScript(
`app.chrome.maximized = false`
);
}
});
BrowserWindow.win.on("resize", (_: any) => {
const isMaximized = BrowserWindow.win.isMaximized();
const isMinimized = BrowserWindow.win.isMinimized();
const isFullScreen = BrowserWindow.win.isFullScreen();
const state = wndState;
if (isMinimized && state !== WND_STATE.MINIMIZED) {
wndState = WND_STATE.MINIMIZED;
} else if (isFullScreen && state !== WND_STATE.FULL_SCREEN) {
wndState = WND_STATE.FULL_SCREEN;
} else if (isMaximized && state !== WND_STATE.MAXIMIZED) {
wndState = WND_STATE.MAXIMIZED;
BrowserWindow.win.webContents.executeJavaScript(`app.chrome.maximized = true`);
} else if (state !== WND_STATE.NORMAL) {
wndState = WND_STATE.NORMAL;
BrowserWindow.win.webContents.executeJavaScript(
`app.chrome.maximized = false`
);
}
});
}
let isQuiting = false let isQuiting = false
@ -1573,10 +1580,10 @@ export class BrowserWindow {
// Set window Handler // Set window Handler
BrowserWindow.win.webContents.setWindowOpenHandler((x: any) => { BrowserWindow.win.webContents.setWindowOpenHandler((x: any) => {
if (x.url.includes("apple") || x.url.includes("localhost")) { if (x.url.includes("apple") || x.url.includes("localhost")) {
return {action: "allow"}; return { action: "allow" };
} }
shell.openExternal(x.url).catch(console.error); shell.openExternal(x.url).catch(console.error);
return {action: "deny"}; return { action: "deny" };
}); });
} }
@ -1632,7 +1639,7 @@ export class BrowserWindow {
"CtlN": "Cider", "CtlN": "Cider",
"iV": "196623" "iV": "196623"
}; };
let server2 = mdns.createAdvertisement(x, `${await getPort({port: 3839})}`, { let server2 = mdns.createAdvertisement(x, `${await getPort({ port: 3839 })}`, {
name: encoded, name: encoded,
txt: txt_record txt: txt_record
}); });

2
src/main/plugins/menubar.ts
View file

@ -37,7 +37,7 @@ export default class Thumbar {
{ {
label: utils.getLocale(utils.getStoreValue('general.language'), 'term.settings'), label: utils.getLocale(utils.getStoreValue('general.language'), 'term.settings'),
accelerator: utils.getStoreValue("general.keybindings.settings").join('+'), accelerator: utils.getStoreValue("general.keybindings.settings").join('+'),
click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('settings')`) click: () => utils.getWindow().webContents.executeJavaScript(`app.openSettingsPage()`)
}, },
...(this.isMac ? [ ...(this.isMac ? [
{type: 'separator'}, {type: 'separator'},

3
src/renderer/assets/feather/hard-drive.svg Normal file
View file

@ -0,0 +1,3 @@
<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-hard-drive">
<path d="M22 12H2m3.45-6.89L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11zM6 16h.01M10 16h.01"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 372 B

4
src/renderer/assets/feather/headphones.svg Normal file
View file

@ -0,0 +1,4 @@
<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-headphones">
<path d="M3 18v-6a9 9 0 0 1 18 0v6"/>
<path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 390 B

5
src/renderer/assets/feather/pen-tool.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pen-tool" width="20" height="20">
<path d="m12 19 7-7 3 3-7 7-3-3z"/>
<path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5zM2 2l7.586 7.586"/>
<circle cx="11" cy="11" r="2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 363 B

3
src/renderer/assets/feather/zap.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap" width="20" height="20">
<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 263 B

1
src/renderer/assets/settings.svg Normal file
View file

@ -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-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1,011 B

BIN
src/renderer/audio/impulses/CAP_64.wav
View file

Binary file not shown.

2
src/renderer/index.js
View file

@ -81,7 +81,7 @@ Vue.component("sidebar-library-item", {
}, },
async mounted() { async mounted() {
if (this.svgIcon) { if (this.svgIcon) {
this.svgIconData = await this.app.getSvgIcon(this.svgIcon); this.svgIconData = this.svgIcon;
} }
}, },
methods: {}, methods: {},

5
src/renderer/less/bootstrap.less vendored
View file

@ -2432,10 +2432,9 @@ fieldset:disabled .btn {
.nav-pills .nav-link { .nav-pills .nav-link {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-radius: 50px; border-radius: 6px;
color: #eee; color: #eee;
-webkit-user-drag: none; -webkit-user-drag: none;
// transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
font-weight: 500; font-weight: 500;
margin: 0px 4px; margin: 0px 4px;
&:hover { &:hover {
@ -2447,7 +2446,7 @@ fieldset:disabled .btn {
.nav-pills .show > .nav-link { .nav-pills .show > .nav-link {
color: #fff; color: #fff;
background-color: var(--selected); background-color: var(--selected);
outline:2px solid var(--keyColor); // outline:2px solid var(--keyColor);
} }
.nav-fill > .nav-link, .nav-fill > .nav-link,

8
src/renderer/less/directives.less
View file

@ -338,7 +338,9 @@
#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item { #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
min-width: 110px; min-width: 110px;
font-size: 0em; .sidebar-item-text {
display: none;
}
.sidebar-icon { .sidebar-icon {
margin: 0px; margin: 0px;
@ -353,7 +355,9 @@
#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item { #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
min-width: 60px; min-width: 60px;
font-size: 0em; .sidebar-item-text {
display: none;
}
.sidebar-icon { .sidebar-icon {
margin: 0px; margin: 0px;

175
src/renderer/less/elements.less
View file

@ -2168,107 +2168,116 @@ input[type=checkbox][switch]:checked:active::before {
} }
// fancy pills // fancy pills
.nav-pills { .fancy-pills {
position: relative; .nav-pills {
.nav-link {
transition: transform .3s var(--appleEase);
position: relative; position: relative;
.nav-link {
&:after { transition: transform .3s var(--appleEase);
--dist: 1px; position: relative;
content: "";
position: absolute;
top: var(--dist);
bottom: var(--dist);
left: var(--dist);
right: var(--dist);
// width : 100%;
// height : 100%;
background-color: transparent; background-color: transparent;
border: 0;
border-radius: 50px; border-radius: 50px;
z-index: -1;
opacity: 0;
transition: background-color .5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius .32s var(--appleEase);
}
&:hover {
outline: none;
transform: scale(1.1);
// background: #eee;
background: transparent;
color: #333;
&:after {
opacity: 1;
background-color: #eee;
transition: background-color .25s var(--appleEase),
border-radius .25s var(--appleEase),
color .0s var(--appleEase),
opacity 0.0s var(--appleEase);
}
}
&.active {
outline: none;
transform: scale(1.1);
// background: #eee;
background: transparent;
color: #333;
font-weight: 600;
&:after {
opacity: 1;
background-color: #eee;
}
}
}
&:hover {
.nav-link.active {
outline: none;
transform: scale(1.0);
background: transparent;
color: #eee; color: #eee;
transform: scale(1.0); -webkit-user-drag: none;
font-weight: 500;
margin: 0px 4px;
&:after { &:after {
background: rgb(200 200 200 / 15%); --dist: 1px;
opacity: 1; content: "";
transition: color 0s; position: absolute;
// border-radius: 5px; top: var(--dist);
--dist: 4px; bottom: var(--dist);
left: var(--dist);
right: var(--dist);
// width : 100%;
// height : 100%;
background-color: transparent;
border-radius: 50px;
z-index: -1;
opacity: 0;
transition: background-color .5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius .32s var(--appleEase);
} }
&:hover { &:hover {
outline: none;
transform: scale(1.1); transform: scale(1.1);
z-index: 1; // background: #eee;
background: transparent;
color: #333; color: #333;
&:after { &:after {
background: #eee; opacity: 1;
border-radius: inherit; background-color: #eee;
--dist: 1px; transition: background-color .25s var(--appleEase),
border-radius .25s var(--appleEase),
color .0s var(--appleEase),
opacity 0.0s var(--appleEase);
}
}
&.active {
outline: none;
transform: scale(1.1);
// background: #eee;
background: transparent;
color: #333;
font-weight: 600;
&:after {
opacity: 1;
background-color: #eee;
}
}
}
&:hover {
.nav-link.active {
outline: none;
transform: scale(1.0);
background: transparent;
color: #eee;
transform: scale(1.0);
&:after {
background: rgb(200 200 200 / 15%);
opacity: 1;
transition: color 0s;
// border-radius: 5px;
--dist: 4px;
}
&:hover {
transform: scale(1.1);
z-index: 1;
color: #333;
&:after {
background: #eee;
border-radius: inherit;
--dist: 1px;
}
} }
} }
} }
}
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: rgb(200 200 200 / 10%); background: rgb(200 200 200 / 10%);
border-radius: 50px; border-radius: 50px;
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
}
} }
} }

393
src/renderer/less/helpers.less
View file

@ -1,6 +1,6 @@
.notyf__toast { .notyf__toast {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
cursor : pointer; cursor: pointer;
} }
.notyf-info { .notyf-info {
@ -9,142 +9,145 @@
.tooltip-inner { .tooltip-inner {
background: #2f2f2f; background: #2f2f2f;
opacity : 1; opacity: 1;
border : 1px solid rgb(0 0 0 / 35%); border: 1px solid rgb(0 0 0 / 35%);
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
} }
.modal-fullscreen { .modal-fullscreen {
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
position : fixed; position: fixed;
top : 0; top: 0;
left : 0; left: 0;
width : 100%; width: 100%;
height : 100%; height: 100%;
background : rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
z-index : 1000; z-index: 1000;
.modal-window { .modal-window {
background : #333; background: #333;
border-radius: 10px; border-radius: 10px;
box-shadow : var(--mediaItemShadow-Shadow); box-shadow: var(--mediaItemShadow-Shadow);
display : flex; display: flex;
flex-flow : column; flex-flow: column;
max-height : 500px; max-height: 500px;
max-width : 360px; max-width: 360px;
background : #121212; background: #121212;
width : 100%; width: 100%;
position : relative; position: relative;
&:after { &:after {
content : ""; content: "";
position : absolute; position: absolute;
top : 0; top: 0;
left : 0; left: 0;
width : 100%; width: 100%;
height : 100%; height: 100%;
pointer-events: none; pointer-events: none;
box-shadow : var(--mediaItemShadow); box-shadow: var(--mediaItemShadow);
z-index : 1; z-index: 1;
border-radius : inherit; border-radius: inherit;
} }
.modal-header { .modal-header {
width : 100%; width: 100%;
padding: 6px; padding: 6px;
} }
.modal-content { .modal-content {
width : 100%; width: 100%;
height : 100%; height: 100%;
overflow : hidden; overflow: hidden;
overflow-y: overlay; overflow-y: overlay;
} }
.modal-footer {} .modal-footer {
}
} }
} }
.spatialproperties-panel { .spatialproperties-panel {
.modal-window { .modal-window {
&:not(.airplay-modal){ &:not(.airplay-modal) {
height : 700px; height: 700px;
max-height: 700px; max-height: 700px;
width : 800px; width: 800px;
max-width : 800px;} max-width: 800px;
overflow : hidden; }
overflow: hidden;
.info-header { .info-header {
padding-left: 12px; padding-left: 12px;
} }
.visual-container { .visual-container {
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
overflow : hidden; overflow: hidden;
} }
.visual { .visual {
position : relative; position: relative;
height : 250px; height: 250px;
width : 300px; width: 300px;
display : inline-flex; display: inline-flex;
align-items : flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
filter : drop-shadow(2px 12px 6px rgb(0 0 0 / 25%)); filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
margin : 0 auto; margin: 0 auto;
.face { .face {
position : absolute; position: absolute;
width : calc(12px * 6); width: calc(12px * 6);
height : calc(12px * 6); height: calc(12px * 6);
border-radius: 6px; border-radius: 6px;
transform : rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg);
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
} }
.listener { .listener {
position : absolute; position: absolute;
width : 32px; width: 32px;
height : 32px; height: 32px;
border-radius: 6px; border-radius: 6px;
transform : rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg);
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
background : white; background: white;
color : black; color: black;
z-index : 2; z-index: 2;
} }
.audiosource { .audiosource {
position : absolute; position: absolute;
width : 32px; width: 32px;
height : 32px; height: 32px;
border-radius: 6px; border-radius: 6px;
transform : rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg);
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
background : yellow; background: yellow;
z-index : 2; z-index: 2;
} }
.face:nth-of-type(1) { .face:nth-of-type(1) {
background: linear-gradient(45deg, #28223a, #1f2038); background: linear-gradient(45deg, #28223a, #1f2038);
z-index : 1; z-index: 1;
} }
.face:nth-of-type(2) { .face:nth-of-type(2) {
background: linear-gradient(45deg, #7d53ad, #5763ff); background: linear-gradient(45deg, #7d53ad, #5763ff);
transform : rotateX(60deg) rotateZ(-45deg) translateZ(30px); transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
opacity : 0.7; opacity: 0.7;
z-index : 3; z-index: 3;
} }
} }
.modal-header { .modal-header {
padding : 16px; padding: 16px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -162,14 +165,14 @@
.addtoplaylist-panel { .addtoplaylist-panel {
.modal-window { .modal-window {
max-height : 600px; max-height: 600px;
max-width : 400px; max-width: 400px;
background : rgb(18 18 18 / 90%); background: rgb(18 18 18 / 90%);
overflow : hidden; overflow: hidden;
backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
.modal-header { .modal-header {
padding : 16px; padding: 16px;
position: relative; position: relative;
.modal-title { .modal-title {
@ -182,34 +185,34 @@
} }
.modal-search { .modal-search {
width : 100%; width: 100%;
padding : 0px 16px; padding: 0px 16px;
position: relative; position: relative;
} }
.playlist-item { .playlist-item {
appearance : none; appearance: none;
border : 0px; border: 0px;
text-align : left; text-align: left;
width : 100%; width: 100%;
margin : 0; margin: 0;
display : flex; display: flex;
background : rgba(32, 32, 32, 0.46); background: rgba(32, 32, 32, 0.46);
color : #eee; color: #eee;
font-family: inherit; font-family: inherit;
font-size : 0.98em; font-size: 0.98em;
padding : 6px 12px; padding: 6px 12px;
align-items: center; align-items: center;
flex-flow : row; flex-flow: row;
.icon { .icon {
pointer-events : none; pointer-events: none;
width : 32px; width: 32px;
height : 32px; height: 32px;
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
margin-right : 6px; margin-right: 6px;
} }
.name { .name {
@ -236,35 +239,35 @@
} }
.menu-panel { .menu-panel {
width : 100%; width: 100%;
height : 100%; height: 100%;
position : fixed; position: fixed;
top : 0; top: 0;
left : 0; left: 0;
z-index : 100001; z-index: 100001;
display : flex; display: flex;
justify-content : center; justify-content: center;
align-items : center; align-items: center;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
.menu-header-body { .menu-header-body {
padding : 6px; padding: 6px;
display : flex; display: flex;
background: rgb(200 200 200 / 10%); background: rgb(200 200 200 / 10%);
.menu-option-header { .menu-option-header {
width : 40px; width: 40px;
height : 40px; height: 40px;
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
border-radius : var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
appearance : none; appearance: none;
border : 0; border: 0;
background : transparent; background: transparent;
&.active { &.active {
.sidebar-icon>.svg-icon { .sidebar-icon > .svg-icon {
--color: var(--keyColor); --color: var(--keyColor);
} }
} }
@ -280,62 +283,62 @@
} }
.menu-panel-body { .menu-panel-body {
display : flex; display: flex;
flex-flow : column; flex-flow: column;
background : rgb(30 30 30 / 45%); background: rgb(30 30 30 / 45%);
backdrop-filter: blur(32px) saturate(180%); backdrop-filter: blur(32px) saturate(180%);
position : relative; position: relative;
min-width : 200px; min-width: 200px;
box-shadow : var(--ciderShadow-Generic); box-shadow: var(--ciderShadow-Generic);
border-radius : var(--panelRadius); border-radius: var(--panelRadius);
overflow : hidden; overflow: hidden;
font-size : 13px; font-size: 13px;
.menu-option { .menu-option {
text-align: left; text-align: left;
display : flex; display: flex;
appearance: none; appearance: none;
border : 0px; border: 0px;
font : inherit; font: inherit;
background: transparent; background: transparent;
color : inherit; color: inherit;
margin : 0 auto; margin: 0 auto;
position : relative; position: relative;
width : 100%; width: 100%;
padding : 9px 14px; padding: 9px 14px;
align-items: center; align-items: center;
&::before { &::before {
background : var(--hover); background: var(--hover);
border-radius: 6px; border-radius: 6px;
content : ""; content: "";
--sizeY : 3px; --sizeY: 3px;
--sizeX : 4px; --sizeX: 4px;
top : var(--sizeY); top: var(--sizeY);
left : var(--sizeX); left: var(--sizeX);
bottom : var(--sizeY); bottom: var(--sizeY);
right : var(--sizeX); right: var(--sizeX);
position : absolute; position: absolute;
opacity : 0; opacity: 0;
transform : scale(0.98); transform: scale(0.98);
z-index : -1; z-index: -1;
transition : transform .25s ease-out, opacity .25s ease-out; transition: transform .25s ease-out, opacity .25s ease-out;
} }
&:hover { &:hover {
&::before { &::before {
transition: transform 0s ease-in, opacity 0s ease-in; transition: transform 0s ease-in, opacity 0s ease-in;
opacity : 1; opacity: 1;
transform : scale(1); transform: scale(1);
} }
} }
&:active { &:active {
&::before { &::before {
transition: transform .1s ease-in-out, opacity .1s ease-in-out; transition: transform .1s ease-in-out, opacity .1s ease-in-out;
opacity : 1; opacity: 1;
transform : scale(0.98); transform: scale(0.98);
background: var(--selected-click); background: var(--selected-click);
} }
} }
@ -375,25 +378,25 @@
} }
.menu-body { .menu-body {
overflow : overlay; overflow: overlay;
height : 100%; height: 100%;
display : flex; display: flex;
flex-flow: column; flex-flow: column;
gap : 0px; gap: 0px;
padding : 0px; padding: 0px;
position : relative; position: relative;
} }
.menu-footer { .menu-footer {
width : 100%; width: 100%;
padding: 12px; padding: 12px;
} }
} }
.queue-panel { .queue-panel {
height : 100%; height: 100%;
width : 100%; width: 100%;
display : flex; display: flex;
flex-flow: column; flex-flow: column;
.queue-header-text { .queue-header-text {
@ -402,52 +405,52 @@
.queue-body { .queue-body {
overflow: overlay; overflow: overlay;
height : 100%; height: 100%;
} }
.queue-footer { .queue-footer {
width : 100%; width: 100%;
padding: 12px; padding: 12px;
} }
.autoplay { .autoplay {
background : rgb(200 200 200 / 15%); background: rgb(200 200 200 / 15%);
display : flex; display: flex;
justify-content: center; justify-content: center;
appearance : none; appearance: none;
border : 0; border: 0;
border-radius : 6px; border-radius: 6px;
height : 32px; height: 32px;
width : 32px; width: 32px;
} }
.infinity { .infinity {
content: url("./assets/infinity.svg"); content: url("./assets/infinity.svg");
margin : auto; margin: auto;
} }
} }
.moreinfo-modal { .moreinfo-modal {
.modal-window { .modal-window {
height : 70%; height: 70%;
max-height : 100%; max-height: 100%;
width : 45%; width: 45%;
max-width : 100%; max-width: 100%;
overflow : hidden; overflow: hidden;
line-height: 1.25; line-height: 1.25;
} }
.modal-content { .modal-content {
padding : 1em; padding: 1em;
font-size: 0.8rem; font-size: 0.8rem;
br { br {
display : block; display: block;
/* makes it have a width */ /* makes it have a width */
content : ""; content: "";
/* clears default height */ /* clears default height */
margin : 2em; margin: 2em;
margin-bottom: -0.6rem; margin-bottom: -0.6rem;
} }
} }
@ -457,7 +460,7 @@
.modal-title { .modal-title {
text-align: unset !important; text-align: unset !important;
width : 100%; width: 100%;
&:not(.modal-subtitle) { &:not(.modal-subtitle) {
font-size: 25px; font-size: 25px;
@ -479,8 +482,9 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
filter:blur(32px) brightness(50%) saturate(280%); filter: blur(32px) brightness(50%) saturate(280%);
} }
.popover-artwork { .popover-artwork {
width: 200px; width: 200px;
height: 200px; height: 200px;
@ -491,7 +495,8 @@
.song-name { .song-name {
font-weight: 600; font-weight: 600;
} }
.song-artist,.song-album {
.song-artist, .song-album {
opacity: 0.75; opacity: 0.75;
cursor: pointer; cursor: pointer;
@ -501,3 +506,19 @@
} }
} }
} }
._svg-icon {
--icon: url("./assets/chevron-left.svg");
--size: 1em;
width: var(--size);
height: var(--size);
-webkit-mask-image: var(--icon);
-webkit-mask-position: center;
-webkit-mask-size: contain;
background: rgb(255 255 255 / 76%);
-webkit-mask-repeat: no-repeat;
&.md {
--size: 1.2em;
}
}

11
src/renderer/less/macos.less
View file

@ -6,6 +6,7 @@ body[platform="darwin"] {
&.notransparency::before { &.notransparency::before {
display: none; display: none;
} }
#app { #app {
&.simplebg { &.simplebg {
background: transparent; background: transparent;
@ -33,6 +34,16 @@ body[platform="darwin"] {
background-color: var(--macOSChromeColor); background-color: var(--macOSChromeColor);
} }
} }
// &::after {
// position: fixed;
// top:0;left:0;right:0;bottom:0;
// box-shadow: inset 0px 0px .5px 1px rgb(200 200 200 / 40%);
// border-radius: 10px;
// content: " ";
// z-index: 999999;
// pointer-events: none;
// }
} }
#app-main { #app-main {

1711
src/renderer/less/pages.less
View file

File diff suppressed because it is too large Load diff

1
src/renderer/main/app.js
View file

@ -7,6 +7,7 @@ import {Events} from './events.js'
import { wsapi } from "./wsapi_interop.js" import { wsapi } from "./wsapi_interop.js"
import { MusicKitTools } from "./musickittools.js" import { MusicKitTools } from "./musickittools.js"
import { spawnMica } from "./mica.js" import { spawnMica } from "./mica.js"
import { svgIcon } from './components/svg-icon.js'
// Define window objects // Define window objects

20
src/renderer/main/components/svg-icon.js Normal file
View file

@ -0,0 +1,20 @@
export const svgIcon = Vue.component("svg-icon", {
template: `
<div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
`,
props: {
name: {
type: String,
required: false
},
classes: {
type: String,
required: false
},
url: {
type: String,
required: true,
default: "./assets/repeat.svg"
}
}
})

75
src/renderer/main/vueapp.js
View file

@ -168,6 +168,7 @@ const app = new Vue({
location: "", location: "",
info: {} info: {}
}, },
windowState: "normal",
desiredPageTransition: "wpfade_transform", desiredPageTransition: "wpfade_transform",
hideUserInfo: ipcRenderer.sendSync("is-dev") || false, hideUserInfo: ipcRenderer.sendSync("is-dev") || false,
artworkReady: false, artworkReady: false,
@ -217,6 +218,7 @@ const app = new Vue({
castMenu: false, castMenu: false,
moreInfo: false, moreInfo: false,
airplayPW: false, airplayPW: false,
settings: false
}, },
socialBadges: { socialBadges: {
badgeMap: {}, badgeMap: {},
@ -243,6 +245,7 @@ const app = new Vue({
notyf: notyf, notyf: notyf,
idleTimer: null, idleTimer: null,
idleState: false, idleState: false,
appVisible: true
}, },
watch: { watch: {
cfg: { cfg: {
@ -274,6 +277,12 @@ const app = new Vue({
}, false) }, false)
}, },
methods: { methods: {
hotReload() {
this.appVisible = false
setTimeout(() => {
this.appVisible = true
}, 1000)
},
setWindowHash(route = "") { setWindowHash(route = "") {
window.location.hash = `#${route}`; window.location.hash = `#${route}`;
}, },
@ -849,6 +858,10 @@ const app = new Vue({
this.library.localsongs = data; this.library.localsongs = data;
}) })
ipcRenderer.on('window-state-changed', (event, data) => {
this.chrome.windowState = data
})
ipcRenderer.on('SoundCheckTag', (event, tag) => { ipcRenderer.on('SoundCheckTag', (event, tag) => {
// let replaygain = self.parseSCTagToRG(tag) // let replaygain = self.parseSCTagToRG(tag)
try { try {
@ -922,10 +935,10 @@ const app = new Vue({
app.mk.nowPlayingItem.attributes.name = e.title app.mk.nowPlayingItem.attributes.name = e.title
app.mk.nowPlayingItem.attributes.artistName = e.performer app.mk.nowPlayingItem.attributes.artistName = e.performer
app.mk.nowPlayingItem.attributes.albumName = e.album app.mk.nowPlayingItem.attributes.albumName = e.album
if(e.links[1]) { if (e.links[1]) {
app.currentArtUrl = e.links[1].url app.currentArtUrl = e.links[1].url
app.currentArtUrlRaw = e.links[1].url app.currentArtUrlRaw = e.links[1].url
}else{ } else {
app.currentArtUrl = e.links[0].url app.currentArtUrl = e.links[0].url
app.currentArtUrlRaw = e.links[0].url app.currentArtUrlRaw = e.links[0].url
} }
@ -938,7 +951,7 @@ const app = new Vue({
self.$refs.queue.updateQueue(); self.$refs.queue.updateQueue();
} }
this.currentSongInfo = a this.currentSongInfo = a
if (this.currentSongInfo === null || this.currentSongInfo === undefined) {return;} // EVIL EMPTY OBJECTS BE GONE if (this.currentSongInfo === null || this.currentSongInfo === undefined) { return; } // EVIL EMPTY OBJECTS BE GONE
console.debug("songinfo: " + JSON.stringify(a)) console.debug("songinfo: " + JSON.stringify(a))
if (app.cfg.advanced.AudioContext) { if (app.cfg.advanced.AudioContext) {
@ -953,7 +966,7 @@ const app = new Vue({
} catch (e) { } catch (e) {
localStorage.setItem("playingBitrate", "256") localStorage.setItem("playingBitrate", "256")
} }
if (!app.cfg.audio.normalization) {CiderAudio.hierarchical_loading();} if (!app.cfg.audio.normalization) { CiderAudio.hierarchical_loading(); }
} }
@ -970,16 +983,16 @@ const app = new Vue({
previewURL = response.data.data[0].attributes.previews[0].url previewURL = response.data.data[0].attributes.previews[0].url
if (previewURL) if (previewURL)
console.debug("[Cider][MaikiwiSoundCheck] previewURL response.data.data[0].attributes.previews[0].url: " + previewURL) console.debug("[Cider][MaikiwiSoundCheck] previewURL response.data.data[0].attributes.previews[0].url: " + previewURL)
ipcRenderer.send('getPreviewURL', previewURL) ipcRenderer.send('getPreviewURL', previewURL)
}) })
} else { } else {
if (previewURL) if (previewURL)
console.debug("[Cider][MaikiwiSoundCheck] previewURL in app.mk.nowPlayingItem.previewURL: " + previewURL) console.debug("[Cider][MaikiwiSoundCheck] previewURL in app.mk.nowPlayingItem.previewURL: " + previewURL)
ipcRenderer.send('getPreviewURL', previewURL) ipcRenderer.send('getPreviewURL', previewURL)
} }
} catch (e) { } catch (e) {
if (e instanceof TypeError === false) {console.debug("[Cider][MaikiwiSoundCheck] normalizer function err: " + e)} if (e instanceof TypeError === false) { console.debug("[Cider][MaikiwiSoundCheck] normalizer function err: " + e) }
} }
} }
@ -1294,7 +1307,7 @@ const app = new Vue({
results.forEach(result => { results.forEach(result => {
try { try {
if (result.relationships?.catalog?.data[0]?.attributes?.inFavorites) { if (result.relationships?.catalog?.data[0]?.attributes?.inFavorites) {
if(!favs.includes(result.relationships?.catalog?.data[0].id)) { if (!favs.includes(result.relationships?.catalog?.data[0].id)) {
favs.push(result.relationships?.catalog?.data[0].id) favs.push(result.relationships?.catalog?.data[0].id)
} }
} }
@ -1307,8 +1320,8 @@ const app = new Vue({
return favs return favs
}, },
async setArtistFavorite(id, val = true) { async setArtistFavorite(id, val = true) {
if(val) { if (val) {
if(!app.cfg.home.followedArtists.includes(id)) { if (!app.cfg.home.followedArtists.includes(id)) {
app.cfg.home.followedArtists.push(id) app.cfg.home.followedArtists.push(id)
} }
await app.mk.api.v3.music(`/v1/me/favorites`, { await app.mk.api.v3.music(`/v1/me/favorites`, {
@ -1321,8 +1334,8 @@ const app = new Vue({
method: "POST" method: "POST"
} }
}) })
}else{ } else {
if(app.cfg.home.followedArtists.includes(id)) { if (app.cfg.home.followedArtists.includes(id)) {
app.cfg.home.followedArtists.splice(app.cfg.home.followedArtists.indexOf(id), 1) app.cfg.home.followedArtists.splice(app.cfg.home.followedArtists.indexOf(id), 1)
} }
await app.mk.api.v3.music(`/v1/me/favorites`, { await app.mk.api.v3.music(`/v1/me/favorites`, {
@ -1454,7 +1467,7 @@ const app = new Vue({
}, },
{ {
name: app.getLz("action.refresh"), name: app.getLz("action.refresh"),
action: ()=>{ action: () => {
this.refreshPlaylists() this.refreshPlaylists()
} }
} }
@ -2012,8 +2025,8 @@ const app = new Vue({
async getNowPlayingItemDetailed(target) { async getNowPlayingItemDetailed(target) {
let nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem)) let nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem))
if(nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) { if (nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) {
nowPlayingItem.playParams = {kind: "songs"} nowPlayingItem.playParams = { kind: "songs" }
nowPlayingItem.attributes.playParams.catalogId = app.mk.nowPlayingItem.id nowPlayingItem.attributes.playParams.catalogId = app.mk.nowPlayingItem.id
nowPlayingItem.attributes.playParams.id = app.mk.nowPlayingItem.id nowPlayingItem.attributes.playParams.id = app.mk.nowPlayingItem.id
nowPlayingItem.id = app.mk.nowPlayingItem.id nowPlayingItem.id = app.mk.nowPlayingItem.id
@ -4325,7 +4338,7 @@ const app = new Vue({
"name": app.getLz('settings.option.audio.audioLab'), "name": app.getLz('settings.option.audio.audioLab'),
"hidden": true, "hidden": true,
"action": function () { "action": function () {
app.appRoute('audiolabs') app.openSettingsPage('audiolabs')
} }
}, },
] ]
@ -4351,7 +4364,7 @@ const app = new Vue({
try { try {
// if its a radio station, then change the attributes to match a song // if its a radio station, then change the attributes to match a song
const nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem)) const nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem))
if(nowPlayingItem.type == "radioStation" && app.mk.nowPlayingItem.id != -1) { if (nowPlayingItem.type == "radioStation" && app.mk.nowPlayingItem.id != -1) {
nowPlayingItem.type = "song" nowPlayingItem.type = "song"
nowPlayingItem.attributes.playParams.catalogId = app.mk.nowPlayingItem.id nowPlayingItem.attributes.playParams.catalogId = app.mk.nowPlayingItem.id
nowPlayingItem.attributes.playParams.id = app.mk.nowPlayingItem.id nowPlayingItem.attributes.playParams.id = app.mk.nowPlayingItem.id
@ -4384,6 +4397,32 @@ const app = new Vue({
} }
}, },
openSettingsPage(page) {
switch (page) {
case "general":
this.$store.state.pageState.settings.currentTabIndex = 0
break;
case "audio":
this.$store.state.pageState.settings.currentTabIndex = 1
break;
case "audiolabs":
this.$store.state.pageState.settings.currentTabIndex = 2
break;
case "visual":
this.$store.state.pageState.settings.currentTabIndex = 3
break;
case "lyrics":
this.$store.state.pageState.settings.currentTabIndex = 4
break;
case "connectivity":
this.$store.state.pageState.settings.currentTabIndex = 5
break;
case "advanced":
this.$store.state.pageState.settings.currentTabIndex = 6
break;
}
app.modals.settings = true
},
LastFMDeauthorize() { LastFMDeauthorize() {
ipcRenderer.invoke('setStoreValue', 'lastfm.enabled', false).catch((e) => console.error(e)); ipcRenderer.invoke('setStoreValue', 'lastfm.enabled', false).catch((e) => console.error(e));
ipcRenderer.invoke('setStoreValue', 'lastfm.auth_token', '').catch((e) => console.error(e)); ipcRenderer.invoke('setStoreValue', 'lastfm.auth_token', '').catch((e) => console.error(e));
@ -4642,7 +4681,7 @@ const app = new Vue({
label: app.getLz('dialog.ok'), label: app.getLz('dialog.ok'),
}, },
cancel: { cancel: {
label: app.getLz('dialog.cancel'), label: app.getLz('dialog.cancel'),
}, },
}, },
callback: function (result) { callback: function (result) {

4
src/renderer/main/vuex-store.js
View file

@ -12,6 +12,10 @@ const store = new Vuex.Store({
nextUrl: null, nextUrl: null,
items: [], items: [],
size: "normal" size: "normal"
},
settings: {
currentTabIndex: 0,
fullscreen: false
} }
}, },
artwork: { artwork: {

8
src/renderer/style.less
View file

@ -15,6 +15,7 @@
:root { :root {
--appleEase: cubic-bezier(0.42, 0, 0.58, 1); --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
--borderColor: rgb(200 200 200 / 16%);
--mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%); --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
--mediaItemShadow-Shadow: 0 8px 40px rgb(0 0 0 / 0.55); --mediaItemShadow-Shadow: 0 8px 40px rgb(0 0 0 / 0.55);
--mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%); --mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%);
@ -50,6 +51,7 @@
--textColor: #eee; --textColor: #eee;
--replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%)); --replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
--glassFilter: blur(16px) saturate(180%); --glassFilter: blur(16px) saturate(180%);
--glassFilterHeavy: blur(64px) saturate(280%);
--sidebarWidth: 260px; --sidebarWidth: 260px;
} }
@ -856,6 +858,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
.app-sidebar-item { .app-sidebar-item {
--iconSize: 18px;
display: flex; display: flex;
width: 100%; width: 100%;
padding: 8px 12px; padding: 8px 12px;
@ -870,6 +873,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
transition: transform 0.1s; transition: transform 0.1s;
text-align: left; text-align: left;
align-items: center; align-items: center;
gap: 12px;
&.app-sidebar-item-playlist { &.app-sidebar-item-playlist {
-webkit-user-drag: element; -webkit-user-drag: element;
@ -885,6 +889,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
} }
>._svg-icon {
--size: var(--iconSize);
}
} }
.app-sidebar-item:hover { .app-sidebar-item:hover {

2
src/renderer/views/app/app-navigation.ejs
View file

@ -105,7 +105,7 @@
$root.getLz("term.about") $root.getLz("term.about")
}}</span> }}</span>
</button> </button>
<button class="usermenu-item" @click="appRoute('settings')"> <button class="usermenu-item" @click="modals.settings = true">
<span class="usermenu-item-icon"> <span class="usermenu-item-icon">
<%- include("../svg/settings.svg") %> <%- include("../svg/settings.svg") %>
</span> </span>

3
src/renderer/views/app/panels.ejs
View file

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

19
src/renderer/views/app/sidebar.ejs
View file

@ -158,23 +158,10 @@
</div> </div>
<template v-if="!cfg.general.sidebarCollapsed.playlists"> <template v-if="!cfg.general.sidebarCollapsed.playlists">
<button class="app-sidebar-item" @click="playlistHeaderContextMenu"> <button class="app-sidebar-item" @click="playlistHeaderContextMenu">
<div class="sidebar-icon"> <svg-icon url="./assets/feather/plus.svg"></svg-icon>
<svg <div class="sidebar-item-text">
width="46" {{ getLz("action.createNew") }}
height="46"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 5v14"></path>
<path d="M5 12h14"></path>
</svg>
</div> </div>
{{ getLz("action.createNew") }}
</button> </button>
<sidebar-playlist <sidebar-playlist
v-for="item in getPlaylistFolderChildren('p.playlistsroot')" v-for="item in getPlaylistFolderChildren('p.playlistsroot')"

6
src/renderer/views/components/audio-controls.ejs
View file

@ -1,10 +1,10 @@
<script type="text/x-template" id="audio-controls"> <script type="text/x-template" id="audio-controls">
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioControls = false"
@contextmenu.self="app.resetState()"> @contextmenu.self="app.modals.audioControls = false">
<div class="modal-window"> <div class="modal-window">
<div class="modal-header"> <div class="modal-header">
<div class="modal-title">{{app.getLz('term.audioControls')}}</div> <div class="modal-title">{{app.getLz('term.audioControls')}}</div>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button> <button class="close-btn" @click="app.modals.audioControls = false" :aria-label="app.getLz('action.close')"></button>
</div> </div>
<div class="modal-content"> <div class="modal-content">
<div class="md-option-line"> <div class="md-option-line">

6
src/renderer/views/components/audio-playbackrate.ejs
View file

@ -1,10 +1,10 @@
<script type="text/x-template" id="audio-playbackrate"> <script type="text/x-template" id="audio-playbackrate">
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioPlaybackRate = false"
@contextmenu.self="app.resetState()"> @contextmenu.self="app.modals.audioPlaybackRate = false">
<div class="modal-window"> <div class="modal-window">
<div class="modal-header"> <div class="modal-header">
<div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div> <div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button> <button class="close-btn" @click="app.modals.audioPlaybackRate = false" :aria-label="app.getLz('action.close')"></button>
</div> </div>
<div class="modal-content"> <div class="modal-content">
<div class="md-option-line"> <div class="md-option-line">

6
src/renderer/views/components/audio-settings.ejs
View file

@ -1,10 +1,10 @@
<script type="text/x-template" id="audio-settings"> <script type="text/x-template" id="audio-settings">
<template> <template>
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()"> <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioSettings = false" @contextmenu.self="app.modals.audioSettings = false">
<div class="modal-window"> <div class="modal-window">
<div class="modal-header"> <div class="modal-header">
<div class="modal-title">{{app.getLz('term.audioSettings')}}</div> <div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button> <button class="close-btn" @click="app.modals.audioSettings = false" :aria-label="app.getLz('action.close')"></button>
</div> </div>
<div class="modal-content"> <div class="modal-content">
<button class="playlist-item" <button class="playlist-item"
@ -23,7 +23,7 @@
<div class="name">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div> <div class="name">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
</button> </button>
<button class="playlist-item" <button class="playlist-item"
@click="$root.appRoute('audiolabs')" style="width:100%;"> @click="$root.openSettingsPage('audiolabs')" style="width:100%;">
<div class="icon"><%- include("../svg/speaker.svg") %></div> <div class="icon"><%- include("../svg/speaker.svg") %></div>
<div class="name">{{app.getLz('settings.option.audio.audioLab')}}</div> <div class="name">{{app.getLz('settings.option.audio.audioLab')}}</div>
</button> </button>

2
src/renderer/views/components/equalizer.ejs
View file

@ -291,7 +291,7 @@
}) })
}, },
close() { close() {
app.resetState() app.modals.equalizer = false
}, },
changeVibrantBass() { changeVibrantBass() {
if (app.cfg.audio.equalizer.vibrantBass !== '0') { if (app.cfg.audio.equalizer.vibrantBass !== '0') {

1560
src/renderer/views/components/settings-window.ejs Normal file
View file

File diff suppressed because it is too large Load diff

6
src/renderer/views/components/sidebar-playlist.ejs
View file

@ -9,7 +9,7 @@
:href="item.href" :href="item.href"
@click='clickEvent()'> @click='clickEvent()'>
<template v-if="!renaming"> <template v-if="!renaming">
<div class="sidebar-icon" :key="item.id" v-html="icon"></div> {{ item.attributes.name }} <svg-icon :url="icon"/> {{ item.attributes.name }}
<small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small> <small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small>
</template> </template>
<input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else> <input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
@ -57,9 +57,9 @@
}, },
async mounted() { async mounted() {
if (this.item.type !== "library-playlist-folders") { if (this.item.type !== "library-playlist-folders") {
this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg") this.icon = ("./assets/feather/list.svg")
} else { } else {
this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg") this.icon = ("./assets/feather/folder.svg")
} }
let playlistMap = this.$root.playlists.trackMapping let playlistMap = this.$root.playlists.trackMapping
if (this.relateMediaItems.length != 0) { if (this.relateMediaItems.length != 0) {

120
src/renderer/views/main.ejs
View file

@ -2,23 +2,23 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin /> <link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin/>
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin /> <link rel="preconnect" href="https://api.music.apple.com/" crossorigin/>
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin /> <link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin/>
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin /> <link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Cider</title> <title>Cider</title>
<link rel="stylesheet/less" type="text/css" href="style.less" /> <link rel="stylesheet/less" type="text/css" href="style.less"/>
<link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less" /> <link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>
<script src="./lib/less.js"></script> <script src="./lib/less.js"></script>
<script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js" ) %>"></script> <script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js") %>"></script>
<script src="./lib/vue-horizontal.js"></script> <script src="./lib/vue-horizontal.js"></script>
<script src="./lib/smoothscroll.js"></script> <script src="./lib/smoothscroll.js"></script>
<script src="./lib/vuex.min.js"></script> <script src="./lib/vuex.min.js"></script>
@ -55,7 +55,7 @@
align-items: center; align-items: center;
} }
#LOADER>svg { #LOADER > svg {
width: 128px; width: 128px;
} }
@ -67,58 +67,64 @@
</style> </style>
</head> </head>
<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>" platform="<%= env.platform %>"> <body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>"
<div id="LOADER"> platform="<%= env.platform %>">
<%- include("../assets/cider-round.svg") %> <div id="LOADER">
</div> <%- include("../assets/cider-round.svg") %>
<div id="app" :class="getAppClasses()" :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout"> </div>
<transition name="fsModeSwitch"> <div id="app" :class="getAppClasses()"
<div id="app-main" v-show="appMode == 'player'"> v-if="appVisible"
<%- include('app/chrome-top'); %> :window-state="chrome.windowState"
<%- include('app/app-navigation'); %> :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)"
<%- include('app/chrome-bottom'); %> :window-style="cfg.visual.directives.windowLayout">
</div> <transition name="fsModeSwitch">
</transition> <div id="app-main" v-show="appMode == 'player'">
<transition name="fsModeSwitch"> <%- include('app/chrome-top'); %>
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'"> <%- include('app/app-navigation'); %>
<fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" <%- include('app/chrome-bottom'); %>
:richlyrics="richlyrics"></fullscreen-view> </div>
</div> </transition>
</transition> <transition name="fsModeSwitch">
<transition name="fsModeSwitch"> <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
<div class="fullscreen-view-container" v-if="appMode == 'mini'"> <fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics"
<mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics"> :richlyrics="richlyrics"></fullscreen-view>
</mini-view> </div>
</div> </transition>
</transition> <transition name="fsModeSwitch">
<transition name="fsModeSwitch"> <div class="fullscreen-view-container" v-if="appMode == 'mini'">
<div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'"> <mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics">
<cider-oobe></cider-oobe> </mini-view>
</div> </div>
</transition> </transition>
<%- include('app/panels'); %> <transition name="fsModeSwitch">
<div class="cursor" v-if="chrome.showCursor"></div> <div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
</div> <cider-oobe></cider-oobe>
</div>
</transition>
<%- include('app/panels'); %>
<div class="cursor" v-if="chrome.showCursor"></div>
</div>
<% for(var i=0; i < Object.keys(env.components).length ; i++) {%> <% for(var i = 0; i < Object.keys(env.components).length ; i++) { %>
<%- include(env.components[i]); %> <%- include(env.components[i]); %>
<% } %> <% } %>
<script async
src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js") %>"
data-web-components>
</script>
<script src="index.js?v=1"></script>
<script async src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js" ) %>" data-web-components> <script type="text/x-template" id="am-musiccovershelf">
</script>
<script src="index.js?v=1"></script>
<script type="text/x-template" id="am-musiccovershelf">
<h1>{{ component.attributes.title.stringForDisplay }}</h1> <h1>{{ component.attributes.title.stringForDisplay }}</h1>
</script> </script>
<!-- Sidebar Item --> <!-- Sidebar Item -->
<script type="text/x-template" id="sidebar-library-item"> <script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item" <button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)"> :class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
<div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div> <svg-icon :url="svgIconData" v-if="svgIconData != ''" />
{{ name }} <span class="sidebar-item-text">{{ name }}</span>
</button> </button>
</script> </script>

4
src/renderer/views/pages/audiolabs.ejs
View file

@ -1,5 +1,5 @@
<script type="text/x-template" id="audiolabs-page"> <script type="text/x-template" id="audiolabs-page">
<div class="content-inner audiolabs-page "> <div class="audiolabs-page">
<div class="md-option-container"> <div class="md-option-container">
<div class="settings-option-body"> <div class="settings-option-body">
<div class="md-option-line"> <div class="md-option-line">
@ -120,7 +120,7 @@
</select> </select>
</div> </div>
</div> </div>
<div style="opacity: 0.5; pointer-events: none"> <div style="opacity: 0.5; pointer-events: none" v-if="false">
<div class="md-option-header"> <div class="md-option-header">
<span>{{$root.getLz('settings.header.unfinished')}}</span> <span>{{$root.getLz('settings.header.unfinished')}}</span>
</div> </div>

2
src/renderer/views/pages/cider-playlist.ejs
View file

@ -172,7 +172,7 @@
</div> </div>
</div> </div>
<div class="playlist-body scrollbody"> <div class="playlist-body scrollbody">
<b-tabs pills class="track-pills pilldim" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)"> <b-tabs pills class="track-pills pilldim fancy-pills" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)">
<b-tab :title="$root.getLz('term.tracks')"> <b-tab :title="$root.getLz('term.tracks')">
<div @wheel="minClass(true)" @scroll="minClass(true)"> <div @wheel="minClass(true)" @scroll="minClass(true)">
<div class=""> <div class="">

1
src/renderer/views/pages/zoo.ejs
View file

@ -1,5 +1,6 @@
<script type="text/x-template" id="cider-zoo"> <script type="text/x-template" id="cider-zoo">
<div class="content-inner"> <div class="content-inner">
<svg-icon/>
<h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3> <h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
<button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button> <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
{{ $store.state.test }} {{ $store.state.test }}