Remote integrated with express. Ready for backend
This commit is contained in:
child_duckling
parent
e8b6dd3180
commit
d7a8b31684
2 changed files with 344 additions and 338 deletions
|
|
@ -1,3 +1,4 @@
|
|||
// @ts-nocheck
|
||||
import * as path from "path";
|
||||
import * as electron from "electron";
|
||||
import * as windowStateKeeper from "electron-window-state";
|
||||
|
|
@ -6,7 +7,8 @@ import * as getPort from "get-port";
|
|||
import * as yt from "youtube-search-without-api-key";
|
||||
import * as fs from "fs";
|
||||
import { Stream } from "stream";
|
||||
|
||||
import * as qrcode from "qrcode-terminal";
|
||||
import * as os from "os";
|
||||
export class Win {
|
||||
win: any | undefined = null;
|
||||
app: any | undefined = null;
|
||||
|
|
@ -24,17 +26,21 @@ export class Win {
|
|||
ciderCache: path.resolve(electron.app.getPath("userData"), "CiderCache"),
|
||||
themes: path.resolve(electron.app.getPath("userData"), "Themes"),
|
||||
plugins: path.resolve(electron.app.getPath("userData"), "Plugins"),
|
||||
}
|
||||
};
|
||||
private audioStream: any = new Stream.PassThrough();
|
||||
private clientPort: number = 0;
|
||||
private remotePort: number = 6942;
|
||||
private EnvironmentVariables: object = {
|
||||
"env": {
|
||||
env: {
|
||||
platform: process.platform,
|
||||
dev: electron.app.isPackaged
|
||||
}
|
||||
dev: electron.app.isPackaged,
|
||||
},
|
||||
};
|
||||
private options: any = {
|
||||
icon: path.join(this.paths.resourcePath, `icons/icon.` + (process.platform === "win32" ? "ico" : "png")),
|
||||
icon: path.join(
|
||||
this.paths.resourcePath,
|
||||
`icons/icon.` + (process.platform === "win32" ? "ico" : "png")
|
||||
),
|
||||
width: 1024,
|
||||
height: 600,
|
||||
x: undefined,
|
||||
|
|
@ -43,8 +49,8 @@ export class Win {
|
|||
minHeight: 410,
|
||||
frame: false,
|
||||
title: "Cider",
|
||||
vibrancy: 'dark',
|
||||
transparent: (process.platform === "darwin"),
|
||||
vibrancy: "dark",
|
||||
transparent: process.platform === "darwin",
|
||||
hasShadow: false,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
|
|
@ -57,8 +63,8 @@ export class Win {
|
|||
nodeIntegrationInWorker: false,
|
||||
webSecurity: false,
|
||||
|
||||
preload: path.join(this.paths.srcPath, './preload/cider-preload.js')
|
||||
}
|
||||
preload: path.join(this.paths.srcPath, "./preload/cider-preload.js"),
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -71,13 +77,13 @@ export class Win {
|
|||
// Load the previous state with fallback to defaults
|
||||
const windowState = windowStateKeeper({
|
||||
defaultWidth: 1024,
|
||||
defaultHeight: 600
|
||||
defaultHeight: 600,
|
||||
});
|
||||
this.options.width = windowState.width;
|
||||
this.options.height = windowState.height;
|
||||
|
||||
// Start the webserver for the browser window to load
|
||||
this.startWebServer()
|
||||
this.startWebServer();
|
||||
|
||||
this.win = new electron.BrowserWindow(this.options);
|
||||
|
||||
|
|
@ -88,7 +94,6 @@ export class Win {
|
|||
// Register listeners on Window to track size and position of the Window.
|
||||
windowState.manage(this.win);
|
||||
|
||||
|
||||
return this.win;
|
||||
}
|
||||
|
||||
|
|
@ -96,25 +101,29 @@ export class Win {
|
|||
* Verifies the files for the renderer to use (Cache, library info, etc.)
|
||||
*/
|
||||
private verifyFiles(): void {
|
||||
const expectedDirectories = [
|
||||
"CiderCache"
|
||||
]
|
||||
const expectedDirectories = ["CiderCache"];
|
||||
const expectedFiles = [
|
||||
"library-songs.json",
|
||||
"library-artists.json",
|
||||
"library-albums.json",
|
||||
"library-playlists.json",
|
||||
"library-recentlyAdded.json",
|
||||
]
|
||||
];
|
||||
for (let i = 0; i < expectedDirectories.length; i++) {
|
||||
if (!fs.existsSync(path.join(electron.app.getPath("userData"), expectedDirectories[i]))) {
|
||||
fs.mkdirSync(path.join(electron.app.getPath("userData"), expectedDirectories[i]))
|
||||
if (
|
||||
!fs.existsSync(
|
||||
path.join(electron.app.getPath("userData"), expectedDirectories[i])
|
||||
)
|
||||
) {
|
||||
fs.mkdirSync(
|
||||
path.join(electron.app.getPath("userData"), expectedDirectories[i])
|
||||
);
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < expectedFiles.length; i++) {
|
||||
const file = path.join(this.paths.ciderCache, expectedFiles[i])
|
||||
const file = path.join(this.paths.ciderCache, expectedFiles[i]);
|
||||
if (!fs.existsSync(file)) {
|
||||
fs.writeFileSync(file, JSON.stringify([]))
|
||||
fs.writeFileSync(file, JSON.stringify([]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -125,22 +134,30 @@ export class Win {
|
|||
private startWebServer(): void {
|
||||
const app = express();
|
||||
|
||||
app.use(express.static(path.join(this.paths.srcPath, './renderer/')));
|
||||
app.set("views", path.join(this.paths.srcPath, './renderer/views'));
|
||||
app.use(express.static(path.join(this.paths.srcPath, "./renderer/")));
|
||||
app.set("views", path.join(this.paths.srcPath, "./renderer/views"));
|
||||
app.set("view engine", "ejs");
|
||||
|
||||
let firstRequest = true;
|
||||
app.use((req, res, next) => {
|
||||
// @ts-ignore
|
||||
if (req.url.includes("audio.webm") || (req.headers.host.includes("localhost") && (this.devMode || req.headers["user-agent"].includes("Electron")))) {
|
||||
if (
|
||||
req.url.includes("audio.webm") ||
|
||||
(req.headers.host.includes("localhost") &&
|
||||
(this.devMode || req.headers["user-agent"].includes("Electron")))
|
||||
) {
|
||||
next();
|
||||
} else {
|
||||
res.redirect("https://discord.gg/applemusic");
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.render("main", this.EnvironmentVariables)
|
||||
app.get("/", (req, res) => {
|
||||
|
||||
|
||||
res.render("main", this.EnvironmentVariables);
|
||||
});
|
||||
|
||||
app.get('/audio.webm', (req, res) => {
|
||||
app.get("/audio.webm", (req, res) => {
|
||||
try {
|
||||
req.socket.setTimeout(Number.MAX_SAFE_INTEGER);
|
||||
// CiderBase.requests.push({req: req, res: res});
|
||||
|
|
@ -150,21 +167,43 @@ export class Win {
|
|||
// requests.splice(pos, 1);
|
||||
// console.info("CLOSED", CiderBase.requests.length);
|
||||
// });
|
||||
this.audioStream.on('data', (data: any) => {
|
||||
this.audioStream.on("data", (data: any) => {
|
||||
try {
|
||||
res.write(data);
|
||||
} catch (ex) {
|
||||
console.log(ex)
|
||||
}
|
||||
})
|
||||
} catch (ex) {
|
||||
console.log(ex)
|
||||
console.log(ex);
|
||||
}
|
||||
});
|
||||
} catch (ex) {
|
||||
console.log(ex);
|
||||
}
|
||||
});
|
||||
//app.use(express.static())
|
||||
|
||||
app.listen(this.clientPort, () => {
|
||||
console.log(`Cider client port: ${this.clientPort}`);
|
||||
});
|
||||
|
||||
/*
|
||||
* Remote Client (I had no idea how to add it to our existing express server, so I just made another one) -@quacksire
|
||||
*/
|
||||
const remote = express();
|
||||
remote.use(express.static(path.join(this.paths.srcPath, "./web-remote/")))
|
||||
remote.listen(this.remotePort, () => {
|
||||
console.log(`Cider remote port: ${this.clientPort}`);
|
||||
if (firstRequest) {
|
||||
console.log("---- Ignore Me ;) ---");
|
||||
qrcode.generate(`http://${os.hostname}:${this.clientPort}/remote`);
|
||||
console.log("---- Ignore Me ;) ---");
|
||||
/*
|
||||
*
|
||||
* USING https://www.npmjs.com/package/qrcode-terminal for terminal
|
||||
* WE SHOULD USE https://www.npmjs.com/package/qrcode for the remote (or others) for showing to user via an in-app dialog
|
||||
* -@quacksire
|
||||
*/
|
||||
}
|
||||
firstRequest = false;
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -174,136 +213,179 @@ export class Win {
|
|||
// intercept "https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js" and redirect to local file "./apple-hls.js" instead
|
||||
this.win.webContents.session.webRequest.onBeforeRequest(
|
||||
{
|
||||
urls: ["https://*/*.js"]
|
||||
urls: ["https://*/*.js"],
|
||||
},
|
||||
(details: { url: string | string[]; }, callback: (arg0: { redirectURL?: string; cancel?: boolean; }) => void) => {
|
||||
(
|
||||
details: { url: string | string[] },
|
||||
callback: (arg0: { redirectURL?: string; cancel?: boolean }) => void
|
||||
) => {
|
||||
if (details.url.includes("hls.js")) {
|
||||
callback({
|
||||
redirectURL: `http://localhost:${this.clientPort}/apple-hls.js`
|
||||
})
|
||||
redirectURL: `http://localhost:${this.clientPort}/apple-hls.js`,
|
||||
});
|
||||
} else {
|
||||
callback({
|
||||
cancel: false
|
||||
})
|
||||
cancel: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
this.win.webContents.session.webRequest.onBeforeSendHeaders(async (details: { url: string; requestHeaders: { [x: string]: string; }; }, callback: (arg0: { requestHeaders: any; }) => void) => {
|
||||
this.win.webContents.session.webRequest.onBeforeSendHeaders(
|
||||
async (
|
||||
details: { url: string; requestHeaders: { [x: string]: string } },
|
||||
callback: (arg0: { requestHeaders: any }) => void
|
||||
) => {
|
||||
if (details.url === "https://buy.itunes.apple.com/account/web/info") {
|
||||
details.requestHeaders['sec-fetch-site'] = 'same-site';
|
||||
details.requestHeaders['DNT'] = '1';
|
||||
let itspod = await this.win.webContents.executeJavaScript(`window.localStorage.getItem("music.ampwebplay.itspod")`)
|
||||
details.requestHeaders["sec-fetch-site"] = "same-site";
|
||||
details.requestHeaders["DNT"] = "1";
|
||||
let itspod = await this.win.webContents.executeJavaScript(
|
||||
`window.localStorage.getItem("music.ampwebplay.itspod")`
|
||||
);
|
||||
if (itspod != null)
|
||||
details.requestHeaders['Cookie'] = `itspod=${itspod}`
|
||||
details.requestHeaders["Cookie"] = `itspod=${itspod}`;
|
||||
}
|
||||
callback({requestHeaders: details.requestHeaders})
|
||||
})
|
||||
callback({ requestHeaders: details.requestHeaders });
|
||||
}
|
||||
);
|
||||
|
||||
let location = `http://localhost:${this.clientPort}/`
|
||||
let location = `http://localhost:${this.clientPort}/`;
|
||||
|
||||
if (electron.app.isPackaged) {
|
||||
this.win.loadURL(location)
|
||||
this.win.loadURL(location);
|
||||
} else {
|
||||
this.win.loadURL(location, {userAgent: 'Cider Development Environment'})
|
||||
this.win.loadURL(location, {
|
||||
userAgent: "Cider Development Environment",
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the window handlers
|
||||
*/
|
||||
private startHandlers(): void {
|
||||
|
||||
/**********************************************************************************************************************
|
||||
* ipcMain Events
|
||||
****************************************************************************************************************** */
|
||||
electron.ipcMain.on("cider-platform", (event) => {
|
||||
event.returnValue = process.platform
|
||||
})
|
||||
|
||||
electron.ipcMain.on("get-gpu-mode", (event) => {
|
||||
event.returnValue = process.platform
|
||||
})
|
||||
|
||||
electron.ipcMain.on("is-dev", (event) => {
|
||||
event.returnValue = this.devMode
|
||||
})
|
||||
|
||||
electron.ipcMain.on('close', () => { // listen for close event
|
||||
this.win.close();
|
||||
})
|
||||
|
||||
electron.ipcMain.on('put-library-songs', (event, arg) => {
|
||||
fs.writeFileSync(path.join(this.paths.ciderCache, "library-songs.json"), JSON.stringify(arg))
|
||||
})
|
||||
|
||||
electron.ipcMain.on('put-library-artists', (event, arg) => {
|
||||
fs.writeFileSync(path.join(this.paths.ciderCache, "library-artists.json"), JSON.stringify(arg))
|
||||
})
|
||||
|
||||
electron.ipcMain.on('put-library-albums', (event, arg) => {
|
||||
fs.writeFileSync(path.join(this.paths.ciderCache, "library-albums.json"), JSON.stringify(arg))
|
||||
})
|
||||
|
||||
electron.ipcMain.on('put-library-playlists', (event, arg) => {
|
||||
fs.writeFileSync(path.join(this.paths.ciderCache, "library-playlists.json"), JSON.stringify(arg))
|
||||
})
|
||||
|
||||
electron.ipcMain.on('put-library-recentlyAdded', (event, arg) => {
|
||||
fs.writeFileSync(path.join(this.paths.ciderCache, "library-recentlyAdded.json"), JSON.stringify(arg))
|
||||
})
|
||||
|
||||
electron.ipcMain.on('get-library-songs', (event) => {
|
||||
let librarySongs = fs.readFileSync(path.join(this.paths.ciderCache, "library-songs.json"), "utf8")
|
||||
event.returnValue = JSON.parse(librarySongs)
|
||||
})
|
||||
|
||||
electron.ipcMain.on('get-library-artists', (event) => {
|
||||
let libraryArtists = fs.readFileSync(path.join(this.paths.ciderCache, "library-artists.json"), "utf8")
|
||||
event.returnValue = JSON.parse(libraryArtists)
|
||||
})
|
||||
|
||||
electron.ipcMain.on('get-library-albums', (event) => {
|
||||
let libraryAlbums = fs.readFileSync(path.join(this.paths.ciderCache, "library-albums.json"), "utf8")
|
||||
event.returnValue = JSON.parse(libraryAlbums)
|
||||
})
|
||||
|
||||
electron.ipcMain.on('get-library-playlists', (event) => {
|
||||
let libraryPlaylists = fs.readFileSync(path.join(this.paths.ciderCache, "library-playlists.json"), "utf8")
|
||||
event.returnValue = JSON.parse(libraryPlaylists)
|
||||
})
|
||||
|
||||
electron.ipcMain.on('get-library-recentlyAdded', (event) => {
|
||||
let libraryRecentlyAdded = fs.readFileSync(path.join(this.paths.ciderCache, "library-recentlyAdded.json"), "utf8")
|
||||
event.returnValue = JSON.parse(libraryRecentlyAdded)
|
||||
})
|
||||
|
||||
electron.ipcMain.handle('getYTLyrics', async (event, track, artist) => {
|
||||
const u = track + " " + artist + " official video";
|
||||
return await yt.search(u)
|
||||
})
|
||||
|
||||
electron.ipcMain.handle('setVibrancy', (event, key, value) => {
|
||||
this.win.setVibrancy(value)
|
||||
event.returnValue = process.platform;
|
||||
});
|
||||
|
||||
electron.ipcMain.on('maximize', () => { // listen for maximize event
|
||||
if (this.win.isMaximized()) {
|
||||
this.win.unmaximize()
|
||||
} else {
|
||||
this.win.maximize()
|
||||
}
|
||||
})
|
||||
electron.ipcMain.on("get-gpu-mode", (event) => {
|
||||
event.returnValue = process.platform;
|
||||
});
|
||||
|
||||
electron.ipcMain.on('minimize', () => { // listen for minimize event
|
||||
electron.ipcMain.on("is-dev", (event) => {
|
||||
event.returnValue = this.devMode;
|
||||
});
|
||||
|
||||
electron.ipcMain.on("close", () => {
|
||||
// listen for close event
|
||||
this.win.close();
|
||||
});
|
||||
|
||||
electron.ipcMain.on("put-library-songs", (event, arg) => {
|
||||
fs.writeFileSync(
|
||||
path.join(this.paths.ciderCache, "library-songs.json"),
|
||||
JSON.stringify(arg)
|
||||
);
|
||||
});
|
||||
|
||||
electron.ipcMain.on("put-library-artists", (event, arg) => {
|
||||
fs.writeFileSync(
|
||||
path.join(this.paths.ciderCache, "library-artists.json"),
|
||||
JSON.stringify(arg)
|
||||
);
|
||||
});
|
||||
|
||||
electron.ipcMain.on("put-library-albums", (event, arg) => {
|
||||
fs.writeFileSync(
|
||||
path.join(this.paths.ciderCache, "library-albums.json"),
|
||||
JSON.stringify(arg)
|
||||
);
|
||||
});
|
||||
|
||||
electron.ipcMain.on("put-library-playlists", (event, arg) => {
|
||||
fs.writeFileSync(
|
||||
path.join(this.paths.ciderCache, "library-playlists.json"),
|
||||
JSON.stringify(arg)
|
||||
);
|
||||
});
|
||||
|
||||
electron.ipcMain.on("put-library-recentlyAdded", (event, arg) => {
|
||||
fs.writeFileSync(
|
||||
path.join(this.paths.ciderCache, "library-recentlyAdded.json"),
|
||||
JSON.stringify(arg)
|
||||
);
|
||||
});
|
||||
|
||||
electron.ipcMain.on("get-library-songs", (event) => {
|
||||
let librarySongs = fs.readFileSync(
|
||||
path.join(this.paths.ciderCache, "library-songs.json"),
|
||||
"utf8"
|
||||
);
|
||||
event.returnValue = JSON.parse(librarySongs);
|
||||
});
|
||||
|
||||
electron.ipcMain.on("get-library-artists", (event) => {
|
||||
let libraryArtists = fs.readFileSync(
|
||||
path.join(this.paths.ciderCache, "library-artists.json"),
|
||||
"utf8"
|
||||
);
|
||||
event.returnValue = JSON.parse(libraryArtists);
|
||||
});
|
||||
|
||||
electron.ipcMain.on("get-library-albums", (event) => {
|
||||
let libraryAlbums = fs.readFileSync(
|
||||
path.join(this.paths.ciderCache, "library-albums.json"),
|
||||
"utf8"
|
||||
);
|
||||
event.returnValue = JSON.parse(libraryAlbums);
|
||||
});
|
||||
|
||||
electron.ipcMain.on("get-library-playlists", (event) => {
|
||||
let libraryPlaylists = fs.readFileSync(
|
||||
path.join(this.paths.ciderCache, "library-playlists.json"),
|
||||
"utf8"
|
||||
);
|
||||
event.returnValue = JSON.parse(libraryPlaylists);
|
||||
});
|
||||
|
||||
electron.ipcMain.on("get-library-recentlyAdded", (event) => {
|
||||
let libraryRecentlyAdded = fs.readFileSync(
|
||||
path.join(this.paths.ciderCache, "library-recentlyAdded.json"),
|
||||
"utf8"
|
||||
);
|
||||
event.returnValue = JSON.parse(libraryRecentlyAdded);
|
||||
});
|
||||
|
||||
electron.ipcMain.handle("getYTLyrics", async (event, track, artist) => {
|
||||
const u = track + " " + artist + " official video";
|
||||
return await yt.search(u);
|
||||
});
|
||||
|
||||
electron.ipcMain.handle("setVibrancy", (event, key, value) => {
|
||||
this.win.setVibrancy(value);
|
||||
});
|
||||
|
||||
electron.ipcMain.on("maximize", () => {
|
||||
// listen for maximize event
|
||||
if (this.win.isMaximized()) {
|
||||
this.win.unmaximize();
|
||||
} else {
|
||||
this.win.maximize();
|
||||
}
|
||||
});
|
||||
|
||||
electron.ipcMain.on("minimize", () => {
|
||||
// listen for minimize event
|
||||
this.win.minimize();
|
||||
})
|
||||
});
|
||||
|
||||
// Set scale
|
||||
electron.ipcMain.on('setScreenScale', (event, scale) => {
|
||||
this.win.webContents.setZoomFactor(parseFloat(scale))
|
||||
})
|
||||
electron.ipcMain.on("setScreenScale", (event, scale) => {
|
||||
this.win.webContents.setZoomFactor(parseFloat(scale));
|
||||
});
|
||||
|
||||
/* *********************************************************************************************
|
||||
* Window Events
|
||||
|
|
@ -314,41 +396,42 @@ export class Win {
|
|||
MINIMIZED: 0,
|
||||
NORMAL: 1,
|
||||
MAXIMIZED: 2,
|
||||
FULL_SCREEN: 3
|
||||
}
|
||||
let wndState = WND_STATE.NORMAL
|
||||
FULL_SCREEN: 3,
|
||||
};
|
||||
let wndState = WND_STATE.NORMAL;
|
||||
|
||||
this.win.on("resize", (_: any) => {
|
||||
const isMaximized = this.win.isMaximized()
|
||||
const isMinimized = this.win.isMinimized()
|
||||
const isFullScreen = this.win.isFullScreen()
|
||||
const isMaximized = this.win.isMaximized();
|
||||
const isMinimized = this.win.isMinimized();
|
||||
const isFullScreen = this.win.isFullScreen();
|
||||
const state = wndState;
|
||||
if (isMinimized && state !== WND_STATE.MINIMIZED) {
|
||||
wndState = WND_STATE.MINIMIZED
|
||||
wndState = WND_STATE.MINIMIZED;
|
||||
} else if (isFullScreen && state !== WND_STATE.FULL_SCREEN) {
|
||||
wndState = WND_STATE.FULL_SCREEN
|
||||
wndState = WND_STATE.FULL_SCREEN;
|
||||
} else if (isMaximized && state !== WND_STATE.MAXIMIZED) {
|
||||
wndState = WND_STATE.MAXIMIZED
|
||||
this.win.webContents.executeJavaScript(`app.chrome.maximized = true`)
|
||||
wndState = WND_STATE.MAXIMIZED;
|
||||
this.win.webContents.executeJavaScript(`app.chrome.maximized = true`);
|
||||
} else if (state !== WND_STATE.NORMAL) {
|
||||
wndState = WND_STATE.NORMAL
|
||||
this.win.webContents.executeJavaScript(`app.chrome.maximized = false`)
|
||||
wndState = WND_STATE.NORMAL;
|
||||
this.win.webContents.executeJavaScript(
|
||||
`app.chrome.maximized = false`
|
||||
);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
this.win.on("closed", () => {
|
||||
this.win = null
|
||||
})
|
||||
this.win = null;
|
||||
});
|
||||
|
||||
// Set window Handler
|
||||
this.win.webContents.setWindowOpenHandler((x: any) => {
|
||||
if (x.url.includes("apple") || x.url.includes("localhost")) {
|
||||
return {action: "allow"}
|
||||
return { action: "allow" };
|
||||
}
|
||||
electron.shell.openExternal(x.url).catch(console.error)
|
||||
return {action: 'deny'}
|
||||
})
|
||||
|
||||
electron.shell.openExternal(x.url).catch(console.error);
|
||||
return { action: "deny" };
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -52,8 +52,7 @@
|
|||
<div class="md-container md-container_panel player-panel" v-if="screen == 'player'">
|
||||
<div class="player_top">
|
||||
<div class="md-body player-artwork-container">
|
||||
<div class="media-artwork" :class="artworkPlaying()"
|
||||
:style="{'--artwork': getAlbumArtUrl()}">
|
||||
<div class="media-artwork" :class="artworkPlaying()" :style="{'--artwork': getAlbumArtUrl()}">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -101,8 +100,7 @@
|
|||
</template>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<button class="md-btn playback-button--small lyrics active"
|
||||
@click="player.lowerPanelState = 'controls'"></button>
|
||||
<button class="md-btn playback-button--small lyrics active" @click="player.lowerPanelState = 'controls'"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player_bottom" v-if="player.lowerPanelState == 'controls'">
|
||||
|
|
@ -122,14 +120,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<input type="range" min="0"
|
||||
:value="player.currentMediaItem.durationInMillis - player.currentMediaItem.remainingTime"
|
||||
:max="player.currentMediaItem.durationInMillis" class="web-slider playback-slider"
|
||||
@input="seekTo($event.target.value)">
|
||||
<input type="range" min="0" :value="player.currentMediaItem.durationInMillis - player.currentMediaItem.remainingTime" :max="player.currentMediaItem.durationInMillis" class="web-slider playback-slider" @input="seekTo($event.target.value)">
|
||||
<div class="row nopadding player-duration-container" style="width: 90%;margin: 0 auto;">
|
||||
<div class="col nopadding player-duration-time" style="text-align:left">
|
||||
{{ parseTime(player.currentMediaItem.durationInMillis -
|
||||
player.currentMediaItem.remainingTime) }}
|
||||
{{ parseTime(player.currentMediaItem.durationInMillis - player.currentMediaItem.remainingTime) }}
|
||||
</div>
|
||||
<div class="col nopadding player-duration-time" style="text-align:right">
|
||||
-{{ parseTime(player.currentMediaItem.remainingTime) }}
|
||||
|
|
@ -137,21 +131,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="md-footer playback-buttons">
|
||||
<button class="md-btn playback-button--small repeat" @click="repeat()"
|
||||
v-if="player.currentMediaItem.repeatMode == 0"></button>
|
||||
<button class="md-btn playback-button--small repeat active" @click="repeat()"
|
||||
v-else-if="player.currentMediaItem.repeatMode == 2"></button>
|
||||
<button class="md-btn playback-button--small repeat repeatOne" @click="repeat()"
|
||||
v-else-if="player.currentMediaItem.repeatMode == 1"></button>
|
||||
<button class="md-btn playback-button--small repeat" @click="repeat()" v-if="player.currentMediaItem.repeatMode == 0"></button>
|
||||
<button class="md-btn playback-button--small repeat active" @click="repeat()" v-else-if="player.currentMediaItem.repeatMode == 2"></button>
|
||||
<button class="md-btn playback-button--small repeat repeatOne" @click="repeat()" v-else-if="player.currentMediaItem.repeatMode == 1"></button>
|
||||
<button class="md-btn playback-button previous" @click="previous()"></button>
|
||||
<button class="md-btn playback-button pause" @click="pause()"
|
||||
v-if="player.currentMediaItem.status"></button>
|
||||
<button class="md-btn playback-button pause" @click="pause()" v-if="player.currentMediaItem.status"></button>
|
||||
<button class="md-btn playback-button play" @click="play()" v-else></button>
|
||||
<button class="md-btn playback-button next" @click="next()"></button>
|
||||
<button class="md-btn playback-button--small shuffle" @click="shuffle()"
|
||||
v-if="player.currentMediaItem.shuffleMode == 0"></button>
|
||||
<button class="md-btn playback-button--small shuffle active" @click="shuffle()"
|
||||
v-else></button>
|
||||
<button class="md-btn playback-button--small shuffle" @click="shuffle()" v-if="player.currentMediaItem.shuffleMode == 0"></button>
|
||||
<button class="md-btn playback-button--small shuffle active" @click="shuffle()" v-else></button>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<div class="row volume-slider-container">
|
||||
|
|
@ -159,8 +147,7 @@
|
|||
<div class="player-volume-glyph decrease"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="range" class="web-slider volume-slider" max="1" min="0" step="0.01"
|
||||
@input="setVolume($event.target.value)" :value="player.currentMediaItem.volume">
|
||||
<input type="range" class="web-slider volume-slider" max="1" min="0" step="0.01" @input="setVolume($event.target.value)" :value="player.currentMediaItem.volume">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="player-volume-glyph increase"></div>
|
||||
|
|
@ -170,10 +157,8 @@
|
|||
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'portrait'"
|
||||
@click="showLyrics()"></button>
|
||||
<button class="md-btn playback-button--small lyrics"
|
||||
v-if="checkOrientation() == 'landscape'" @click="showLyricsInline()"></button>
|
||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'portrait'" @click="showLyrics()"></button>
|
||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'landscape'" @click="showLyricsInline()"></button>
|
||||
<button class="md-btn playback-button--small queue" @click="showQueue()"></button>
|
||||
<button class="md-btn playback-button--small search" @click="showSearch()"></button>
|
||||
</div>
|
||||
|
|
@ -191,43 +176,34 @@
|
|||
</div>
|
||||
<div class="col" style="display: flex;align-items: center;">
|
||||
<div class="col">
|
||||
<input type="text" placeholder="Artists, Songs, Lyrics, and More"
|
||||
spellcheck="false" v-model="search.query" @change="searchQuery()"
|
||||
v-on:keyup.enter="searchQuery()" class="search-input">
|
||||
<input type="text" placeholder="Artists, Songs, Lyrics, and More" spellcheck="false" v-model="search.query" @change="searchQuery()" v-on:keyup.enter="searchQuery()" class="search-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-header search-type-container">
|
||||
<button class="search-type-button" @click="search.searchType = 'applemusic';searchQuery()"
|
||||
:class="searchTypeClass('applemusic')" style="width:100%;">Apple Music
|
||||
<button class="search-type-button" @click="search.searchType = 'applemusic';searchQuery()" :class="searchTypeClass('applemusic')" style="width:100%;">Apple Music
|
||||
</button>
|
||||
<button class="search-type-button" @click="search.searchType = 'library';searchQuery()"
|
||||
:class="searchTypeClass('library')" style="width:100%;">Library
|
||||
<button class="search-type-button" @click="search.searchType = 'library';searchQuery()" :class="searchTypeClass('library')" style="width:100%;">Library
|
||||
</button>
|
||||
</div>
|
||||
<div class="md-header search-tab-container" v-if="search.state == 2">
|
||||
<button class="search-tab" @click="search.tab = 'all'" :class="searchTabClass('all')">All
|
||||
Results
|
||||
</button>
|
||||
<button class="search-tab" @click="search.tab = 'songs'"
|
||||
:class="searchTabClass('songs')">Songs
|
||||
<button class="search-tab" @click="search.tab = 'songs'" :class="searchTabClass('songs')">Songs
|
||||
</button>
|
||||
<button class="search-tab" @click="search.tab = 'albums'"
|
||||
:class="searchTabClass('albums')">Albums
|
||||
<button class="search-tab" @click="search.tab = 'albums'" :class="searchTabClass('albums')">Albums
|
||||
</button>
|
||||
<button class="search-tab" @click="search.tab = 'artists'"
|
||||
:class="searchTabClass('artists')">Artists
|
||||
<button class="search-tab" @click="search.tab = 'artists'" :class="searchTabClass('artists')">Artists
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-body-container">
|
||||
<transition name="wpfade">
|
||||
<div class="md-body search-body" v-if="search.state == 0">
|
||||
<div
|
||||
style="font-size: 17px;display:flex;flex-direction: column;justify-content: center;align-items: center;">
|
||||
<img src="./assets/search.svg" style="width: 40px;margin: 32px;opacity: 0.85">
|
||||
Search by song, album, artist, or lyrics.
|
||||
<div style="font-size: 17px;display:flex;flex-direction: column;justify-content: center;align-items: center;">
|
||||
<img src="./assets/search.svg" style="width: 40px;margin: 32px;opacity: 0.85"> Search by song, album, artist, or lyrics.
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -237,10 +213,7 @@
|
|||
</div>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<div class="md-body search-body"
|
||||
ref="searchBody"
|
||||
@scroll="searchScroll"
|
||||
style="overflow-y:auto;" v-if="search.state == 2">
|
||||
<div class="md-body search-body" ref="searchBody" @scroll="searchScroll" style="overflow-y:auto;" v-if="search.state == 2">
|
||||
<template v-if="canShowSearchTab('songs')">
|
||||
<div class="list-entry-header">Songs</div>
|
||||
|
||||
|
|
@ -377,11 +350,9 @@
|
|||
</transition>
|
||||
<!-- Track Select Actions -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel context-menu" style="overflow-y:auto;"
|
||||
v-if="search.trackSelect">
|
||||
<div class="md-container md-container_panel context-menu" style="overflow-y:auto;" v-if="search.trackSelect">
|
||||
<div class="md-body context-menu-body">
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playMediaItemById(search.selected.id);clearSelectedTrack()">
|
||||
<button class="context-menu-item context-menu-item--left" @click="playMediaItemById(search.selected.id);clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center" v-if="search.selected.artwork"
|
||||
style="display:flex;align-items: center;">
|
||||
|
|
@ -404,8 +375,7 @@
|
|||
</button>
|
||||
</div>
|
||||
<div class="md-body context-menu-body" style="height: auto;">
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playMediaItemById(search.selected.id);clearSelectedTrack()">
|
||||
<button class="context-menu-item context-menu-item--left" @click="playMediaItemById(search.selected.id);clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Play
|
||||
|
|
@ -415,8 +385,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playNext('song', search.selected.id);clearSelectedTrack()">
|
||||
<button class="context-menu-item context-menu-item--left" @click="playNext('song', search.selected.id);clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Play Next
|
||||
|
|
@ -426,8 +395,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playLater('song', search.selected.id);clearSelectedTrack()">
|
||||
<button class="context-menu-item context-menu-item--left" @click="playLater('song', search.selected.id);clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Play Later
|
||||
|
|
@ -520,24 +488,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="album-body-container" :style="getMediaPalette(artistPage.data)">
|
||||
<div class="artist-header" v-if="artistPage.data['artwork']"
|
||||
:style="getMediaPalette(artistPage.data)">
|
||||
<div class="artist-header-portrait"
|
||||
:style="{'--artwork': getAlbumArtUrlList(artistPage.data['artwork']['url'], 600)}"></div>
|
||||
<div class="artist-header" v-if="artistPage.data['artwork']" :style="getMediaPalette(artistPage.data)">
|
||||
<div class="artist-header-portrait" :style="{'--artwork': getAlbumArtUrlList(artistPage.data['artwork']['url'], 600)}"></div>
|
||||
<h2>{{ artistPage.data["name"] }}</h2>
|
||||
</div>
|
||||
<div class="md-body artist-body">
|
||||
<h2>Songs</h2>
|
||||
<div class="song-scroller-horizontal">
|
||||
<button v-for="song in artistPage.data['songs']" class="song-placeholder"
|
||||
@click="trackSelect(song)">
|
||||
<button v-for="song in artistPage.data['songs']" class="song-placeholder" @click="trackSelect(song)">
|
||||
{{ song.name }}
|
||||
</button>
|
||||
</div>
|
||||
<h2>Albums</h2>
|
||||
<div class="mediaitem-scroller-horizontal">
|
||||
<button v-for="album in artistPage.data['albums']" class="album-placeholder"
|
||||
@click="showAlbum(album.id)">
|
||||
<button v-for="album in artistPage.data['albums']" class="album-placeholder" @click="showAlbum(album.id)">
|
||||
{{ album.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -574,30 +538,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="md-header" style="text-align: right;padding: 5px 16px;">
|
||||
<button
|
||||
class="md-btn playback-button--small autoplay"
|
||||
v-if="!player.currentMediaItem.autoplayEnabled"
|
||||
@click="setAutoplay(true)"
|
||||
></button>
|
||||
<button
|
||||
class="md-btn playback-button--small autoplay activeColor"
|
||||
v-else
|
||||
@click="setAutoplay(false)"
|
||||
></button>
|
||||
<button class="md-btn playback-button--small autoplay" v-if="!player.currentMediaItem.autoplayEnabled" @click="setAutoplay(true)"></button>
|
||||
<button class="md-btn playback-button--small autoplay activeColor" v-else @click="setAutoplay(false)"></button>
|
||||
</div>
|
||||
<div class="md-body queue-body" v-if="!player.queue['_queueItems']">
|
||||
Empty
|
||||
</div>
|
||||
<div class="md-body queue-body" style="overflow-y:auto;" id="list-queue" v-else>
|
||||
<draggable
|
||||
v-model="queue.temp"
|
||||
handle=".handle"
|
||||
filter=".passed"
|
||||
@change="queueMove">
|
||||
<template
|
||||
v-for="(song, position) in queue.temp"
|
||||
v-if="position > player.queue['_position']"
|
||||
>
|
||||
<draggable v-model="queue.temp" handle=".handle" filter=".passed" @change="queueMove">
|
||||
<template v-for="(song, position) in queue.temp" v-if="position > player.queue['_position']">
|
||||
<div class="list-entry" :class="getQueuePositionClass(position)">
|
||||
<div class="row" style="width:100%;">
|
||||
<div class="col-auto">
|
||||
|
|
@ -626,11 +575,8 @@
|
|||
</draggable>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'portrait'"
|
||||
@click="showLyrics()"></button>
|
||||
<button class="md-btn playback-button--small lyrics"
|
||||
v-if="checkOrientation() == 'landscape'"
|
||||
@click="screen = 'player';showLyricsInline()"></button>
|
||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'portrait'" @click="showLyrics()"></button>
|
||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'landscape'" @click="screen = 'player';showLyricsInline()"></button>
|
||||
<button class="md-btn playback-button--small queue active" @click="screen = 'player'"></button>
|
||||
<button class="md-btn playback-button--small search" @click="showSearch()"></button>
|
||||
</div>
|
||||
|
|
@ -689,9 +635,7 @@
|
|||
</transition>
|
||||
<!-- Album Page -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel md-container_album"
|
||||
v-if="screen == 'album-page' && albumPage.data['name']"
|
||||
>
|
||||
<div class="md-container md-container_panel md-container_album" v-if="screen == 'album-page' && albumPage.data['name']">
|
||||
<div class="md-header">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
|
|
@ -701,8 +645,7 @@
|
|||
</div>
|
||||
<div class="album-body-container">
|
||||
<div class="md-header">
|
||||
<div class="albumpage-artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(albumPage.data['artwork']['url'], 300)}">
|
||||
<div class="albumpage-artwork" :style="{'--artwork': getAlbumArtUrlList(albumPage.data['artwork']['url'], 300)}">
|
||||
</div>
|
||||
<div class="albumpage-album-name">
|
||||
{{ albumPage.data["name"] }}
|
||||
|
|
@ -711,20 +654,15 @@
|
|||
{{ albumPage.data["artistName"] }}
|
||||
</div>
|
||||
<div class="albumpage-misc-info">
|
||||
{{ albumPage.data.genreNames[0] }} ∙ {{ new Date(albumPage.data.releaseDate).getFullYear()
|
||||
}}
|
||||
{{ albumPage.data.genreNames[0] }} ∙ {{ new Date(albumPage.data.releaseDate).getFullYear() }}
|
||||
</div>
|
||||
<div class="row" style="margin-top: 20px;">
|
||||
<div class="col">
|
||||
<button class="wr-btn"
|
||||
@click="playAlbum(albumPage.data.id, false)"
|
||||
style="width:100%;">Play
|
||||
<button class="wr-btn" @click="playAlbum(albumPage.data.id, false)" style="width:100%;">Play
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="wr-btn" style="width:100%;"
|
||||
@click="playAlbum(albumPage.data.id, true)"
|
||||
>Shuffle
|
||||
<button class="wr-btn" style="width:100%;" @click="playAlbum(albumPage.data.id, true)">Shuffle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -737,12 +675,10 @@
|
|||
</div>
|
||||
<div class="md-body artist-body">
|
||||
<div class="list-entry-header">Tracks</div>
|
||||
<div class="list-entry" v-for="song in albumPage.data['tracks']"
|
||||
@click="trackSelect(song)">
|
||||
<div class="list-entry" v-for="song in albumPage.data['tracks']" @click="trackSelect(song)">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" v-if="song.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(song.artwork.url)}">
|
||||
<div class="list-entry-image" v-if="song.artwork" :style="{'--artwork': getAlbumArtUrlList(song.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
|
|
@ -768,23 +704,13 @@
|
|||
</transition>
|
||||
<!-- Album Page - Editorial Notes -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel context-menu" v-if="albumPage.editorsNotes"
|
||||
style="padding-top: 42px;">
|
||||
<div class="md-header"
|
||||
:style="getMediaPalette(albumPage.data)"
|
||||
style="font-size: 18px;background:var(--bgColor);color:var(--textColor1);text-align: center;border-radius: 10px 10px 0 0;border-top: 1px solid #ffffff1f;"
|
||||
>
|
||||
<div class="md-container md-container_panel context-menu" v-if="albumPage.editorsNotes" style="padding-top: 42px;">
|
||||
<div class="md-header" :style="getMediaPalette(albumPage.data)" style="font-size: 18px;background:var(--bgColor);color:var(--textColor1);text-align: center;border-radius: 10px 10px 0 0;border-top: 1px solid #ffffff1f;">
|
||||
{{ albumPage.data["name"] }}
|
||||
</div>
|
||||
<div class="md-body album-page-fullnotes-body"
|
||||
:style="getMediaPalette(albumPage.data)"
|
||||
style="background:var(--bgColor);color:var(--textColor1);"
|
||||
v-html="albumPage.data['editorialNotes']['standard']">
|
||||
<div class="md-body album-page-fullnotes-body" :style="getMediaPalette(albumPage.data)" style="background:var(--bgColor);color:var(--textColor1);" v-html="albumPage.data['editorialNotes']['standard']">
|
||||
</div>
|
||||
<div class="md-footer"
|
||||
:style="getMediaPalette(albumPage.data)"
|
||||
style="background:var(--bgColor);color:var(--textColor1);"
|
||||
>
|
||||
<div class="md-footer" :style="getMediaPalette(albumPage.data)" style="background:var(--bgColor);color:var(--textColor1);">
|
||||
<button class="context-menu-item" @click="albumPage.editorsNotes = false">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -802,9 +728,7 @@
|
|||
</div>
|
||||
<div v-else>
|
||||
<h3 style="text-align:center;">Connection Interrupted</h3>
|
||||
<button class="md-btn md-btn-primary"
|
||||
style="font-weight:500;width: 120px;border-radius: 50px;display:block;margin: 0 auto;"
|
||||
@click="connect()">Retry
|
||||
<button class="md-btn md-btn-primary" style="font-weight:500;width: 120px;border-radius: 50px;display:block;margin: 0 auto;" @click="connect()">Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -845,15 +769,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="md-btn playback-button pause" @click="$parent.pause()"
|
||||
v-if="$parent.player.currentMediaItem.status"></button>
|
||||
<button class="md-btn playback-button pause" @click="$parent.pause()" v-if="$parent.player.currentMediaItem.status"></button>
|
||||
<button class="md-btn playback-button play" @click="$parent.play()" v-else></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="index.js?v=1"></script>
|
||||
<script src="./index.js?v=1"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue