Players: Modules and reworks

web/css/layout-other.css

@@ -1042,3 +1042,16 @@ button.ranked-poll__submit-button {
 .berryemote[title$=" from /r/discordserver"] {
     background-repeat: no-repeat;
 }
+
+/* Maximize the players */
+#ytapiplayer,
+#ytapiplayer > iframe:not(#scPlayer),
+#ytapiplayer #vjs_player {
+	width: 100% !important;
+	height: 100% !important;
+	position: relative;
+}
+
+#scVolumeSlider .ui-slider-range {
+	background: #C600AD;
+}

web/headers.php

@@ -97,30 +97,29 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tinyscrollbar/2.4.2/jquery.tinyscrollbar.min.js" integrity="sha256-gENsdwXJl1qiwOqS0DF+kfqTP5Dy+0gDTtxpRcWVhrU=" crossorigin="anonymous" defer></script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.15.4/video.min.js" integrity="sha512-dsg6qxwnVPFvhJhbRxyhW9gFvzytQ//4fCinJgKZQuoH6v6JYryP4OOjDGY7MfdVHjv1trJRDmJWdL2dNsbm6A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.2/videojs-flash.min.js" integrity="sha256-2sKPIPOV8Cj34r74ZnRcdKrQ7Jqqg0o1zR2c74VDW1s=" crossorigin="anonymous" defer></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.9.2/dash.all.min.js" integrity="sha256-EmXFhpSryXnCa3tOiKDfYUFhpmnkvo3PSe3Tj3KpX6o=" crossorigin="anonymous" defer></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.10.0/videojs-dash.min.js" integrity="sha256-xhLRr5mlvCCC7DndQjNURZOXGxwYUoB2VoF0mNUiuJc=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js" integrity="sha256-bFYtqOZj1MLDlOrOlxCU9aruDP2zxiIKvmoo+dHsy4w=" crossorigin="anonymous" defer></script>
 
 <script src="<?= cdn('vendor/videojs-quality-selector/silvermine-videojs-quality-selector.js') ?>" defer></script>
 
+<script src="https://www.youtube.com/iframe_api" defer id="youtube-iframe-api"></script>
+<script src="https://w.soundcloud.com/player/api.js" defer></script>
+<script src="https://player.vimeo.com/api/player.js" defer></script>
+<script src="https://player.twitch.tv/js/embed/v1.js" defer></script>
+<script src="https://api.dmcdn.net/all.js" defer></script>
+
 <script src="<?= cdn('js/lib.js') ?>" defer></script>
 <script src="<?= cdn('js/init.js') ?>" defer></script>
 <script src="<?= cdn('js/functions.js') ?>" defer></script>
 <script src="<?= cdn('js/callbacks.js') ?>" defer></script>
-<script src="<?= cdn('js/player.js') ?>" defer></script>
 <script src="<?= cdn('js/modules/main.js') ?>" type="module"></script>
+<script src="<?= cdn('js/modules/player.js') ?>" type="module"></script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js" integrity="sha256-y0EpKQP2vZljM73+b7xY4dvbYQkHRQXuPqRjc7sjvnA=" crossorigin="anonymous" defer></script>
 
 <script src="<?= cdn('berrymotes/js/berrymotes.berrytube.js') ?>" defer></script>
 <script src="<?= cdn('berrymotes/js/berrymotes.core.js') ?>" defer></script>
 
-<script src="https://www.youtube.com/iframe_api" defer id="youtube-iframe-api"></script>
-<script src="https://w.soundcloud.com/player/api.js" defer></script>
-<script src="https://player.vimeo.com/api/player.js" defer></script>
-<script src="https://player.twitch.tv/js/embed/v1.js" defer></script>
-<script src="https://api.dmcdn.net/all.js" defer></script>
+
 
 <?php end_minified_tags(); ?>
 

web/js/callbacks.js

@@ -1,18 +1,9 @@
-function vimeo_player_loaded(id) {
-	//id is automatically passed
-	setVal("VIMEOPLAYERLOADED", true);
-}
 function onYouTubeIframeAPIReady() {
 	setVal("YTAPREADY", true);
 }
