feat(YTPLR): add Presence

websites/Y/YTPLR/iframe.ts

@@ -0,0 +1,14 @@
+const iframe = new iFrame();
+iframe.on("UpdateData", async () => {
+	const videoElement: HTMLVideoElement =
+		document.querySelector(".video-stream");
+	if (!videoElement) return;
+
+	iframe.send({
+		title: document.querySelector<HTMLAnchorElement>("div.ytp-title-text > a")
+			.textContent,
+		duration: videoElement.duration,
+		currentTime: videoElement.currentTime,
+		paused: videoElement.paused,
+	});
+});

websites/Y/YTPLR/metadata.json

@@ -0,0 +1,32 @@
+{
+	"$schema": "https://schemas.premid.app/metadata/1.11",
+	"apiVersion": 1,
+	"author": {
+		"name": "uwu_peter",
+		"id": "762219738570555412"
+	},
+	"service": "YTPLR",
+	"description": {
+		"en": "Shuffles a YouTube Playlist in random order"
+	},
+	"url": "youtube-playlist-randomizer.bitbucket.io",
+	"version": "1.0.0",
+	"logo": "https://i.imgur.com/hsDOqgw.png",
+	"thumbnail": "https://i.imgur.com/VhkOWl2.png",
+	"color": "#ff6d70",
+	"tags": [
+		"video",
+		"media"
+	],
+	"settings": [
+		{
+			"id": "buttons",
+			"title": "Show Buttons",
+			"icon": "fas fa-compress-arrows-alt",
+			"value": true
+		}
+	],
+	"category": "videos",
+	"iFrameRegExp": ".*",
+	"iframe": true
+}

websites/Y/YTPLR/presence.ts

@@ -0,0 +1,80 @@
+const presence = new Presence({
+		clientId: "1284161421957136486",
+	}),
+	strings = presence.getStrings({
+		play: "general.watchingVid",
+		pause: "general.paused",
+	}),
+	browsingTimestamp = Math.floor(Date.now() / 1000);
+
+let videoTitle: string,
+	videoCurrentTime: number,
+	videoDuration: number,
+	videoPaused: boolean,
+	videoPlaylistTotal: number,
+	videoPlaylistID: string,
+	videoPlaylistTitle: string;
+
+interface DataInterface {
+	title: string;
+	currentTime: number;
+	duration: number;
+	paused: boolean;
+}
+
+const enum Assets {
+	Logo = "https://youtube-playlist-randomizer.bitbucket.io/music-icon.png",
+}
+
+presence.on("iFrameData", (data: DataInterface) => {
+	videoTitle = data.title;
+	videoCurrentTime = data.currentTime;
+	videoDuration = data.duration;
+	videoPaused = data.paused;
+	videoPlaylistTotal = parseInt(document.querySelector("#all").textContent);
+	videoPlaylistID = document.querySelector<HTMLInputElement>("#pid").value;
+	videoPlaylistTitle = document.querySelector("#title").textContent;
+});
+
+presence.on("UpdateData", async () => {
+	const presenceData: PresenceData = {
+			largeImageKey: Assets.Logo,
+		},
+		[startTimestamp, endTimestamp] = presence.getTimestamps(
+			Math.floor(videoCurrentTime),
+			Math.floor(videoDuration)
+		),
+		showButtons = await presence.getSetting<boolean>("buttons");
+
+	if (videoTitle) {
+		presenceData.type = ActivityType.Watching;
+		presenceData.details = `Shuffling ${videoPlaylistTotal} Videos`;
+		presenceData.state = videoTitle;
+		presenceData.smallImageKey = videoPaused ? Assets.Pause : Assets.Play;
+		presenceData.smallImageText = videoPaused
+			? (await strings).pause
+			: (await strings).play;
+
+		if (!videoPaused) {
+			presenceData.startTimestamp = startTimestamp;
+			presenceData.endTimestamp = endTimestamp;
+		} else {
+			delete presenceData.startTimestamp;
+			delete presenceData.endTimestamp;
+		}
+
+		if (videoPlaylistID && showButtons) {
+			presenceData.buttons = [
+				{
+					label: `Shuffle ${videoPlaylistTitle}`,
+					url: `https://youtube-playlist-randomizer.bitbucket.io/?pid=${videoPlaylistID}&autostart`,
+				},
+			];
+		} else delete presenceData.buttons;
+	} else presenceData.startTimestamp = browsingTimestamp;
+
+	presenceData.state = `"${presenceData.state}"`;
+
+	if (presenceData.details) presence.setActivity(presenceData);
+	else presence.setActivity();
+});