summaryrefslogtreecommitdiff
path: root/app/lyrics.php
diff options
context:
space:
mode:
authorRaindropsSys <raindrops@equestria.dev>2023-10-27 22:29:56 +0200
committerRaindropsSys <raindrops@equestria.dev>2023-10-27 22:29:56 +0200
commit4d4308c46d4f7801c657cc79d2243e1a81831334 (patch)
treea2e392e0af92b9a3ca3d1b5afb841640276e2294 /app/lyrics.php
parent9f9d66afebc59c6c265c4424f7b8fb36d8876541 (diff)
downloadmist-4d4308c46d4f7801c657cc79d2243e1a81831334.tar.gz
mist-4d4308c46d4f7801c657cc79d2243e1a81831334.tar.bz2
mist-4d4308c46d4f7801c657cc79d2243e1a81831334.zip
Updated 32 files, added 279 files, deleted 3 files and renamed 14 files (automated)
Diffstat (limited to 'app/lyrics.php')
-rw-r--r--app/lyrics.php164
1 files changed, 0 insertions, 164 deletions
diff --git a/app/lyrics.php b/app/lyrics.php
deleted file mode 100644
index 4a7537d..0000000
--- a/app/lyrics.php
+++ /dev/null
@@ -1,164 +0,0 @@
-<?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/session.php"; ?>
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>lyrics</title>
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
- <link href="/assets/dark.css" rel="stylesheet">
- <link href="/assets/styles.css" rel="stylesheet">
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
- <script src="/assets/localforage.min.js"></script>
- <script src="/assets/shortcuts.js"></script>
- <link id="native-css" href="/assets/native.css" rel="stylesheet" disabled>
- <style>
- .synced-lyrics-item {
- opacity: .25;
- font-size: 4vw;
- min-font-size: 22px;
- margin-bottom: 10px;
- transition: opacity 200ms;
- }
-
- .synced-lyrics-item.active {
- opacity: 1;
- }
-
- ::-webkit-scrollbar {
- display: none;
- }
-
- #lyrics-synced {
- transition-property: top;
- transition-duration: 500ms;
- transition-timing-function: cubic-bezier(0.54, 0, 0.23, 0.79);
- }
- </style>
-</head>
-<body class="crossplatform" style="background-color: transparent !important;">
- <script>
- if (navigator.userAgent.includes("MistNative/darwin") || navigator.userAgent.includes("MistNative/win32")) {
- document.getElementById("native-css").disabled = false;
- document.body.classList.remove("crossplatform");
- }
- </script>
- <div id="lyrics-outer">
- <div id="not-playing" style="position: fixed; inset: 16px; display: flex; align-items: center; justify-content: center; opacity: .5; text-align: center;">
- Lyrics will appear here when you start playing a song. If supported, they will also scroll as the song plays.
- </div>
-
- <div id="not-available" style="display: none; position: fixed; inset: 16px; align-items: center; justify-content: center; opacity: .5; text-align: center;">
- No lyrics are available for this song. Try again later.
- </div>
-
- <div id="loading" style="display: none; position: fixed; inset: 16px; align-items: center; justify-content: center; opacity: .5; text-align: center;">
- Loading lyrics...
- </div>
-
- <div id="lyrics-unsynced" style="display: none; position: fixed; inset: 16px; overflow: auto;"></div>
- <div id="lyrics-synced" style="text-align: center; display: none; position: fixed; left: 16px; right: 16px; top: 0; bottom: 0; z-index: 5;"></div>
- <div id="lyrics-synced-fade" style="display: none; position: fixed; inset: 0; z-index: 10; background-image: linear-gradient(180deg, rgba(255,0,0,0) 25%, rgba(255,255,255,1) 100%);"></div>
- </div>
-
- <script>
- let lastID = null;
- let lastTimestamp = null;
- window.lyrics = {};
-
- setInterval(async () => {
- if (window.parent.currentSongID !== lastID) {
- lastID = window.parent.currentSongID;
-
- if (lastID === null) {
- document.getElementById("lyrics-synced").style.display = "none";
- document.getElementById("lyrics-synced-fade").style.display = "none";
- document.getElementById("lyrics-unsynced").style.display = "none";
- document.getElementById("not-available").style.display = "none";
- document.getElementById("loading").style.display = "none";
- document.getElementById("not-playing").style.display = "flex";
- } else {
- document.getElementById("lyrics-synced").style.display = "none";
- document.getElementById("lyrics-synced-fade").style.display = "none";
- document.getElementById("lyrics-unsynced").style.display = "none";
- document.getElementById("not-available").style.display = "none";
- document.getElementById("loading").style.display = "flex";
- document.getElementById("not-playing").style.display = "none";
-
- if (!window.lyrics[lastID]) {
- window.lyricsLoadTimeout = setTimeout(() => {
- location.reload();
- }, 10000);
-
- try {
- window.lyrics[lastID] = await (await fetch("/api/lyrics.php?id=" + lastID)).json()
- } catch (e) {
- window.lyrics[lastID] = {
- synced: false,
- payload: null
- }
- }
-
- clearTimeout(window.lyricsLoadTimeout);
-
- if (window.lyrics[lastID] && window.lyrics[lastID].payload) {
- if (window.lyrics[lastID].synced) {
- document.getElementById("lyrics-synced").style.display = "";
- document.getElementById("lyrics-synced-fade").style.display = "";
- document.getElementById("lyrics-unsynced").style.display = "none";
- document.getElementById("not-available").style.display = "none";
- document.getElementById("loading").style.display = "none";
- document.getElementById("not-playing").style.display = "none";
-
- document.getElementById("lyrics-synced").innerHTML = "<div style='height: 16px;'></div>" + window.lyrics[lastID].payload.map(i => `
- <div class="synced-lyrics-item" id="synced-lyrics-${i.startTimeMs}">${i.words}</div>
- `).join("") + "<div style='height: 16px;'></div>";
- } else {
- document.getElementById("lyrics-synced").style.display = "none";
- document.getElementById("lyrics-synced-fade").style.display = "none";
- document.getElementById("lyrics-unsynced").style.display = "";
- document.getElementById("not-available").style.display = "none";
- document.getElementById("loading").style.display = "none";
- document.getElementById("not-playing").style.display = "none";
-
- document.getElementById("lyrics-unsynced").innerText = window.lyrics[lastID].payload.replaceAll("\n\n\n", "\n");
- }
- } else {
- document.getElementById("lyrics-synced").style.display = "none";
- document.getElementById("lyrics-synced-fade").style.display = "none";
- document.getElementById("lyrics-unsynced").style.display = "none";
- document.getElementById("not-available").style.display = "flex";
- document.getElementById("loading").style.display = "none";
- document.getElementById("not-playing").style.display = "none";
- }
- }
- }
- }
-
- if (window.lyrics[lastID] && window.lyrics[lastID].synced) {
- document.getElementById("lyrics-synced").style.display = "";
- document.getElementById("lyrics-synced-fade").style.display = "";
- document.getElementById("lyrics-unsynced").style.display = "none";
- document.getElementById("not-available").style.display = "none";
- document.getElementById("loading").style.display = "none";
- document.getElementById("not-playing").style.display = "none";
-
- for (let item of [...window.lyrics[lastID].payload].reverse()) {
- if (parseInt(item.startTimeMs) / 1000 <= window.parent.document.getElementById("player").contentDocument.getElementById("player-audio").currentTime) {
- if (item.startTimeMs !== lastTimestamp) {
- Array.from(document.getElementsByClassName("synced-lyrics-item")).map(i => i.classList.remove("active"));
- document.getElementById("lyrics-synced").style.top = "-" + (document.getElementById("synced-lyrics-" + item.startTimeMs).offsetTop - 33) + "px";
- lastTimestamp = item.startTimeMs;
- document.getElementById("synced-lyrics-" + item.startTimeMs).classList.add("active");
- }
-
- break;
- }
- }
- }
- }, 100);
- </script>
-</body>
-</html> \ No newline at end of file
© Floofi Systems, Some rights reserved. Powered by cgit.