-function onDailymotionPlayerReady() {
-	setVal("DMPLAYERREADY", true);
-}
 function videoEnded() {
-	// Playlist progression is controlled by the server now, but if someone has berry, it should still ask for next.
-	// TODO: Should we really be doing this? Could this be causing the berry delay bug?
-	if (LEADER) {
-		//socket.emit("playNext");
+	if (controlsVideo()) {
+		forceStateChange();
 	}
 }
 function videoSeeked(time) {
@@ -23,7 +14,6 @@ function videoSeeked(time) {
 	}
 }
 function videoPlaying() {
-	//PLAYING_VID = getLiteralPlayingVidID();
 	if (controlsVideo()) {
 		videoGetTime(function (time) {
 			SEEK_TO = time;
@@ -49,10 +39,6 @@ function videoPaused() {
 socket.on("createPlayer", function (data) {
 	console.log('createPlayer', data);
 
-	if (!INIT_TIME) {
-		INIT_TIME = data.time;
-	}
-
 	const isNew = ACTIVE.videoid != data.video.videoid;
 
 	unfuckPlaylist();
@@ -85,55 +71,49 @@ socket.on("recvPlaylist", function (data) {
 	});
 });
 socket.on("hbVideoDetail", function (data) {
+	if (controlsVideo()) {
+		return;
+	}
 
-	//if(videoGetState() == -1 || videoGetState() == 3 ) return;
-	if (controlsVideo()) return;
-	dbg('hbVideoDetail data');
-	dbg(data);
-	//Check if video ID is the same as ours.
-	if (ACTIVE.videoid != data.video.videoid) {
-		// Ask server for a videochange/update.
-		dbg("SHIT: " + ACTIVE.videoid + " != " + data.video.videoid);
+	dbg('hbVideoDetail', data);
+
+	//not matching, refresh player
+	if (ACTIVE.videoid !== data.video.videoid) {
+		dbg(`ID mismatch: ${ACTIVE.videoid} !== ${data.video.videoid}`);
 		socket.emit("refreshMyVideo");
+		return;
 	}
-	/*else if(ACTIVE.videoid == data.video.videoid && videoGetState() == 0) // We've already finished.
-	{
-		// Ho hum.
-		dbg("SHIT: ho-hum");
-	}*/
-	else if (getStorage('syncAtAll') == 1) {
-		dbg("SYNCH_AT_ALL");
-		videoGetTime(function (time) {
-			if (Math.abs(time - data.time) > getStorage('syncAccuracy')) {
-				dbg("SHIT: " + (time - data.time) + " > " + getStorage('syncAccuracy'));
-				videoSeekTo(data.time);
-			}
 
-			if (videoGetState() == 2) {
-				dbg("SHIT: " + videoGetState() + " > 2");
-				videoSeekTo(data.time);
-			}
+	//do not sync
+	if (getStorage('syncAtAll') === 0 || !PLAYER) {
+		return;
+	}
 
-			if (data.state == 1 && videoGetState() != 1) {
-				dbg("SHIT: " + data.state + " == 1 && " + videoGetState() + " != 1");
-				videoPlay();
-			}
+	const accuracy = getStorage('syncAccuracy'); 
+	const flags = {
+		play: false,
+		seek: [false, -1]
+	};
 
-			if (data.state == 2 && videoGetState() != 2) {
-				dbg("SHIT: " + data.state + " == 2 && " + videoGetState() + " != 2");
-				videoPause();
-				videoSeekTo(data.time);
-			}
+	videoGetTime((time) => {
+		const videoState = videoGetState();
 
-			if (data.state == 3 && videoGetState() != 2) // Intentionally 2
-			{
-				dbg("SHIT: " + data.state + " == 3 && " + videoGetState() + " != 2");
-				videoPause();
-				videoSeekTo(data.time);
-			}
-		});
-	}
-	dbg("hbVideoDetail Complete");
+		flags.seek = Math.abs(time - data.time) > accuracy ? [true, data.time]: flags.seek; 
+		flags.play = data.state === 1 && videoState !== 1;
+
+		if (data.state !== videoState && !flags.play) {
+			dbg(`Player states don't match: ${data.state} !== ${videoState}`);
+			flags.seek = [true, data.time];
+		}
+
+		if (flags.play) {
+			videoPlay();
+		}
+
+		if (flags.seek[0] && time !== -1) {
+			videoSeekTo(flags.seek[1]);
+		}
+	});
 });
 socket.on("sortPlaylist", function (data) {
 	unfuckPlaylist();

web/js/functions.js

@@ -1,8 +1,6 @@
 let lastPollCountdown = null;
-let selectedQuality = null;
 
 const integerRegex = /^\d+$/;
-const QUALITY_LOCAL_STORAGE_KEY = "quality";
 
 class Countdown {
 	constructor(totalTimeInSeconds, startedAt, handlers) {
@@ -868,19 +866,7 @@ function recalcStats() {
 
 	numberMan.text(PLAYLIST.length + " Videos");
 }
-// TODO: I don't think this us used anymore?
-function hbVideoDetail() {
-	if (controlsVideo()) {
-		if (videoGetState() == 0 || videoGetState() == 1 || videoGetState() == 2) {
-			videoGetTime(function (t) {
-				socket.emit("hbVideoDetail", {
-					time: t,
-					state: videoGetState()
-				});
-			});
-		}
-	}
-}
+
 function setToggleable(name, state, label) {
 	var opt = $(".tgl-" + name);
 	if (typeof label == "undefined") {
@@ -909,11 +895,10 @@ function forceStateChange() {
 	var s = videoGetState();
 	if (controlsVideo()) {
 		if (LAST_EMIT_STATE != s) {
-			if (s == 1 || s == 2) {
-				socket.emit("forceStateChange", {
-					state: s
-				});
-			}
+			socket.emit("forceStateChange", {
+				state: s
+			});
+
 			LAST_EMIT_STATE = s;
 		}
 	}
@@ -2170,25 +2155,17 @@ function videoPlayNext() {
 	}
 }
 function videoGetTime(callback) {
-	if (PLAYER.getTime) {
-		PLAYER.getTime(callback);
-	}
+	PLAYER.getTime(callback);
 }
 function videoGetState() {
-	if (PLAYER.getVideoState) {
-		return PLAYER.getVideoState();
-	}
+	return PLAYER.getVideoState();
 }
 function videoSeekTo(pos) {
 	console.log("Got seek to", secToTime(pos));
-	if (PLAYER.seek) {
-		PLAYER.seek(pos);
-	}
+	PLAYER.seek(pos);
 }
 function videoPlay() {
-	if (PLAYER.play) {
-		PLAYER.play();
-	}
+	PLAYER.play();
 }
 function videoLoadAtTime(vidObj, time) {
 	const {
@@ -2199,26 +2176,27 @@ function videoLoadAtTime(vidObj, time) {
 
 	//instead of attempt to acquire from players, get from volume manager
 	const volume = window.volume.get(ptype);
-	const change = VIDEO_TYPE != ptype || !PLAYERS[ptype].playVideo;
+	const change = VIDEO_TYPE !== ptype;
 
 	if (change) {
 		//we need to stop the volume grabbing before removing the player
 		window.volume.stop();
 
-		removeCurrentPlayer();
-		PLAYER = PLAYERS[ptype];
-		VIDEO_TYPE = ptype;
+		//destroy current and get new one
+		[PLAYER, VIDEO_TYPE] = Players.switch(VIDEO_TYPE, ptype);
+
+		//load the actual video
 		PLAYER.loadPlayer(id, time, volume, length, vidObj.meta);
 
+		//listen again
 		window.volume.listen(PLAYER, ptype);
 	} else {
-		PLAYER.playVideo(id, time, volume);
+		PLAYER.resetRetries();
+		PLAYER.playVideo(id, time, volume, length, vidObj.meta);
 	}
 }
 function videoPause() {
-	if (PLAYER.pause) {
-		PLAYER.pause();
-	}
+	PLAYER.pause();
 }
 /* Utilities */
 function parseVideoURL(url, callback) {
@@ -2742,32 +2720,3 @@ function secondsToHuman(seconds) {
 
 	return `${seconds} second${seconds != 1 ? "s" : ""}`;
 }
-
-function getUserQualityPreference() {
-	if (selectedQuality === null) {
-		selectedQuality = getStorageInteger(QUALITY_LOCAL_STORAGE_KEY, 1080);
-	}
-
-	return selectedQuality;
-}
-
-function setUserQualityPreference(value) {
-	if (typeof (value) !== "number") {
-		return;
-	}
-
-	selectedQuality = value;
-	setStorageInteger(QUALITY_LOCAL_STORAGE_KEY, value);
-}
-
-function pickSourceAtQuality(sources, quality) {
-	// make this smarter sometime? dunno
-
-	for (const source of sources) {
-		if (source.quality === quality) {
-			return source;
-		}
-	}
-
-	return sources.length > 0 ? sources[0] : null;
-}

web/js/init.js

@@ -153,14 +153,9 @@ var IGNORELIST = [];
 var CONNECTED = 0;
 var PLAYLIST = new LinkedList.Circular();
 var ACTIVE = new Video();
-var PLAYING_VID;
-var HB_DELAY = 5000;
-var leaderHeartbeat = false;
 var PLAYLIST_DRAGFROM = 0;
 var PLAYLIST_DRAGTO = 0;
 var PLAYLIST_DRAGSANITY = '';
-var LEGACY_PLAYER = false;
-var INIT_TIME = 0;
 var SEEK_FROM = 0;
 var SEEK_TO = 0;
 var HISTORY = [];
@@ -186,7 +181,11 @@ var BANLIST = false;
 var PLUGINS = [];
 var NAMEFLAUNT = false;
 var VOLUME = false;
+
+//the only thing this does is prevent maltweaks from breaking \\fsnotmad
+//Note: Deprecated and legacy, use Players instead 
 var PLAYERS = {};
+
 var IGNORE_GHOST_MESSAGES = false;
 var ADMIN_LOG = [];
 var HIGHLIGHT_LIST = [];

web/js/modules/main.js

@@ -1,6 +1,7 @@
 import { RankedPoll } from "./ranked-poll.js";
 import { loadWorker } from "./lib.js";
 import { VolumeManager } from "./volume.js";
+import { Players } from "./player.js";
 
 // header countdown
 loadWorker(window.WORKER_URLS.countdown).addEventListener("message", ({ data }) => {
@@ -52,6 +53,7 @@ window.rankedPolls = {
 		activePoll = null;
 	},
 };
+window.Players = new Players();
 
 window.isModuleLoaded = true;