Merge branch 'rewrite-alpine-tailwind'

.devcontainer/devcontainer.json

@@ -0,0 +1,28 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/php
+{
+	"name": "PHP",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/php:1-8.2-bullseye",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [
+		8080
+	],
+	"features": {
+		"ghcr.io/devcontainers-contrib/features/zsh-plugins:0": {},
+		"ghcr.io/stuartleeks/dev-container-features/shell-history:0": {}
+	},
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "sudo a2enmod rewrite && sudo chmod a+x \"$(pwd)\" && sudo rm -rf /var/www/html && sudo ln -s \"$(pwd)\" /var/www/html && service apache2 restart"
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.htaccess

@@ -2,3 +2,18 @@ ErrorDocument 404 /404.php
 ErrorDocument 403 /403.php
 
 RedirectMatch 403 /.env
+
+# vendor
+RewriteRule ^vendor/.*$ - [F,L,NC]
+
+# disable .git folder
+RedirectMatch 404 /\.git
+
+# disable .devcontainer, .vscode, .github folders
+RedirectMatch 404 /(\.devcontainer|\.vscode|\.github)
+
+# disable directory browsing
+Options -Indexes
+
+# disable server signature
+ServerSignature Off

assets/js/playing.js

@@ -0,0 +1,59 @@
+// Check if cookie refreshToken is set
+let cookie = document.cookie;
+if (!cookie.includes("refreshToken")) { window.location.replace('login.php'); }
+
+const refreshTime = readCookie('refreshTime');
+let spotifyApi;
+
+document.addEventListener('alpine:init', x => {
+  Alpine.store('player', {
+    init() {
+      spotifyApi = new SpotifyWebApi();
+      spotifyApi.setAccessToken(readCookie('accessToken'));
+
+      this.poolingLoop();
+    },
+
+    playbackObj: {},
+    lastPlaybackObj: {},
+
+    targetImg: 'assets/images/no_song.png',
+
+    async poolingLoop() {
+      setInterval(async () => {
+        await this.fetchState();
+      }, 1000)
+    },
+
+    async fetchState() {
+      if (Math.floor(Date.now() / 1000) >= refreshTime) {
+        window.location.replace('token.php?action=refresh');
+      }
+
+      const response = await spotifyApi.getMyCurrentPlaybackState();
+      if (response) {
+        this.handleChange(response);
+      }
+    },
+
+    handleChange(obj) {
+      this.lastPlaybackObj = this.playbackObj;
+      this.playbackObj = obj;
+
+      if (this.playbackObj.item?.name) {
+        document.title = `${this.playbackObj.item?.name} - ${this.playbackObj.item?.artists[0].name} - NowPlaying`;
+      }
+
+      // Fetch album art
+      const imgUrl = this.playbackObj.item?.album?.images[0]?.url;
+      if (imgUrl !== this.lastPlaybackObj.item?.album?.images[0]?.url) {
+        // Load image in new element and then set it on the target
+        const img = new Image();
+        img.src = (imgUrl !== undefined) ? imgUrl : 'assets/images/no_song.png'
+        img.onload = () => {
+          this.targetImg = this.playbackObj.item?.album?.images[0]?.url;
+        }
+      }
+    }
+  })
+})

assets/js/scripts.js

@@ -1,24 +1,28 @@
 if (localStorage.getItem('deviceId') == null) {
-	function makeId(length) {
-		var out = '';
-		var numbers = '0123456789';
-		for ( let i = 0; i < length; i++ ) {
-			out += numbers.charAt(Math.floor(Math.random() * numbers.length));
-		}
-		return out;
-	}
+    function makeId(length) {
+        var out = '';
+        var numbers = '0123456789';
+        for ( let i = 0; i < length; i++ ) {
+            out += numbers.charAt(Math.floor(Math.random() * numbers.length));
+        }
+        return out;
+        }
 
-	localStorage.setItem('deviceId', makeId(4))
+    localStorage.setItem('deviceId', makeId(4))
 }
 
 function msToTime(duration) {
-    var milliseconds = parseInt((duration % 1000) / 100),
-        seconds = parseInt((duration / 1000) % 60),
+    let seconds = parseInt((duration / 1000) % 60),
         minutes = parseInt((duration / (1000 * 60)) % 60)
+
     minutes = (minutes < 10) ? "0" + minutes : minutes;
     seconds = (seconds < 10) ? "0" + seconds : seconds;
 
-    return minutes + ":" + seconds;
+    if (minutes !== NaN && seconds !== NaN) {
+        return minutes + ":" + seconds;
+    } else {
+        return undefined;
+    }
 }
 
 function readCookie(name) {
@@ -70,11 +74,7 @@ function closeFullscreen() {
 
 function fullscreen() {
     let isFullscreen = document.fullscreen;
-    if (isFullscreen == true) {
-        closeFullscreen();
-    } else {
-        openFullscreen();
-    }
+    (isFullscreen) ? closeFullscreen() : openFullscreen()
 }
 
 function theme() {

assets/js/spotify-web-api.js

@@ -1687,6 +1687,21 @@ var SpotifyWebApi = (function() {
         return _checkParamsAndPerformRequest(requestData, options, callback);
     };
 
+    /**
+     * Gets the user's playing queue
+     *
+     * See [Get the User's Queue](https://developer.spotify.com/documentation/web-api/reference/#/operations/get-queue) on
+     * the Spotify Developer site for more information about the endpoint.
+     *
+     * @return {Object} Null if a callback is provided, a `Promise` object otherwise
+     */
+    Constr.prototype.getMyCurrentQueue = function(options, callback) {
+        var requestData = {
+            url: _baseUri + '/me/player/queue'
+        };
+        return _checkParamsAndPerformRequest(requestData, options, callback);
+    }
+
     /**
      * Gets the access token in use.
      *

assets/styles/playing.css

@@ -115,6 +115,47 @@ body {
     z-index: 3;
 }
 
+#up-next-div {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    padding: 16px 32px;
+
+    background: #00000030;
+}
+
+#up-next-song {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+#up-next-img {
+    height: 100px;
+    width: 100px;
+
+    border-radius: 12px;
+
+    box-shadow: 0px 4px 8px #00000030;
+}
+
+#up-next-song-title {
+    font-size: 30px;
+    font-weight: bold;
+    margin: 0px;
+}
+
+#up-next-song-artist {
+    font-size: 26px;
+    margin: 0px;
+}
+
 .fadeInOut {
     transition-duration: 200ms;
     transition-property: visibility, opacity;