Merge branch 'main' into enhancement/search-bar
This commit is contained in:
Pedro Galhardo
commit
773209a170
33 changed files with 3146 additions and 1311 deletions
|
|
@ -1,9 +1,9 @@
|
|||
import {join} from "path";
|
||||
import {app, BrowserWindow as bw, ipcMain, ShareMenu, shell, screen} from "electron";
|
||||
import { join } from "path";
|
||||
import { app, BrowserWindow as bw, ipcMain, ShareMenu, shell, screen } from "electron";
|
||||
import * as windowStateKeeper from "electron-window-state";
|
||||
import * as express from "express";
|
||||
import * as getPort from "get-port";
|
||||
import {search} from "youtube-search-without-api-key";
|
||||
import { search } from "youtube-search-without-api-key";
|
||||
import {
|
||||
existsSync,
|
||||
rmSync,
|
||||
|
|
@ -16,14 +16,14 @@ import {
|
|||
rmdirSync,
|
||||
lstatSync,
|
||||
} from "fs";
|
||||
import {Stream} from "stream";
|
||||
import {networkInterfaces} from "os";
|
||||
import { Stream } from "stream";
|
||||
import { networkInterfaces } from "os";
|
||||
import * as mm from 'music-metadata';
|
||||
import fetch from 'electron-fetch'
|
||||
import {wsapi} from "./wsapi";
|
||||
import {utils} from './utils';
|
||||
import {Plugins} from "./plugins";
|
||||
import {watch} from "chokidar";
|
||||
import { wsapi } from "./wsapi";
|
||||
import { utils } from './utils';
|
||||
import { Plugins } from "./plugins";
|
||||
import { watch } from "chokidar";
|
||||
import * as os from "os";
|
||||
import wallpaper from "wallpaper";
|
||||
import * as AdmZip from "adm-zip";
|
||||
|
|
@ -123,6 +123,7 @@ export class BrowserWindow {
|
|||
"components/artist-chip",
|
||||
"components/hello-world",
|
||||
"components/inline-collection-list",
|
||||
"components/settings-window",
|
||||
],
|
||||
appRoutes: [
|
||||
{
|
||||
|
|
@ -201,12 +202,12 @@ export class BrowserWindow {
|
|||
component: `<cider-browse :data="browsepage"></cider-browse>`,
|
||||
condition: `page == 'browse'`,
|
||||
onEnter: ``
|
||||
},{
|
||||
}, {
|
||||
page: "groupings",
|
||||
component: `<cider-groupings :data="browsepage"></cider-groupings>`,
|
||||
condition: `page == 'groupings'`,
|
||||
onEnter: ``
|
||||
},{
|
||||
}, {
|
||||
page: "charts",
|
||||
component: `<cider-charts :data="browsepage"></cider-charts>`,
|
||||
condition: `page == 'charts'`,
|
||||
|
|
@ -292,7 +293,7 @@ export class BrowserWindow {
|
|||
show: false,
|
||||
// backgroundColor: "#1E1E1E",
|
||||
titleBarStyle: 'hidden',
|
||||
trafficLightPosition: {x: 15, y: 20},
|
||||
trafficLightPosition: { x: 15, y: 20 },
|
||||
webPreferences: {
|
||||
experimentalFeatures: true,
|
||||
nodeIntegration: true,
|
||||
|
|
@ -358,7 +359,7 @@ export class BrowserWindow {
|
|||
* @yields {object} Electron browser window
|
||||
*/
|
||||
async createWindow(): Promise<Electron.BrowserWindow> {
|
||||
this.clientPort = await getPort({port: 9000});
|
||||
this.clientPort = await getPort({ port: 9000 });
|
||||
BrowserWindow.verifyFiles();
|
||||
this.StartWatcher(utils.getPath('themes'));
|
||||
|
||||
|
|
@ -495,9 +496,9 @@ export class BrowserWindow {
|
|||
app.get("/cideraudio/impulses/:file", (req, res) => {
|
||||
const impulseExternals = join(utils.getPath("externals"), "/impulses/")
|
||||
const impulseFile = join(impulseExternals, req.params.file)
|
||||
if(existsSync(impulseFile)) {
|
||||
if (existsSync(impulseFile)) {
|
||||
res.sendFile(impulseFile)
|
||||
}else{
|
||||
} else {
|
||||
res.sendFile(join(utils.getPath('srcPath'), "./renderer/audio/impulses/" + req.params.file))
|
||||
}
|
||||
})
|
||||
|
|
@ -550,11 +551,13 @@ export class BrowserWindow {
|
|||
app.get("/ciderlocal/:songs", (req, res) => {
|
||||
const audio = atob(req.params.songs.replace(/_/g, '/').replace(/-/g, '+'));
|
||||
console.log('auss', audio)
|
||||
let data = {data:
|
||||
this.localSongs.filter((f: any) => audio.split(',').includes(f.id))};
|
||||
let data = {
|
||||
data:
|
||||
this.localSongs.filter((f: any) => audio.split(',').includes(f.id))
|
||||
};
|
||||
res.send(data);
|
||||
});
|
||||
|
||||
|
||||
|
||||
app.get("/themes/:theme/*", (req: { params: { theme: string, 0: string } }, res) => {
|
||||
const theme = req.params.theme;
|
||||
|
|
@ -638,7 +641,7 @@ export class BrowserWindow {
|
|||
remote.use(express.static(join(utils.getPath('srcPath'), "./web-remote/")))
|
||||
remote.set("views", join(utils.getPath('srcPath'), "./web-remote/views"));
|
||||
remote.set("view engine", "ejs");
|
||||
getPort({port: 6942}).then((port: number) => {
|
||||
getPort({ port: 6942 }).then((port: number) => {
|
||||
this.remotePort = port;
|
||||
// Start Remote Discovery
|
||||
this.broadcastRemote()
|
||||
|
|
@ -671,11 +674,11 @@ export class BrowserWindow {
|
|||
});
|
||||
} 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));
|
||||
console.log('localurl',text)
|
||||
console.log('localurl', text)
|
||||
callback({
|
||||
redirectURL: `http://localhost:${this.clientPort}/ciderlocal/${Buffer.from(text).toString('base64url')}`,
|
||||
});
|
||||
}else {
|
||||
} else {
|
||||
callback({
|
||||
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) '
|
||||
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 img = await Jimp.read(wpPath)
|
||||
const blurAmount = args.blurAmount ?? 256
|
||||
if(blurAmount) {
|
||||
if (blurAmount) {
|
||||
img.blur(blurAmount)
|
||||
}
|
||||
const screens = await screen.getAllDisplays()
|
||||
|
|
@ -811,7 +814,7 @@ export class BrowserWindow {
|
|||
}
|
||||
// if path is directory, delete it
|
||||
if (lstatSync(path).isDirectory()) {
|
||||
await rmdirSync(path, {recursive: true});
|
||||
await rmdirSync(path, { recursive: true });
|
||||
} else {
|
||||
// if path is file, delete it
|
||||
await unlinkSync(path);
|
||||
|
|
@ -842,7 +845,7 @@ export class BrowserWindow {
|
|||
// remove WidevineCDM from appdata folder
|
||||
const widevineCdmPath = join(app.getPath("userData"), "./WidevineCdm");
|
||||
if (existsSync(widevineCdmPath)) {
|
||||
rmSync(widevineCdmPath, {recursive: true, force: true})
|
||||
rmSync(widevineCdmPath, { recursive: true, force: true })
|
||||
}
|
||||
// reinstall WidevineCDM
|
||||
app.relaunch()
|
||||
|
|
@ -1134,7 +1137,7 @@ export class BrowserWindow {
|
|||
|
||||
// Move window
|
||||
ipcMain.on("windowmove", (_event, x, y) => {
|
||||
BrowserWindow.win.setBounds({x, y});
|
||||
BrowserWindow.win.setBounds({ x, y });
|
||||
});
|
||||
|
||||
//Fullscreen
|
||||
|
|
@ -1149,7 +1152,7 @@ export class BrowserWindow {
|
|||
|
||||
//Fullscreen
|
||||
ipcMain.on('detachDT', (_event, _) => {
|
||||
BrowserWindow.win.webContents.openDevTools({mode: 'detach'});
|
||||
BrowserWindow.win.webContents.openDevTools({ mode: 'detach' });
|
||||
})
|
||||
|
||||
ipcMain.handle('relaunchApp', (_event, _) => {
|
||||
|
|
@ -1187,76 +1190,76 @@ export class BrowserWindow {
|
|||
|
||||
|
||||
ipcMain.on("scanLibrary", async (event, folders) => {
|
||||
async function getFiles(dir : any) {
|
||||
async function getFiles(dir: any) {
|
||||
const dirents = await readdir(dir, { withFileTypes: true });
|
||||
const files = await Promise.all(dirents.map((dirent: any) => {
|
||||
const res = path.resolve(dir, dirent.name);
|
||||
return dirent.isDirectory() ? getFiles(res) : res;
|
||||
const res = path.resolve(dir, dirent.name);
|
||||
return dirent.isDirectory() ? getFiles(res) : res;
|
||||
}));
|
||||
return Array.prototype.concat(...files);
|
||||
}
|
||||
if (folders == null || folders.length == null || folders.length == 0) folders = ["D:\\Music"]
|
||||
console.log('folders', folders)
|
||||
let files: any[] = []
|
||||
for (var folder of folders){
|
||||
// get files from the Music folder
|
||||
files = files.concat(await getFiles(folder))
|
||||
}
|
||||
|
||||
//console.log("cider.files", files2);
|
||||
let supporttedformats = ["mp3", "aac", "webm", "flac", "m4a", "ogg", "wav", "opus"]
|
||||
let audiofiles = files.filter(f => supporttedformats.includes(f.substring(f.lastIndexOf('.') + 1)));
|
||||
// console.log("cider.files2", audiofiles, audiofiles.length);
|
||||
let metadatalist = []
|
||||
let numid = 0;
|
||||
for (var audio of audiofiles) {
|
||||
try{
|
||||
const metadata = await mm.parseFile(audio);
|
||||
if (metadata != null){
|
||||
let form = {
|
||||
"id": "ciderlocal" + numid,
|
||||
"type": "podcast-episodes",
|
||||
"href": audio,
|
||||
"attributes": {
|
||||
"artwork": {
|
||||
"width": 3000,
|
||||
"height": 3000,
|
||||
"url": metadata.common.picture != undefined ? "data:image/png;base64,"+metadata.common.picture[0].data.toString('base64')+"" : "",
|
||||
},
|
||||
"topics": [],
|
||||
"url": "",
|
||||
"subscribable": true,
|
||||
"mediaKind": "audio",
|
||||
"genreNames": [
|
||||
""
|
||||
],
|
||||
// "playParams": {
|
||||
// "id": "ciderlocal" + numid,
|
||||
// "kind": "podcast",
|
||||
// "isLibrary": true,
|
||||
// "reporting": false },
|
||||
"trackNumber": metadata.common.track?.no ?? 0,
|
||||
"discNumber": metadata.common.disk?.no ?? 0,
|
||||
"name": metadata.common.title ?? audio.substring(audio.lastIndexOf('\\') + 1),
|
||||
"albumName": metadata.common.album,
|
||||
"artistName": metadata.common.artist,
|
||||
"copyright": metadata.common.copyright ?? "",
|
||||
"assetUrl": "file:///" +audio,
|
||||
"contentAdvisory": "",
|
||||
"releaseDateTime": "2022-05-13T00:23:00Z",
|
||||
"durationInMilliseconds": Math.floor((metadata.format.duration?? 0) * 1000),
|
||||
|
||||
"offers": [
|
||||
{
|
||||
"kind": "get",
|
||||
"type": "STDQ"
|
||||
}
|
||||
],
|
||||
"contentRating": "clean"
|
||||
}
|
||||
};
|
||||
numid += 1;
|
||||
|
||||
}
|
||||
if (folders == null || folders.length == null || folders.length == 0) folders = ["D:\\Music"]
|
||||
console.log('folders', folders)
|
||||
let files: any[] = []
|
||||
for (var folder of folders) {
|
||||
// get files from the Music folder
|
||||
files = files.concat(await getFiles(folder))
|
||||
}
|
||||
|
||||
//console.log("cider.files", files2);
|
||||
let supporttedformats = ["mp3", "aac", "webm", "flac", "m4a", "ogg", "wav", "opus"]
|
||||
let audiofiles = files.filter(f => supporttedformats.includes(f.substring(f.lastIndexOf('.') + 1)));
|
||||
// console.log("cider.files2", audiofiles, audiofiles.length);
|
||||
let metadatalist = []
|
||||
let numid = 0;
|
||||
for (var audio of audiofiles) {
|
||||
try {
|
||||
const metadata = await mm.parseFile(audio);
|
||||
if (metadata != null) {
|
||||
let form = {
|
||||
"id": "ciderlocal" + numid,
|
||||
"type": "podcast-episodes",
|
||||
"href": audio,
|
||||
"attributes": {
|
||||
"artwork": {
|
||||
"width": 3000,
|
||||
"height": 3000,
|
||||
"url": metadata.common.picture != undefined ? "data:image/png;base64," + metadata.common.picture[0].data.toString('base64') + "" : "",
|
||||
},
|
||||
"topics": [],
|
||||
"url": "",
|
||||
"subscribable": true,
|
||||
"mediaKind": "audio",
|
||||
"genreNames": [
|
||||
""
|
||||
],
|
||||
// "playParams": {
|
||||
// "id": "ciderlocal" + numid,
|
||||
// "kind": "podcast",
|
||||
// "isLibrary": true,
|
||||
// "reporting": false },
|
||||
"trackNumber": metadata.common.track?.no ?? 0,
|
||||
"discNumber": metadata.common.disk?.no ?? 0,
|
||||
"name": metadata.common.title ?? audio.substring(audio.lastIndexOf('\\') + 1),
|
||||
"albumName": metadata.common.album,
|
||||
"artistName": metadata.common.artist,
|
||||
"copyright": metadata.common.copyright ?? "",
|
||||
"assetUrl": "file:///" + audio,
|
||||
"contentAdvisory": "",
|
||||
"releaseDateTime": "2022-05-13T00:23:00Z",
|
||||
"durationInMilliseconds": Math.floor((metadata.format.duration ?? 0) * 1000),
|
||||
|
||||
"offers": [
|
||||
{
|
||||
"kind": "get",
|
||||
"type": "STDQ"
|
||||
}
|
||||
],
|
||||
"contentRating": "clean"
|
||||
}
|
||||
};
|
||||
numid += 1;
|
||||
|
||||
// let form = {"id": "/ciderlocal?" + audio,
|
||||
// "type": "library-songs",
|
||||
// "href": "/ciderlocal?" + audio,
|
||||
|
|
@ -1273,15 +1276,16 @@ export class BrowserWindow {
|
|||
// "name": metadata.common.title,
|
||||
// "albumName": metadata.common.album,
|
||||
// "artistName": metadata.common.artist}}
|
||||
metadatalist.push(form)}
|
||||
} catch (e){}
|
||||
}
|
||||
// console.log('metadatalist', metadatalist);
|
||||
this.localSongs = metadatalist;
|
||||
BrowserWindow.win.webContents.send('getUpdatedLocalList', metadatalist);
|
||||
metadatalist.push(form)
|
||||
}
|
||||
} catch (e) { }
|
||||
}
|
||||
// console.log('metadatalist', metadatalist);
|
||||
this.localSongs = metadatalist;
|
||||
BrowserWindow.win.webContents.send('getUpdatedLocalList', metadatalist);
|
||||
}
|
||||
|
||||
)
|
||||
)
|
||||
|
||||
ipcMain.on('writeWAV', (event, leftpcm, rightpcm, bufferlength) => {
|
||||
|
||||
|
|
@ -1449,8 +1453,8 @@ export class BrowserWindow {
|
|||
console.log('sc', SoundCheckTag)
|
||||
BrowserWindow.win.webContents.send('SoundCheckTag', SoundCheckTag)
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
});
|
||||
console.log(err)
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -1502,35 +1506,38 @@ export class BrowserWindow {
|
|||
/* *********************************************************************************************
|
||||
* Window Events
|
||||
* **********************************************************************************************/
|
||||
if (process.platform === "win32") {
|
||||
let WND_STATE = {
|
||||
MINIMIZED: 0,
|
||||
NORMAL: 1,
|
||||
MAXIMIZED: 2,
|
||||
FULL_SCREEN: 3,
|
||||
};
|
||||
let wndState = WND_STATE.NORMAL;
|
||||
let WND_STATE = {
|
||||
MINIMIZED: 0,
|
||||
NORMAL: 1,
|
||||
MAXIMIZED: 2,
|
||||
FULL_SCREEN: 3,
|
||||
};
|
||||
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
|
||||
|
||||
|
|
@ -1573,10 +1580,10 @@ export class BrowserWindow {
|
|||
// Set window Handler
|
||||
BrowserWindow.win.webContents.setWindowOpenHandler((x: any) => {
|
||||
if (x.url.includes("apple") || x.url.includes("localhost")) {
|
||||
return {action: "allow"};
|
||||
return { action: "allow" };
|
||||
}
|
||||
shell.openExternal(x.url).catch(console.error);
|
||||
return {action: "deny"};
|
||||
return { action: "deny" };
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -1632,7 +1639,7 @@ export class BrowserWindow {
|
|||
"CtlN": "Cider",
|
||||
"iV": "196623"
|
||||
};
|
||||
let server2 = mdns.createAdvertisement(x, `${await getPort({port: 3839})}`, {
|
||||
let server2 = mdns.createAdvertisement(x, `${await getPort({ port: 3839 })}`, {
|
||||
name: encoded,
|
||||
txt: txt_record
|
||||
});
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default class Thumbar {
|
|||
{
|
||||
label: utils.getLocale(utils.getStoreValue('general.language'), 'term.settings'),
|
||||
accelerator: utils.getStoreValue("general.keybindings.settings").join('+'),
|
||||
click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('settings')`)
|
||||
click: () => utils.getWindow().webContents.executeJavaScript(`app.openSettingsPage()`)
|
||||
},
|
||||
...(this.isMac ? [
|
||||
{type: 'separator'},
|
||||
|
|
|
|||
3
src/renderer/assets/feather/hard-drive.svg
Normal file
3
src/renderer/assets/feather/hard-drive.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 372 B |
4
src/renderer/assets/feather/headphones.svg
Normal file
4
src/renderer/assets/feather/headphones.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 390 B |
5
src/renderer/assets/feather/pen-tool.svg
Normal file
5
src/renderer/assets/feather/pen-tool.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 363 B |
3
src/renderer/assets/feather/zap.svg
Normal file
3
src/renderer/assets/feather/zap.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 263 B |
1
src/renderer/assets/settings.svg
Normal file
1
src/renderer/assets/settings.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1,011 B |
Binary file not shown.
|
|
@ -81,7 +81,7 @@ Vue.component("sidebar-library-item", {
|
|||
},
|
||||
async mounted() {
|
||||
if (this.svgIcon) {
|
||||
this.svgIconData = await this.app.getSvgIcon(this.svgIcon);
|
||||
this.svgIconData = this.svgIcon;
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
|
|
|
|||
5
src/renderer/less/bootstrap.less
vendored
5
src/renderer/less/bootstrap.less
vendored
|
|
@ -2432,10 +2432,9 @@ fieldset:disabled .btn {
|
|||
.nav-pills .nav-link {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 50px;
|
||||
border-radius: 6px;
|
||||
color: #eee;
|
||||
-webkit-user-drag: none;
|
||||
// transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
|
||||
font-weight: 500;
|
||||
margin: 0px 4px;
|
||||
&:hover {
|
||||
|
|
@ -2447,7 +2446,7 @@ fieldset:disabled .btn {
|
|||
.nav-pills .show > .nav-link {
|
||||
color: #fff;
|
||||
background-color: var(--selected);
|
||||
outline:2px solid var(--keyColor);
|
||||
// outline:2px solid var(--keyColor);
|
||||
}
|
||||
|
||||
.nav-fill > .nav-link,
|
||||
|
|
|
|||
|
|
@ -338,7 +338,9 @@
|
|||
|
||||
#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
|
||||
min-width: 110px;
|
||||
font-size: 0em;
|
||||
.sidebar-item-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
margin: 0px;
|
||||
|
|
@ -353,7 +355,9 @@
|
|||
|
||||
#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
|
||||
min-width: 60px;
|
||||
font-size: 0em;
|
||||
.sidebar-item-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
margin: 0px;
|
||||
|
|
|
|||
|
|
@ -2168,107 +2168,116 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
}
|
||||
|
||||
// fancy pills
|
||||
.nav-pills {
|
||||
position: relative;
|
||||
|
||||
.nav-link {
|
||||
transition: transform .3s var(--appleEase);
|
||||
.fancy-pills {
|
||||
.nav-pills {
|
||||
position: relative;
|
||||
|
||||
|
||||
&:after {
|
||||
--dist: 1px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--dist);
|
||||
bottom: var(--dist);
|
||||
left: var(--dist);
|
||||
right: var(--dist);
|
||||
// width : 100%;
|
||||
// height : 100%;
|
||||
|
||||
.nav-link {
|
||||
transition: transform .3s var(--appleEase);
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
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;
|
||||
transform: scale(1.0);
|
||||
|
||||
-webkit-user-drag: none;
|
||||
font-weight: 500;
|
||||
margin: 0px 4px;
|
||||
|
||||
|
||||
&:after {
|
||||
background: rgb(200 200 200 / 15%);
|
||||
opacity: 1;
|
||||
transition: color 0s;
|
||||
// border-radius: 5px;
|
||||
--dist: 4px;
|
||||
--dist: 1px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--dist);
|
||||
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 {
|
||||
outline: none;
|
||||
transform: scale(1.1);
|
||||
z-index: 1;
|
||||
// background: #eee;
|
||||
background: transparent;
|
||||
color: #333;
|
||||
|
||||
|
||||
&:after {
|
||||
background: #eee;
|
||||
border-radius: inherit;
|
||||
--dist: 1px;
|
||||
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;
|
||||
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 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgb(200 200 200 / 10%);
|
||||
border-radius: 50px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgb(200 200 200 / 10%);
|
||||
border-radius: 50px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.notyf__toast {
|
||||
-webkit-app-region: no-drag;
|
||||
cursor : pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notyf-info {
|
||||
|
|
@ -9,142 +9,145 @@
|
|||
|
||||
.tooltip-inner {
|
||||
background: #2f2f2f;
|
||||
opacity : 1;
|
||||
border : 1px solid rgb(0 0 0 / 35%);
|
||||
opacity: 1;
|
||||
border: 1px solid rgb(0 0 0 / 35%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.modal-fullscreen {
|
||||
display : flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
position : fixed;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
background : rgba(0, 0, 0, 0.3);
|
||||
z-index : 1000;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
|
||||
.modal-window {
|
||||
background : #333;
|
||||
background: #333;
|
||||
border-radius: 10px;
|
||||
box-shadow : var(--mediaItemShadow-Shadow);
|
||||
display : flex;
|
||||
flex-flow : column;
|
||||
max-height : 500px;
|
||||
max-width : 360px;
|
||||
background : #121212;
|
||||
width : 100%;
|
||||
position : relative;
|
||||
box-shadow: var(--mediaItemShadow-Shadow);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
max-height: 500px;
|
||||
max-width: 360px;
|
||||
background: #121212;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content : "";
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
box-shadow : var(--mediaItemShadow);
|
||||
z-index : 1;
|
||||
border-radius : inherit;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
z-index: 1;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
width : 100%;
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
overflow : hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
|
||||
.modal-footer {}
|
||||
.modal-footer {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spatialproperties-panel {
|
||||
.modal-window {
|
||||
&:not(.airplay-modal){
|
||||
height : 700px;
|
||||
max-height: 700px;
|
||||
width : 800px;
|
||||
max-width : 800px;}
|
||||
overflow : hidden;
|
||||
&:not(.airplay-modal) {
|
||||
height: 700px;
|
||||
max-height: 700px;
|
||||
width: 800px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.info-header {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.visual-container {
|
||||
display : flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
overflow : hidden;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visual {
|
||||
position : relative;
|
||||
height : 250px;
|
||||
width : 300px;
|
||||
display : inline-flex;
|
||||
align-items : flex-end;
|
||||
position: relative;
|
||||
height: 250px;
|
||||
width: 300px;
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
filter : drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
|
||||
margin : 0 auto;
|
||||
filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
|
||||
margin: 0 auto;
|
||||
|
||||
.face {
|
||||
position : absolute;
|
||||
width : calc(12px * 6);
|
||||
height : calc(12px * 6);
|
||||
position: absolute;
|
||||
width: calc(12px * 6);
|
||||
height: calc(12px * 6);
|
||||
border-radius: 6px;
|
||||
transform : rotateX(60deg) rotateZ(-45deg);
|
||||
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
transform: rotateX(60deg) rotateZ(-45deg);
|
||||
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
}
|
||||
|
||||
.listener {
|
||||
position : absolute;
|
||||
width : 32px;
|
||||
height : 32px;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
transform : rotateX(60deg) rotateZ(-45deg);
|
||||
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
background : white;
|
||||
color : black;
|
||||
z-index : 2;
|
||||
transform: rotateX(60deg) rotateZ(-45deg);
|
||||
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
background: white;
|
||||
color: black;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.audiosource {
|
||||
position : absolute;
|
||||
width : 32px;
|
||||
height : 32px;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
transform : rotateX(60deg) rotateZ(-45deg);
|
||||
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
background : yellow;
|
||||
z-index : 2;
|
||||
transform: rotateX(60deg) rotateZ(-45deg);
|
||||
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
background: yellow;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.face:nth-of-type(1) {
|
||||
background: linear-gradient(45deg, #28223a, #1f2038);
|
||||
z-index : 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face:nth-of-type(2) {
|
||||
background: linear-gradient(45deg, #7d53ad, #5763ff);
|
||||
transform : rotateX(60deg) rotateZ(-45deg) translateZ(30px);
|
||||
opacity : 0.7;
|
||||
z-index : 3;
|
||||
transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
|
||||
opacity: 0.7;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding : 16px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -162,14 +165,14 @@
|
|||
|
||||
.addtoplaylist-panel {
|
||||
.modal-window {
|
||||
max-height : 600px;
|
||||
max-width : 400px;
|
||||
background : rgb(18 18 18 / 90%);
|
||||
overflow : hidden;
|
||||
max-height: 600px;
|
||||
max-width: 400px;
|
||||
background: rgb(18 18 18 / 90%);
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
|
||||
.modal-header {
|
||||
padding : 16px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
|
||||
.modal-title {
|
||||
|
|
@ -182,34 +185,34 @@
|
|||
}
|
||||
|
||||
.modal-search {
|
||||
width : 100%;
|
||||
padding : 0px 16px;
|
||||
width: 100%;
|
||||
padding: 0px 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
appearance : none;
|
||||
border : 0px;
|
||||
text-align : left;
|
||||
width : 100%;
|
||||
margin : 0;
|
||||
display : flex;
|
||||
background : rgba(32, 32, 32, 0.46);
|
||||
color : #eee;
|
||||
appearance: none;
|
||||
border: 0px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
background: rgba(32, 32, 32, 0.46);
|
||||
color: #eee;
|
||||
font-family: inherit;
|
||||
font-size : 0.98em;
|
||||
padding : 6px 12px;
|
||||
font-size: 0.98em;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
flex-flow : row;
|
||||
flex-flow: row;
|
||||
|
||||
.icon {
|
||||
pointer-events : none;
|
||||
width : 32px;
|
||||
height : 32px;
|
||||
display : flex;
|
||||
pointer-events: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
margin-right : 6px;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.name {
|
||||
|
|
@ -236,35 +239,35 @@
|
|||
}
|
||||
|
||||
.menu-panel {
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
position : fixed;
|
||||
top : 0;
|
||||
left : 0;
|
||||
z-index : 100001;
|
||||
display : flex;
|
||||
justify-content : center;
|
||||
align-items : center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100001;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
.menu-header-body {
|
||||
padding : 6px;
|
||||
display : flex;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
background: rgb(200 200 200 / 10%);
|
||||
|
||||
.menu-option-header {
|
||||
width : 40px;
|
||||
height : 40px;
|
||||
display : flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
border-radius : var(--mediaItemRadius);
|
||||
appearance : none;
|
||||
border : 0;
|
||||
background : transparent;
|
||||
align-items: center;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
&.active {
|
||||
.sidebar-icon>.svg-icon {
|
||||
.sidebar-icon > .svg-icon {
|
||||
--color: var(--keyColor);
|
||||
}
|
||||
}
|
||||
|
|
@ -280,62 +283,62 @@
|
|||
}
|
||||
|
||||
.menu-panel-body {
|
||||
display : flex;
|
||||
flex-flow : column;
|
||||
background : rgb(30 30 30 / 45%);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
background: rgb(30 30 30 / 45%);
|
||||
backdrop-filter: blur(32px) saturate(180%);
|
||||
position : relative;
|
||||
min-width : 200px;
|
||||
box-shadow : var(--ciderShadow-Generic);
|
||||
border-radius : var(--panelRadius);
|
||||
overflow : hidden;
|
||||
font-size : 13px;
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
border-radius: var(--panelRadius);
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
|
||||
|
||||
.menu-option {
|
||||
text-align: left;
|
||||
display : flex;
|
||||
display: flex;
|
||||
appearance: none;
|
||||
border : 0px;
|
||||
font : inherit;
|
||||
border: 0px;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
color : inherit;
|
||||
margin : 0 auto;
|
||||
position : relative;
|
||||
width : 100%;
|
||||
padding : 9px 14px;
|
||||
color: inherit;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 9px 14px;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
background : var(--hover);
|
||||
background: var(--hover);
|
||||
border-radius: 6px;
|
||||
content : "";
|
||||
--sizeY : 3px;
|
||||
--sizeX : 4px;
|
||||
top : var(--sizeY);
|
||||
left : var(--sizeX);
|
||||
bottom : var(--sizeY);
|
||||
right : var(--sizeX);
|
||||
position : absolute;
|
||||
opacity : 0;
|
||||
transform : scale(0.98);
|
||||
z-index : -1;
|
||||
transition : transform .25s ease-out, opacity .25s ease-out;
|
||||
content: "";
|
||||
--sizeY: 3px;
|
||||
--sizeX: 4px;
|
||||
top: var(--sizeY);
|
||||
left: var(--sizeX);
|
||||
bottom: var(--sizeY);
|
||||
right: var(--sizeX);
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: scale(0.98);
|
||||
z-index: -1;
|
||||
transition: transform .25s ease-out, opacity .25s ease-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transition: transform 0s ease-in, opacity 0s ease-in;
|
||||
opacity : 1;
|
||||
transform : scale(1);
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&::before {
|
||||
transition: transform .1s ease-in-out, opacity .1s ease-in-out;
|
||||
opacity : 1;
|
||||
transform : scale(0.98);
|
||||
opacity: 1;
|
||||
transform: scale(0.98);
|
||||
background: var(--selected-click);
|
||||
}
|
||||
}
|
||||
|
|
@ -375,25 +378,25 @@
|
|||
}
|
||||
|
||||
.menu-body {
|
||||
overflow : overlay;
|
||||
height : 100%;
|
||||
display : flex;
|
||||
overflow: overlay;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap : 0px;
|
||||
padding : 0px;
|
||||
position : relative;
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-footer {
|
||||
width : 100%;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.queue-panel {
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
display : flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
.queue-header-text {
|
||||
|
|
@ -402,52 +405,52 @@
|
|||
|
||||
.queue-body {
|
||||
overflow: overlay;
|
||||
height : 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.queue-footer {
|
||||
width : 100%;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.autoplay {
|
||||
background : rgb(200 200 200 / 15%);
|
||||
display : flex;
|
||||
background: rgb(200 200 200 / 15%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
appearance : none;
|
||||
border : 0;
|
||||
border-radius : 6px;
|
||||
height : 32px;
|
||||
width : 32px;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.infinity {
|
||||
content: url("./assets/infinity.svg");
|
||||
margin : auto;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.moreinfo-modal {
|
||||
.modal-window {
|
||||
height : 70%;
|
||||
max-height : 100%;
|
||||
width : 45%;
|
||||
max-width : 100%;
|
||||
overflow : hidden;
|
||||
height: 70%;
|
||||
max-height: 100%;
|
||||
width: 45%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding : 1em;
|
||||
padding: 1em;
|
||||
font-size: 0.8rem;
|
||||
|
||||
br {
|
||||
display : block;
|
||||
display: block;
|
||||
/* makes it have a width */
|
||||
content : "";
|
||||
content: "";
|
||||
/* clears default height */
|
||||
margin : 2em;
|
||||
margin: 2em;
|
||||
margin-bottom: -0.6rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -457,7 +460,7 @@
|
|||
|
||||
.modal-title {
|
||||
text-align: unset !important;
|
||||
width : 100%;
|
||||
width: 100%;
|
||||
|
||||
&:not(.modal-subtitle) {
|
||||
font-size: 25px;
|
||||
|
|
@ -479,8 +482,9 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
filter:blur(32px) brightness(50%) saturate(280%);
|
||||
filter: blur(32px) brightness(50%) saturate(280%);
|
||||
}
|
||||
|
||||
.popover-artwork {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
|
@ -491,7 +495,8 @@
|
|||
.song-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.song-artist,.song-album {
|
||||
|
||||
.song-artist, .song-album {
|
||||
opacity: 0.75;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -500,4 +505,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._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;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ body[platform="darwin"] {
|
|||
&.notransparency::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
&.simplebg {
|
||||
background: transparent;
|
||||
|
|
@ -33,6 +34,16 @@ body[platform="darwin"] {
|
|||
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 {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -7,6 +7,7 @@ import {Events} from './events.js'
|
|||
import { wsapi } from "./wsapi_interop.js"
|
||||
import { MusicKitTools } from "./musickittools.js"
|
||||
import { spawnMica } from "./mica.js"
|
||||
import { svgIcon } from './components/svg-icon.js'
|
||||
|
||||
|
||||
// Define window objects
|
||||
|
|
|
|||
20
src/renderer/main/components/svg-icon.js
Normal file
20
src/renderer/main/components/svg-icon.js
Normal 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"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -168,6 +168,7 @@ const app = new Vue({
|
|||
location: "",
|
||||
info: {}
|
||||
},
|
||||
windowState: "normal",
|
||||
desiredPageTransition: "wpfade_transform",
|
||||
hideUserInfo: ipcRenderer.sendSync("is-dev") || false,
|
||||
artworkReady: false,
|
||||
|
|
@ -217,6 +218,7 @@ const app = new Vue({
|
|||
castMenu: false,
|
||||
moreInfo: false,
|
||||
airplayPW: false,
|
||||
settings: false
|
||||
},
|
||||
socialBadges: {
|
||||
badgeMap: {},
|
||||
|
|
@ -243,6 +245,7 @@ const app = new Vue({
|
|||
notyf: notyf,
|
||||
idleTimer: null,
|
||||
idleState: false,
|
||||
appVisible: true
|
||||
},
|
||||
watch: {
|
||||
cfg: {
|
||||
|
|
@ -274,6 +277,12 @@ const app = new Vue({
|
|||
}, false)
|
||||
},
|
||||
methods: {
|
||||
hotReload() {
|
||||
this.appVisible = false
|
||||
setTimeout(() => {
|
||||
this.appVisible = true
|
||||
}, 1000)
|
||||
},
|
||||
setWindowHash(route = "") {
|
||||
window.location.hash = `#${route}`;
|
||||
},
|
||||
|
|
@ -849,6 +858,10 @@ const app = new Vue({
|
|||
this.library.localsongs = data;
|
||||
})
|
||||
|
||||
ipcRenderer.on('window-state-changed', (event, data) => {
|
||||
this.chrome.windowState = data
|
||||
})
|
||||
|
||||
ipcRenderer.on('SoundCheckTag', (event, tag) => {
|
||||
// let replaygain = self.parseSCTagToRG(tag)
|
||||
try {
|
||||
|
|
@ -922,10 +935,10 @@ const app = new Vue({
|
|||
app.mk.nowPlayingItem.attributes.name = e.title
|
||||
app.mk.nowPlayingItem.attributes.artistName = e.performer
|
||||
app.mk.nowPlayingItem.attributes.albumName = e.album
|
||||
if(e.links[1]) {
|
||||
if (e.links[1]) {
|
||||
app.currentArtUrl = e.links[1].url
|
||||
app.currentArtUrlRaw = e.links[1].url
|
||||
}else{
|
||||
} else {
|
||||
app.currentArtUrl = e.links[0].url
|
||||
app.currentArtUrlRaw = e.links[0].url
|
||||
}
|
||||
|
|
@ -938,7 +951,7 @@ const app = new Vue({
|
|||
self.$refs.queue.updateQueue();
|
||||
}
|
||||
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))
|
||||
if (app.cfg.advanced.AudioContext) {
|
||||
|
|
@ -953,7 +966,7 @@ const app = new Vue({
|
|||
} catch (e) {
|
||||
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
|
||||
if (previewURL)
|
||||
console.debug("[Cider][MaikiwiSoundCheck] previewURL response.data.data[0].attributes.previews[0].url: " + previewURL)
|
||||
ipcRenderer.send('getPreviewURL', previewURL)
|
||||
ipcRenderer.send('getPreviewURL', previewURL)
|
||||
})
|
||||
} else {
|
||||
if (previewURL)
|
||||
console.debug("[Cider][MaikiwiSoundCheck] previewURL in app.mk.nowPlayingItem.previewURL: " + previewURL)
|
||||
ipcRenderer.send('getPreviewURL', previewURL)
|
||||
ipcRenderer.send('getPreviewURL', previewURL)
|
||||
}
|
||||
|
||||
} 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 => {
|
||||
try {
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
|
@ -1307,8 +1320,8 @@ const app = new Vue({
|
|||
return favs
|
||||
},
|
||||
async setArtistFavorite(id, val = true) {
|
||||
if(val) {
|
||||
if(!app.cfg.home.followedArtists.includes(id)) {
|
||||
if (val) {
|
||||
if (!app.cfg.home.followedArtists.includes(id)) {
|
||||
app.cfg.home.followedArtists.push(id)
|
||||
}
|
||||
await app.mk.api.v3.music(`/v1/me/favorites`, {
|
||||
|
|
@ -1321,8 +1334,8 @@ const app = new Vue({
|
|||
method: "POST"
|
||||
}
|
||||
})
|
||||
}else{
|
||||
if(app.cfg.home.followedArtists.includes(id)) {
|
||||
} else {
|
||||
if (app.cfg.home.followedArtists.includes(id)) {
|
||||
app.cfg.home.followedArtists.splice(app.cfg.home.followedArtists.indexOf(id), 1)
|
||||
}
|
||||
await app.mk.api.v3.music(`/v1/me/favorites`, {
|
||||
|
|
@ -1454,7 +1467,7 @@ const app = new Vue({
|
|||
},
|
||||
{
|
||||
name: app.getLz("action.refresh"),
|
||||
action: ()=>{
|
||||
action: () => {
|
||||
this.refreshPlaylists()
|
||||
}
|
||||
}
|
||||
|
|
@ -2012,8 +2025,8 @@ const app = new Vue({
|
|||
|
||||
async getNowPlayingItemDetailed(target) {
|
||||
let nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem))
|
||||
if(nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) {
|
||||
nowPlayingItem.playParams = {kind: "songs"}
|
||||
if (nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) {
|
||||
nowPlayingItem.playParams = { kind: "songs" }
|
||||
nowPlayingItem.attributes.playParams.catalogId = app.mk.nowPlayingItem.id
|
||||
nowPlayingItem.attributes.playParams.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'),
|
||||
"hidden": true,
|
||||
"action": function () {
|
||||
app.appRoute('audiolabs')
|
||||
app.openSettingsPage('audiolabs')
|
||||
}
|
||||
},
|
||||
]
|
||||
|
|
@ -4351,7 +4364,7 @@ const app = new Vue({
|
|||
try {
|
||||
// if its a radio station, then change the attributes to match a song
|
||||
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.attributes.playParams.catalogId = 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() {
|
||||
ipcRenderer.invoke('setStoreValue', 'lastfm.enabled', false).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'),
|
||||
},
|
||||
cancel: {
|
||||
label: app.getLz('dialog.cancel'),
|
||||
label: app.getLz('dialog.cancel'),
|
||||
},
|
||||
},
|
||||
callback: function (result) {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@ const store = new Vuex.Store({
|
|||
nextUrl: null,
|
||||
items: [],
|
||||
size: "normal"
|
||||
},
|
||||
settings: {
|
||||
currentTabIndex: 0,
|
||||
fullscreen: false
|
||||
}
|
||||
},
|
||||
artwork: {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
|
||||
:root {
|
||||
--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-Shadow: 0 8px 40px rgb(0 0 0 / 0.55);
|
||||
--mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%);
|
||||
|
|
@ -50,6 +51,7 @@
|
|||
--textColor: #eee;
|
||||
--replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
|
||||
--glassFilter: blur(16px) saturate(180%);
|
||||
--glassFilterHeavy: blur(64px) saturate(280%);
|
||||
--sidebarWidth: 260px;
|
||||
}
|
||||
|
||||
|
|
@ -856,6 +858,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
|
||||
.app-sidebar-item {
|
||||
--iconSize: 18px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
|
|
@ -870,6 +873,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
transition: transform 0.1s;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
&.app-sidebar-item-playlist {
|
||||
-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 {
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@
|
|||
$root.getLz("term.about")
|
||||
}}</span>
|
||||
</button>
|
||||
<button class="usermenu-item" @click="appRoute('settings')">
|
||||
<button class="usermenu-item" @click="modals.settings = true">
|
||||
<span class="usermenu-item-icon">
|
||||
<%- include("../svg/settings.svg") %>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@
|
|||
<transition name="modal">
|
||||
<plugin-menu v-if="modals.pluginMenu"></plugin-menu>
|
||||
</transition>
|
||||
<transition name="modal">
|
||||
<settings-window v-if="modals.settings"></settings-window>
|
||||
</transition>
|
||||
<transition name="modal">
|
||||
<eq-view v-if="modals.equalizer"></eq-view>
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -158,23 +158,10 @@
|
|||
</div>
|
||||
<template v-if="!cfg.general.sidebarCollapsed.playlists">
|
||||
<button class="app-sidebar-item" @click="playlistHeaderContextMenu">
|
||||
<div class="sidebar-icon">
|
||||
<svg
|
||||
width="46"
|
||||
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>
|
||||
<svg-icon url="./assets/feather/plus.svg"></svg-icon>
|
||||
<div class="sidebar-item-text">
|
||||
{{ getLz("action.createNew") }}
|
||||
</div>
|
||||
{{ getLz("action.createNew") }}
|
||||
</button>
|
||||
<sidebar-playlist
|
||||
v-for="item in getPlaylistFolderChildren('p.playlistsroot')"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<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-fullscreen addtoplaylist-panel" @click.self="app.modals.audioControls = false"
|
||||
@contextmenu.self="app.modals.audioControls = false">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<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 class="modal-content">
|
||||
<div class="md-option-line">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<script type="text/x-template" id="audio-playbackrate">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
|
||||
@contextmenu.self="app.resetState()">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioPlaybackRate = false"
|
||||
@contextmenu.self="app.modals.audioPlaybackRate = false">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<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 class="modal-content">
|
||||
<div class="md-option-line">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<script type="text/x-template" id="audio-settings">
|
||||
<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-header">
|
||||
<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 class="modal-content">
|
||||
<button class="playlist-item"
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<div class="name">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
|
||||
</button>
|
||||
<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="name">{{app.getLz('settings.option.audio.audioLab')}}</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -291,7 +291,7 @@
|
|||
})
|
||||
},
|
||||
close() {
|
||||
app.resetState()
|
||||
app.modals.equalizer = false
|
||||
},
|
||||
changeVibrantBass() {
|
||||
if (app.cfg.audio.equalizer.vibrantBass !== '0') {
|
||||
|
|
|
|||
1560
src/renderer/views/components/settings-window.ejs
Normal file
1560
src/renderer/views/components/settings-window.ejs
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -9,7 +9,7 @@
|
|||
:href="item.href"
|
||||
@click='clickEvent()'>
|
||||
<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>
|
||||
</template>
|
||||
<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() {
|
||||
if (this.item.type !== "library-playlist-folders") {
|
||||
this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
|
||||
this.icon = ("./assets/feather/list.svg")
|
||||
} else {
|
||||
this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg")
|
||||
this.icon = ("./assets/feather/folder.svg")
|
||||
}
|
||||
let playlistMap = this.$root.playlists.trackMapping
|
||||
if (this.relateMediaItems.length != 0) {
|
||||
|
|
|
|||
|
|
@ -2,23 +2,23 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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://is1-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://is4-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://aod-ssl.itunes.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://is1-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://is4-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://aod-ssl.itunes.apple.com/" crossorigin/>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<title>Cider</title>
|
||||
<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" href="style.less"/>
|
||||
<link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>
|
||||
<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/smoothscroll.js"></script>
|
||||
<script src="./lib/vuex.min.js"></script>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
#LOADER>svg {
|
||||
#LOADER > svg {
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
|
|
@ -67,58 +67,64 @@
|
|||
</style>
|
||||
</head>
|
||||
|
||||
<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>" platform="<%= env.platform %>">
|
||||
<div id="LOADER">
|
||||
<%- include("../assets/cider-round.svg") %>
|
||||
</div>
|
||||
<div id="app" :class="getAppClasses()" :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
|
||||
<transition name="fsModeSwitch">
|
||||
<div id="app-main" v-show="appMode == 'player'">
|
||||
<%- include('app/chrome-top'); %>
|
||||
<%- include('app/app-navigation'); %>
|
||||
<%- include('app/chrome-bottom'); %>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fsModeSwitch">
|
||||
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
|
||||
<fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics"
|
||||
:richlyrics="richlyrics"></fullscreen-view>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fsModeSwitch">
|
||||
<div class="fullscreen-view-container" v-if="appMode == 'mini'">
|
||||
<mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics">
|
||||
</mini-view>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fsModeSwitch">
|
||||
<div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
|
||||
<cider-oobe></cider-oobe>
|
||||
</div>
|
||||
</transition>
|
||||
<%- include('app/panels'); %>
|
||||
<div class="cursor" v-if="chrome.showCursor"></div>
|
||||
</div>
|
||||
<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>"
|
||||
platform="<%= env.platform %>">
|
||||
<div id="LOADER">
|
||||
<%- include("../assets/cider-round.svg") %>
|
||||
</div>
|
||||
<div id="app" :class="getAppClasses()"
|
||||
v-if="appVisible"
|
||||
:window-state="chrome.windowState"
|
||||
:style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)"
|
||||
:window-style="cfg.visual.directives.windowLayout">
|
||||
<transition name="fsModeSwitch">
|
||||
<div id="app-main" v-show="appMode == 'player'">
|
||||
<%- include('app/chrome-top'); %>
|
||||
<%- include('app/app-navigation'); %>
|
||||
<%- include('app/chrome-bottom'); %>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fsModeSwitch">
|
||||
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
|
||||
<fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics"
|
||||
:richlyrics="richlyrics"></fullscreen-view>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fsModeSwitch">
|
||||
<div class="fullscreen-view-container" v-if="appMode == 'mini'">
|
||||
<mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics">
|
||||
</mini-view>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fsModeSwitch">
|
||||
<div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
|
||||
<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++) {%>
|
||||
<%- include(env.components[i]); %>
|
||||
<% } %>
|
||||
<% for(var i = 0; i < Object.keys(env.components).length ; 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>
|
||||
<script src="index.js?v=1"></script>
|
||||
|
||||
<script type="text/x-template" id="am-musiccovershelf">
|
||||
<script type="text/x-template" id="am-musiccovershelf">
|
||||
<h1>{{ component.attributes.title.stringForDisplay }}</h1>
|
||||
</script>
|
||||
|
||||
<!-- Sidebar Item -->
|
||||
<script type="text/x-template" id="sidebar-library-item">
|
||||
<!-- Sidebar Item -->
|
||||
<script type="text/x-template" id="sidebar-library-item">
|
||||
<button class="app-sidebar-item"
|
||||
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
|
||||
<div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
|
||||
{{ name }}
|
||||
<svg-icon :url="svgIconData" v-if="svgIconData != ''" />
|
||||
<span class="sidebar-item-text">{{ name }}</span>
|
||||
</button>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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="settings-option-body">
|
||||
<div class="md-option-line">
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
</select>
|
||||
</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">
|
||||
<span>{{$root.getLz('settings.header.unfinished')}}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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')">
|
||||
<div @wheel="minClass(true)" @scroll="minClass(true)">
|
||||
<div class="">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script type="text/x-template" id="cider-zoo">
|
||||
<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>
|
||||
<button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
|
||||
{{ $store.state.test }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue