diff --git a/web/css/layout-other.css b/web/css/layout-other.css
index f8b0caa4..8984b3c6 100644
--- a/web/css/layout-other.css
+++ b/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;
+}
diff --git a/web/headers.php b/web/headers.php
index 4b35541d..994264d4 100644
--- a/web/headers.php
+++ b/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(); ?>
 
diff --git a/web/js/callbacks.js b/web/js/callbacks.js
index 3808f1ec..3dc8ebc0 100644
--- a/web/js/callbacks.js
+++ b/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();
diff --git a/web/js/functions.js b/web/js/functions.js
index bff8fac6..ed194d54 100644
--- a/web/js/functions.js
+++ b/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;
-}
diff --git a/web/js/init.js b/web/js/init.js
index 0702a092..98eb421e 100644
--- a/web/js/init.js
+++ b/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 = [];
diff --git a/web/js/modules/main.js b/web/js/modules/main.js
index 3594125e..4b370ce7 100644
--- a/web/js/modules/main.js
+++ b/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;
 
diff --git a/web/js/modules/player.js b/web/js/modules/player.js
new file mode 100644
index 00000000..1f1cb678
--- /dev/null
+++ b/web/js/modules/player.js
@@ -0,0 +1,64 @@
+import { Dailymotion } from "./players/dailymotion.js";
+import { Raw } from "./players/raw.js";
+import { Soundcloud } from "./players/soundcloud.js";
+import { Twitch } from "./players/twitch.js";
+import { Twitchclip } from "./players/twitchclip.js";
+import { Vimeo } from "./players/vimeo.js";
+import { Youtube } from "./players/youtube.js";
+
+export class Players {
+	constructor() {
+		this.Youtube = new Youtube();
+		this.Vimeo = new Vimeo();
+		this.Dailymotion = new Dailymotion();
+		this.Soundcloud = new Soundcloud();
+		this.Twitch = new Twitch();
+		this.Twitchclip = new Twitchclip();
+		this.Raw = new Raw();
+
+		this.mappings = new Map([
+			['yt', this.Youtube],
+			['vimeo', this.Vimeo],
+			['dm', this.Dailymotion],
+			['twitch', this.Twitch],
+			['twitchclip', this.Twitchclip],
+
+			['soundcloud', this.Soundcloud],
+			['osmf', this.Raw],
+			['manifest', this.Raw],
+			['file', this.Raw],
+			['dash', this.Raw],
+			['hls', this.Raw],
+		]);
+	}
+
+	hasPlayer(videotype) {
+		return this.mappings.has(videotype);
+	}
+
+	playerFromVideoType(video) {
+		return this.mappings.get(video);
+	}
+
+	switch(from, to) {
+		const [now, next] = [from, to].map(kind => this.playerFromVideoType(kind));
+
+		if (now) {
+			now.destroy();
+			now.resetRetries();
+		}
+
+		return [next, to];
+	}
+
+	register(name, player) {
+		this.mappings.set(
+			name,
+			player
+		);
+	}
+
+	unregister(name) {
+		this.mappings.delete(name);
+	}
+}
\ No newline at end of file
diff --git a/web/js/modules/players/base.js b/web/js/modules/players/base.js
new file mode 100644
index 00000000..b740e089
--- /dev/null
+++ b/web/js/modules/players/base.js
@@ -0,0 +1,153 @@
+import { Errors } from "./errors.js";
+
+export const Event = {
+	Error: -1,
+	Initialise: 0,
+	Load: 1,
+	Play: 2,
+	End: 3,
+	Pause: 4,
+	Seek: 5,
+	Volume: 6,
+	Ready: 7,
+	API: 8,
+	Quality: 9,
+	Buffer: 10,
+};
+
+export const Status = {
+	UNREADY: 0,
+	READY: 1,
+	ERROR: 2,
+};
+
+//these are based on YT players states, assuming server uses similar
+export const State = {
+	ENDED: 0,
+	PLAYING: 1,
+	PAUSED: 2,
+	BUFFER: 3,
+};
+
+//Maybe make this into a setting?
+const MAX_REFRESH_RETRIES = 10;
+
+export class Base {
+	constructor() {
+		this.height = window.videoHeight; //player height
+		this.width = window.videoWidth; //player width
+	
+		this.retries = 0; //number of attempts when error occurred
+		this.video = {}; //keep the video information
+
+		//player status and state
+		this.status = Status.UNREADY;
+	}
+
+	//this done due to legacy player removal (+ maltweaks)
+	//the #ytapiplayer was deleted and then recreated, therefore
+	//needing a dynamic grabbing of the frame
+	frame() {
+		return document.querySelector('#ytapiplayer');
+	}
+
+	error(error) {
+		if (window.DEBUG) {
+			console.error(
+				`Player ${window.VIDEO_TYPE} errored:`,
+				error
+			);
+		}
+
+		//something is more broke, stop trying and fix
+		if (this.retries >= MAX_REFRESH_RETRIES || error === Errors.PLAYER_UNPLAYABLE_VIDEO) {
+			return;
+		} else {
+			if (window.DEBUG) {
+				console.warn(
+					'Error is probably recoverable, attempting to refresh player'
+				);
+			}
+
+			this.destroy();
+			this.loadPlayer(
+				this.video.id,
+				this.video.timestamp,
+				window.volume.get(window.VIDEO_TYPE),
+				this.video.length,
+				this.video.meta,	
+			);
+		}
+
+		this.retries += 1;
+	}
+
+	event(event, data) {
+		switch (event) {
+			case Event.End: window.videoEnded(); break; 
+			case Event.Pause: window.videoPaused(); break;
+			case Event.Seek: window.videoSeeked(data.time); break;
+			case Event.Play: window.videoPlaying(); break;
+			case Event.Volume: window.volume.set(data.volume); break;
+			
+			//incase the player has error event mixed
+			case Event.Error: this.error(data.error, data.player); break;
+			
+			//there are more events that are not handled atm, but could be in the future
+			//only bugger in debug mode
+			default: {
+				if (window.DEBUG) {
+					console.info(`Player ${window.VIDEO_TYPE} gave an unhandled event ${event}`);
+				}
+			}
+		}
+	}
+
+	resetRetries() {
+		this.retries = 0;
+	}
+
+	setReady() {}
+
+	ready(_cb) {}
+
+	loadPlayer(_id, _timestamp, _volume, _length, _meta) {}
+
+	playVideo(_id, _timestamp) {}
+
+	//we have autoplay enabled everywhere 
+	//yet we actively don't let it autoplay, smh
+	delay(timestamp) {
+		if (timestamp < 0) {
+			setTimeout(() => this.play(), timestamp * -1000);
+		} else {
+			//this -> the player, not base class
+			this.play();
+			this.seek(timestamp);
+		}
+	}
+
+	pause() {}
+
+	play() {}
+
+	seek(_to) {}
+
+	getTime(cb) {
+		cb(-1);
+	}
+
+	getVolume(cb) {
+		cb(-1);
+	}
+
+	getVideoState() {
+		return State.PLAYING;
+	}
+
+	isReady() {
+		return this.status === Status.READY;
+	}
+
+	destroy() {}
+}
\ No newline at end of file
diff --git a/web/js/modules/players/dailymotion.js b/web/js/modules/players/dailymotion.js
new file mode 100644
index 00000000..3cd8331e
--- /dev/null
+++ b/web/js/modules/players/dailymotion.js
@@ -0,0 +1,141 @@
+import { Base, Event, State, Status } from "./base.js";
+import { Errors } from "./errors.js";
+
+export class Dailymotion extends Base {
+	constructor() {
+		super();
+		
+		this.player = null;
+		this.events = new Map([
+			['seeked', Event.Seek],
+			['pause', Event.Pause],
+			['play', Event.Play],
+			['video_start', Event.Play],
+			['video_end', Event.End],
+
+			['volumechange', Event.Volume],
+			['playback_ready', Event.Ready],
+			['error', Event.Error],
+		]);
+
+		this.options = {
+			'queue-autoplay-next': false,
+			'queue-enable': false,
+			'sharing-enable': false,
+			'ui-highlight': 'c600ad',
+			'ui-logo': false,
+			'ui-start-screen-info': false
+		};
+
+		this.errors = new Map([
+			['DM001', Errors.PLAYER_INVALID_ID],
+			['DM002', Errors.PLAYER_UNPLAYABLE_VIDEO],
+			['DM004', Errors.PLAYER_UNPLAYABLE_VIDEO],
+			['DM005', Errors.PLAYER_UNPLAYABLE_VIDEO],
+			['DM007', Errors.PLAYER_UNPLAYABLE_VIDEO],
+			['DM014', Errors.PLAYER_UNPLAYABLE_VIDEO],
+			['DM016', Errors.PLAYER_UNPLAYABLE_VIDEO],
+		]);
+
+		this.state = State.PLAYING;
+	}
+
+	ready(cb) {
+		if (this.status === Status.READY) {
+			cb();
+		}
+	}
+
+	//dailymotion events have no data, so in some cases need to
+	//attach some data
+	event(event) {
+		let payload = {};
+
+		//dailymotion loves its 1 early, my eartubes dont
+		if (event === 'volumechange' && this.status !== Status.READY) {
+			return;
+		}
+
+		switch (event) {
+			case 'pause': this.state = State.PAUSED; break;
+			case 'play': this.state = State.PLAYING; break;
+			case 'video_end': this.state = State.ENDED; break;
+			case 'playback_ready': {
+				this.status = Status.READY; 
+				this.delay(this.video.timestamp);
+				break;
+			}
+			case 'video_start': this.player.setVolume(this.video.volume); break;
+			case 'seeked': payload.time = this.player.currentTime; break;
+			case 'volumechange': payload.volume = this.player.volume; break;
+			case 'error': 
+				payload = {error: this.errors.get(this.player.error), player: this }; break;
+		}
+
+		super.event(this.events.get(event), payload);
+	}
+
+	loadPlayer(id, timestamp, volume) {
+		this.video = {id, timestamp, volume};
+		this.player = window.DM.player(super.frame().id, {
+			video: id,
+			params: {
+				autoplay: timestamp >= 0,
+				start: Math.max(timestamp, 0),
+				mute: volume === 0,
+				...this.options,
+			},
+		});
+
+		this.player.addEventListener('apiready', () => {
+			//listen to the rest of the events
+			for (const event of this.events.keys()) {
+				this.player.addEventListener(event, () => this.event(event));
+			}
+		});
+	}
+
+	playVideo(id, timestamp, volume) {
+		this.video = {id, timestamp, volume};
+		this.player.load(id, {
+			autoplay: !(timestamp < 0),
+			start: Math.max(timestamp, 0)
+		});
+
+		this.delay(timestamp);
+	}
+
+	play() {
+		this.ready(() => this.player.play());
+	}
+
+	load(id) {
+		this.ready(() => this.player.load(id));
+	}
+
+	pause() {
+		this.ready(() => this.player.pause());
+	}
+
+	seek(to) {
+		this.video.timestamp = to;
+		this.ready(() => this.player.seek(to));
+	}
+
+	getTime(cb) {
+		this.ready(() => cb(this.player.currentTime));
+	}
+
+	getVolume(cb) {
+		this.ready(() => cb(this.player.muted ? 0 : this.player.volume));
+	}
+
+	getVideoState() {
+		return this.state;
+	}
+
+	destroy() {
+		this.status = Status.UNREADY;
+		this.player.destroy(super.frame().id);
+	}
+}
diff --git a/web/js/modules/players/errors.js b/web/js/modules/players/errors.js
new file mode 100644
index 00000000..9743a1c9
--- /dev/null
+++ b/web/js/modules/players/errors.js
@@ -0,0 +1,6 @@
+export const Errors = {
+	PLAYER_UNKNOWN_ERROR: {code: 0, str: "PLAYER_UNKNOWN_ERROR"},
+	PLAYER_INVALID_ID: {code: 1, str: "PLAYER_INVALID_ID"},
+	PLAYER_UNPLAYABLE_VIDEO: {code: 2, str: "PLAYER_UNPLAYABLE_VIDEO"},
+	PLAYER_GEOBLOCKED_VIDEO: {code: 3, str: "PLAYER_GEOBLOCKED_VIDEO"},
+};
diff --git a/web/js/modules/players/raw.js b/web/js/modules/players/raw.js
new file mode 100644
index 00000000..e348e196
--- /dev/null
+++ b/web/js/modules/players/raw.js
@@ -0,0 +1,224 @@
+import { Event, Base, State } from "./base.js";
+import { Errors } from "./errors.js";
+
+const QUALITY_LOCAL_STORAGE_KEY = "quality";
+let selectedQuality = null;
+
+const fileExtensionRegex = /\.([\w]+)$/;
+const fileMimeTypes = new Map([
+	['mp4', 'video/mp4'],
+	['m4v', 'video/mp4'],
+	['webm', 'video/webm'],
+	['m3u8', 'application/x-mpegURL'],
+	['mpd', 'application/dash+xml'],
+	['rtmp', 'rtmp/mp4']
+]);
+
+function getFileExtension(path) {
+	const match = path.match(fileExtensionRegex);
+
+	if (!match) {
+		return null;
+	}
+
+	return match[1];
+}
+
+function getUserQualityPreference() {
+	if (selectedQuality === null) {
+		selectedQuality = window.getStorageInteger(QUALITY_LOCAL_STORAGE_KEY, 1080);
+	}
+
+	return selectedQuality;
+}
+
+function setUserQualityPreference(value) {
+	if (typeof (value) !== "number") {
+		return;
+	}
+
+	selectedQuality = value;
+	window.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;
+}
+
+function sourcesFromManifest(manifest) {
+	const target = pickSourceAtQuality(manifest.sources, getUserQualityPreference());
+	const sources = manifest.sources.map((source) => {
+		const $source = {
+			src: source.url,
+			type: source.contentType,
+			label: source.quality
+		};
+
+		if (target == source) {
+			$source.selected = true;
+		}
+
+		return $source;
+	});
+
+	return sources;
+}
+
+export class Raw extends Base {
+	constructor() {
+		super();
+		
+		this.player = null;
+		this.events = new Map([
+			['volumechange', Event.Volume],
+			['ended', Event.End],
+			['pause', Event.Pause],
+			['seeked', Event.Seek],
+			['play', Event.Play],
+			['qualitySelected', Event.Quality],
+			['error', Event.Error]
+		]);
+
+		this.errors = new Map([
+			[MediaError.MEDIA_ERR_NETWORK, Errors.PLAYER_UNKNOWN_ERROR],
+			[MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED, Errors.PLAYER_UNPLAYABLE_VIDEO],
+			[MediaError.MEDIA_ERR_DECODE, Errors.PLAYER_UNKNOWN_ERROR],
+		]);
+
+		this.sources = [];
+		this.state = State.PLAYING;
+		this.config = {
+			autoplay: false,
+			controls: true,
+		};
+	}
+
+	ready(cb) {
+		this.player.ready(cb);
+	}
+
+	event(event, data) {
+		switch (event) {
+			case Event.Volume: data.volume = this.player.volume(); break;
+			case Event.Pause: this.state = State.PAUSED; break;
+			case Event.Play: this.state = State.PLAYING; break;
+			case Event.Seek: data.time = this.player.currentTime(); break;
+			case Event.End: this.state = State.ENDED; break;
+			//label can be undefined so keep the quality preference
+			case Event.Quality: setUserQualityPreference(data.label || getUserQualityPreference()); break;
+		}
+
+		super.event(
+			event,
+			data
+		);
+	}
+
+	getSources(file, manifest) {
+		let extension = manifest ? null : getFileExtension(file);   
+		
+		//TODO: Implement better handling for RTMP and 
+		//other extensionless links (currently only rtmp)
+		//maybe have the info in meta?
+		if (!extension && !manifest) {
+			extension = file.startsWith('rtmp') ? 'rtmp' : null;
+		}
+
+		if (manifest) {
+			return sourcesFromManifest(manifest);
+		} else {
+			return [{src: file, type: fileMimeTypes.get(extension) || 'video/mp4'}];
+		}
+	}
+
+	loadPlayer(id, timestamp, volume, length, meta) {
+		if (meta.manifest && meta.manifest.sources.length === 0) {
+			console.error('Manifest has no items');
+			return;
+		}
+
+		this.video = {id, meta, timestamp, sync: length > 0};
+		this.frame = window.$("<video>", {
+			id: "vjs_player",
+			class: "video-js vjs-default-skin"
+		});
+	
+		//clear frame and add player
+		window.$(super.frame()).empty().append(
+			this.frame
+		);
+
+		this.player = window.videojs(this.frame[0].id, this.config);
+		this.sources = this.getSources(id, meta.manifest);
+	
+		//if we have multiple sources/qualities, add the quality selector 
+		if (this.sources.length > 1) {
+			this.player.controlBar.addChild('QualitySelector');
+		}
+	
+		this.ready(() => {
+			this.player.volume(volume);
+	
+			for (const [key, event] of this.events) {
+				this.player.on(key, (_, data) => this.event(event, {...data}));
+			}
+	
+			//add the sources
+			this.player.src(this.sources);
+			this.delay(timestamp);
+		});
+	}
+
+	playVideo(id, timestamp, _, length, meta) {
+		this.player.controlBar.removeChild('QualitySelector');
+
+		this.video = {id, timestamp, meta, sync: length > 0};
+		this.sources = this.getSources(id, meta.manifest);
+
+		if (this.sources.length > 1) {
+			this.player.controlBar.addChild('QualitySelector');
+		}
+
+		this.ready(() => {
+			this.player.src(this.sources);
+			this.delay(timestamp);
+		});
+	}
+
+	pause() {
+		this.ready(() => this.player.pause());
+	}
+
+	play() {
+		this.ready(() => this.player.play());
+	}
+
+	seek(to) {
+		this.video.timestamp = to;
+		this.ready(() => this.player.currentTime(to));
+	}
+
+	getTime(cb) {
+		this.ready(() => cb(this.video.sync ? this.player.currentTime() : -1));
+	}
+
+	getVolume(cb) {
+		this.ready(() => cb(this.player.muted() ? 0 : this.player.volume()));
+	}
+
+	getVideoState() {
+		return this.state;
+	}
+
+	destroy() {
+		this.player.dispose();
+	}
+}
\ No newline at end of file
diff --git a/web/js/modules/players/soundcloud.js b/web/js/modules/players/soundcloud.js
new file mode 100644
index 00000000..d3d38cb8
--- /dev/null
+++ b/web/js/modules/players/soundcloud.js
@@ -0,0 +1,143 @@
+import { Event, Base, State, Status } from "./base.js";
+
+/*
+Players.Soundcloud.loadPlayer('SC208485541', 0, volume.get('soundcloud'))
+*/
+
+export class Soundcloud extends Base {
+	constructor() {
+		super();
+
+		this.player = null;
+		this.events = null;
+
+		this.parameters = [
+			'liking=false',
+			'sharing=false',
+			'show_comments=false',
+			'show_playcount=false',
+			'color=C600AD',
+			'single_active=false'
+		];
+		
+		this.source = 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/';
+		this.slider = null;
+		this.events = new Map([
+			[window.SC.Widget.Events.PLAY, Event.Play],
+			[window.SC.Widget.Events.PAUSE, Event.Pause],
+			[window.SC.Widget.Events.FINISH, Event.End],
+			[window.SC.Widget.Events.SEEK, Event.Seek],
+			[window.SC.Widget.Events.ERROR, Event.Error]
+		]);
+
+		this.iframe = null;
+	}
+
+	ui(parent, volume) {
+		parent.empty().append(
+			window.$('<div>', {id: 'scBackground'}),
+			window.$('<iframe>', {id: 'scPlayer'}).attr('allow', 'autoplay; encrypted-media'),
+			window.$('<div>', {id: 'scVolumeSliderWrap'}).append(
+				window.$('<div>', {id: 'scVolumeSlider'})
+			),
+		);
+		
+		//grab slider since it's the source of volume
+		this.slider = parent.find('#scVolumeSlider');
+		this.slider.slider({
+			orientation:'vertical',
+			range:'min',
+			value: volume,
+			min: 0,
+			max: 100,
+			stop: (_, ui) => {
+				this.player.setVolume(ui.value);
+				this.event(Event.Volume, {volume: ui.value});
+			}
+		});
+
+		return parent.find('#scPlayer');
+	}
+
+	ready(cb) {
+		if (this.status === Status.READY) {
+			return cb();
+		}
+	}
+
+	event(event, data) {
+		switch (event) {
+			case Event.Seek: data.time = data.currentPosition / 1000; break;
+		}
+
+		super.event(event, data);
+	}
+
+	loadPlayer(id, timestamp, volume) {
+		this.video = {id, timestamp};
+
+		this.iframe = this.ui(window.$(super.frame()), volume);
+		this.iframe.attr(
+			'src',
+			`${this.source}${id.substr(2)}?${encodeURIComponent(this.parameters.join('&'))}`
+		);
+		this.player = window.SC.Widget(this.iframe[0]);
+
+		//keep Events.READY separate
+		this.player.bind(window.SC.Widget.Events.READY, () => {
+			this.status = Status.READY;
+			
+			this.player.setVolume(volume);
+			this.delay(timestamp);
+		});
+
+		//bind the rest of the events
+		for (const [key, event] of this.events) {
+			this.player.bind(key, (data) => this.event(event, data));
+		}
+	}
+
+	playVideo(id) {
+		this.player.load(
+			`https://api.soundcloud.com/tracks/${id.substr(2)}`
+		);
+		this.player.play();
+	}
+
+	pause() {
+		this.ready(() => this.player.pause());
+	}
+
+	play() {
+		this.ready(() => this.player.play());
+	}
+
+	seek(to) {
+		this.video.timestamp = to;
+		this.ready(() => {
+			this.player.seekTo(to * 1000);
+		});
+	}
+
+	getTime(cb) {
+		this.ready(() => this.player.getPosition(time => cb(time / 1000.0)));
+	}
+
+	getVolume(cb) {
+		this.ready(() => this.player.getVolume(cb));
+	}
+
+	getVideoState() {
+		return State.PLAYING;
+	}
+
+	destroy() {
+		this.status = Status.UNREADY;
+
+		for (const key of this.events.keys()) {
+			this.player.unbind(key);
+		}
+
+		window.$(super.frame()).empty();
+	}
+}
diff --git a/web/js/modules/players/twitch.js b/web/js/modules/players/twitch.js
new file mode 100644
index 00000000..275a5018
--- /dev/null
+++ b/web/js/modules/players/twitch.js
@@ -0,0 +1,112 @@
+import { Event, Base, State, Status } from "./base.js";
+
+function parseTwitchSource(src) {
+	const parts = src.split('/');
+
+	if (parts[0] === 'videos') {
+		return ['video', parts[1]];
+	} else {
+		return ['channel', parts[0]];
+	}
+}
+
+export class Twitch extends Base {
+	constructor() {
+		super();
+
+		this.player = null;
+		this.events = new Map([
+			[window.Twitch.Player.SEEK, Event.Seek],
+			[window.Twitch.Player.PLAYING, Event.Play],
+			[window.Twitch.Player.READY, Event.Ready],
+		]);
+	}
+
+	ready(cb) {
+		if (this.status === Status.READY) {
+			return cb();
+		}
+	}
+
+	event(event, data) {
+		switch (event) {
+			case Event.Ready: {
+				this.status = Status.READY; 
+				this.player.setVolume(this.video.volume);
+				this.delay(this.video.timestamp);
+				break;
+			}
+			case Event.Seek: {
+				this.video.timestamp = data.position;
+				data = {time: data.position}; 
+				break;
+			}
+		}
+
+		super.event(event, data);
+	}
+
+	loadPlayer(id, timestamp, volume, length) {
+		this.video = {id, timestamp, volume, length, sync: length > 0};
+
+		const parts = parseTwitchSource(id);
+		const options = {
+			[parts[0]]: parts[1],
+			muted: volume === 0,
+			width: this.width,
+			height: this.height,
+			autoplay: timestamp >= 0,
+		};
+
+		window.$(this.frame()).empty();
+
+		this.player = new window.Twitch.Player(this.frame().id, options);
+		this.events.forEach((value, key) => {
+			this.player.addEventListener(key, (data) => this.event(value, data));
+		});
+	}
+
+	playVideo(id, timestamp, volume, length) {
+		this.video = {id, timestamp, volume, length, sync: length > 0};
+		this.ready(() => {
+			const parts = id.split('/');
+			if (parts[0] === 'videos') {
+				this.player.setVideo(parts[1], timestamp);
+			} else {
+				this.player.setChannel(parts[0]);
+			}
+		});
+	}
+
+	pause() {
+		this.ready(() => this.player.pause());
+	}
+
+	play() {
+		this.ready(() => this.player.play());
+	}
+
+	seek(to) {
+		this.video.timestamp = to;
+		this.ready(() => this.player.seek(to));
+	}
+
+	getTime(cb) {
+		this.ready(() => {
+			cb(this.player.getDuration() === Infinity ? -1 : this.player.getCurrentTime());
+		});
+	}
+
+	getVolume(cb) {
+		this.ready(() => cb(this.player.getVolume()));
+	}
+
+	getVideoState() {
+		return State.PLAYING;
+	}
+
+	destroy() {
+		this.status = Status.UNREADY;
+		window.$(this.frame()).empty();
+	}
+}
\ No newline at end of file
diff --git a/web/js/modules/players/twitchclip.js b/web/js/modules/players/twitchclip.js
new file mode 100644
index 00000000..42a9eab1
--- /dev/null
+++ b/web/js/modules/players/twitchclip.js
@@ -0,0 +1,39 @@
+import { Base, State } from "./base.js";
+
+export class Twitchclip extends Base {
+	constructor() {
+		super();
+	}
+
+	loadPlayer(src, _, volume) {
+		this.video = {id: src};
+
+		const parameters = [
+			`clip=${src}`,
+			`parent=${document.location.hostname}`,
+			`autoplay=true`,
+			`muted=${volume === 0}`
+		];
+
+		window.$(super.frame()).empty().append(
+			window.$('<iframe>', {
+				id: 'twitchclipplayer',
+				src: `https://clips.twitch.tv/embed?${parameters.join('&')}`,
+				width: this.width,
+				height: this.height,
+				frameborder: '0',
+				scrolling: 'no',
+				preload: 'auto',
+				allowfullscreen: 'true',
+			})
+		);
+	}
+
+	getVideoState() {
+		return State.PLAYING;
+	}
+
+	destroy() {
+		document.getElementById('twitchclipplayer').remove();
+	}
+}
\ No newline at end of file
diff --git a/web/js/modules/players/vimeo.js b/web/js/modules/players/vimeo.js
new file mode 100644
index 00000000..d4580ccb
--- /dev/null
+++ b/web/js/modules/players/vimeo.js
@@ -0,0 +1,160 @@
+import { Base, Event, State, Status } from "./base.js";
+import { Errors } from "./errors.js";
+
+export class Vimeo extends Base {
+	constructor() {
+		super();
+		this.player = null;
+		this.options = {
+			autopause: false,
+			color: 'C600AD',
+			keyboard: false,
+		};
+ 
+		this.events = new Map([
+			['ended', Event.End],
+			['play', Event.Play],
+			['volumechange', Event.Volume],
+			['pause', Event.Pause],
+			['seeked', Event.Seek],
+			['loaded', Event.Load],
+			['bufferstart', Event.Buffer]
+		]);
+
+		this.errors = new Map([
+			//video cannot be played
+			['PasswordError', Errors.PLAYER_UNPLAYABLE_VIDEO],
+			['PrivacyError', Errors.PLAYER_UNPLAYABLE_VIDEO],
+			
+			//some generic error, can be attempted to play
+			['Error', Errors.PLAYER_UNKNOWN_ERROR],
+			
+			//TODO: Add more relevant error
+			['UnsupportedError', Errors.PLAYER_UNKNOWN_ERROR],
+			['RangeError', Errors.PLAYER_UNKNOWN_ERROR],
+		]);
+
+		this.state = State.PLAYING;
+		this.err = null;
+	}
+
+	error(err) {
+		this.err = this.errors.get(err.name) || Errors.PLAYER_UNKNOWN_ERROR;
+
+		super.error(
+			this.err,
+			this
+		);
+	}
+
+	ready(cb) {
+		if (this.err || this.status !== Status.READY) {
+			return;
+		}
+
+		this.player.ready().then(cb).catch(err => this.error(err));
+	}
+
+	event(event, data) {
+		switch (event) {
+			case Event.End: this.state = State.ENDED; break;
+			case Event.Play: this.state = State.PLAYING; break;
+			case Event.Pause: this.state = State.PAUSED; break;
+			case Event.Buffer: this.state = State.BUFFER; break;
+		}
+
+		//map the things
+		super.event(
+			event,
+			{
+				time: data.seconds,
+				volume: data.volume,
+				player: this,
+			}
+		);
+	}
+
+	loadPlayer(id, timestamp, volume) {
+		this.video = {id, timestamp};
+		this.err = null;
+
+		const frame = super.frame();
+
+		//vimeo keeps the "Loading...", so clear it
+		//parent and actual frame also needs 100% on width and height
+		window.$(frame).empty().append(
+			window.$('<iframe>', {
+				src: `https://player.vimeo.com/video/${id}`,
+				class: 'player_vimeo',
+				frameborder: '0',
+				allow: `autoplay; encrypted-media; fullscreen`,
+			})
+		);
+
+		this.player = new window.Vimeo.Player(frame.children[0], {
+			id,
+			muted: volume === 0,
+			autoplay: timestamp >= 0,
+			...this.options,
+		});
+
+		//for some reason this doesn't work when creating the player \\bpshrug 
+		this.player.setColor(this.options.color);
+		
+		//attach events
+		this.events.forEach((value, key) => {
+			this.player.on(key, (data) => this.event(value, data));
+		});
+		//wait for ready
+		this.player.ready().then(() => {
+			this.status = Status.READY;
+			this.player.setVolume(volume);
+			this.delay(timestamp);
+		}).catch(err => this.error(err));
+	}
+
+	playVideo(id, timestamp) {
+		this.video = {id, timestamp};
+		this.player.loadVideo(id).then(() => {
+			this.delay(timestamp);
+		});
+	}
+
+	pause() {
+		this.ready(() => this.player.pauseVideo());
+	}
+
+	play() {
+		this.ready(() => this.player.play());
+	}
+
+	seek(to) {
+		this.video.timestamp = to;
+		this.ready(() => this.player.setCurrentTime(to));
+	}
+
+	getTime(cb) {
+		this.ready(() => this.player.getCurrentTime().then(cb));
+	}
+
+	getVolume(cb) {
+		this.ready(() => this.player.getVolume().then(cb));
+	}
+
+	getVideoState() {
+		return this.state;
+	}
+
+	destroy() {
+		this.status = Status.UNREADY;
+
+		for (const key of this.events.keys()) {
+			this.player.off(key);
+		}
+
+		this.err = null;
+		this.player.unload().then(() => {
+			this.player.destroy();
+		});
+	}
+}
\ No newline at end of file
diff --git a/web/js/modules/players/youtube.js b/web/js/modules/players/youtube.js
new file mode 100644
index 00000000..1b7dfe47
--- /dev/null
+++ b/web/js/modules/players/youtube.js
@@ -0,0 +1,158 @@
+import { Base, Event, Status } from "./base.js";
+import { Errors } from "./errors.js";
+
+export class Youtube extends Base {
+	constructor() {
+		super();
+
+		this.player = null;
+		this.options = {
+			playerVars: {
+				disablekb: 1,
+				enablejsapi: 1,
+				iv_load_policy: 3,
+				modestbranding: 1,
+				playsinline: 1,
+				rel: 0,
+				autoplay: 0,
+			},
+			events: {
+				'onError': this.error.bind(this),
+				'onReady': this.setReady.bind(this),
+				'onStateChange': this.event.bind(this),
+			}
+		};
+
+		if (window.getStorage("legacyPlayer") == 0) {
+			this.options.playerVars.wmode = "transparent";
+		}
+		
+		//not using namespaced variables here to avoid waiting in constructor
+		this.states = new Map([
+			[-1, Event.Initialise],
+			[0, Event.End],
+			[1, Event.Play],
+			[2, Event.Pause],
+			[3, Event.Buffer],
+			[5, Event.Load],
+		]);
+
+		this.errors = new Map([
+			//why are you yeeting an invalid id at me?
+			[2, Errors.PLAYER_INVALID_ID],
+
+			//something happened, probably a cosmic ray
+			[5, Errors.PLAYER_UNKNOWN_ERROR],
+
+			//private video
+			[100, Errors.PLAYER_UNPLAYABLE_VIDEO],
+			
+			//syndicated video, aka watch at youtube.com only
+			[101, Errors.PLAYER_UNPLAYABLE_VIDEO],
+			[150, Errors.PLAYER_UNPLAYABLE_VIDEO],
+		]);
+	}
+
+	setReady() {
+		//when the player is ready state has to be > -1
+		//-1 when ready means the content is not playable/error occurred
+		this.status = this.player.getPlayerState() > -1 ? Status.READY : Status.ERROR;
+
+		//no idea what error state to give, assume unplayable video
+		if (this.status === Status.ERROR) {
+			return this.error({data: 101});
+		}
+
+		//set volume
+		this.player.setVolume(this.video.volume);
+
+		//finally seek to the correct spot
+		this.delay(this.video.timestamp);
+	}
+
+	//error is not always triggered
+	error(event) {
+		this.status = Status.ERROR;
+
+		super.error(
+			this.errors.get(event.data),
+			this
+		);
+	}
+
+	ready(cb) {
+		if (this.status === Status.READY) {
+			cb();
+		}
+	}
+
+	event(event) {
+		super.event(this.states.get(event.data));
+	}
+
+	loadPlayer(id, timestamp, volume, length) {
+		this.video = {id, timestamp, volume, length, sync: length > 0};
+		//clear up past crashes
+		this.status = Status.UNREADY;
+
+		window.waitForFlag('YTAPREADY', () => {
+			this.player = new window.YT.Player(this.frame().id, {
+				videoId: id,
+				width: this.width,
+				height: this.height,
+				...this.options,
+			});
+		});
+	}
+
+	playVideo(id, timestamp, volume, length) {
+		//different video, clear error status
+		if (this.status === Status.ERROR) {
+			this.status = Status.READY;
+		}
+		
+		window.waitForFlag('YTAPREADY', () => {
+			this.video = {id, timestamp, volume, length, sync: length > 0};
+			this.player.cueVideoById(id);
+			this.player.setVolume(volume);
+			this.delay(timestamp);
+		});
+	}
+
+	pause() {
+		this.ready(() => this.player.pauseVideo());
+	}
+
+	play() {
+		this.ready(() => this.player.playVideo());
+	}
+
+	seek(to) {
+		this.video.timestamp = to;
+		this.ready(() => {
+			this.player.seekTo(to, true);
+		});
+	}
+
+	getTime(cb) {
+		this.ready(() => cb(this.video.sync ? this.player.getCurrentTime() : -1));
+	}
+
+	getVolume(cb) {
+		this.ready(() => {
+			const muted = this.player.isMuted();
+			const volume = muted ? 0 : this.player.getVolume();
+
+			cb(volume);
+		});
+	}
+
+	getVideoState() {
+		return this.player.getPlayerState();
+	}
+
+	destroy() {
+		this.status = Status.UNREADY;
+		this.player.destroy();
+	}
+}
\ No newline at end of file
diff --git a/web/js/modules/volume.js b/web/js/modules/volume.js
index 76cc89ff..b83579b9 100644
--- a/web/js/modules/volume.js
+++ b/web/js/modules/volume.js
@@ -84,12 +84,12 @@ export class VolumeManager {
 	 * @param {boolean} save Save the volume to localStorage
 	 */
 	set(volume, save = true) {
-		if (typeof volume !== "number") {
+		if (typeof volume !== "number" || volume < 0) {
 			return;
 		}
 
 		//majority of the players do have max 3 decimals, except dailymotion
-		const converted = Number((volume > 1 ? volume / 100 : volume).toFixed(3));
+		const converted = Math.min(Number((volume > 1 ? volume / 100 : volume).toFixed(3)), 1);
 
 		//we have nothing to update
 		if (converted === this.volume) {
@@ -138,7 +138,7 @@ export class VolumeManager {
 		this.listener = setInterval(() => {
 			//either player hasn't finished initialization yet
 			//or we have no volume control support(?)
-			if (!player.getVolume) {
+			if (!player || !player.getVolume) {
 				return;
 			}
 
diff --git a/web/js/player.js b/web/js/player.js
deleted file mode 100644
index 670d6604..00000000
--- a/web/js/player.js
+++ /dev/null
@@ -1,755 +0,0 @@
-//test
-function removeCurrentPlayer() {
-	if ( videojs.getPlayers()['vjs_player'] )
-        videojs('vjs_player').dispose();
-    //clean up after youtube and vimeo
-    if (PLAYER && PLAYER.PLAYER && PLAYER.PLAYER.destroy) {
-      PLAYER.PLAYER.destroy("ytapiplayer");
-    }
-    var currentEmbed = $("#ytapiplayer");
-    var placeholder = $("<div/>").css({width:'100%', height:'100%', position:'relative'}).insertBefore(currentEmbed);
-    currentEmbed.remove();
-    placeholder.attr("id", "ytapiplayer");
-    setVal("VIMEOPLAYERLOADED", false);
-	setVal("DMPLAYERREADY", false);
-}
-
-window.PLAYERS.dm = {
-    playVideo: function(id, at) {
-        this.PLAYER.load(id, {
-            autoplay: !(at < 0),
-            start: Math.max(at, 0)
-        });
-        if (at < 0) {
-            setTimeout(() => {
-                this.play();
-            }, at * -1000);
-        }
-    },
-    loadPlayer: function(id, at, volume) {
-        const preloadTime = Date.now();
-
-        this.PLAYER = window.DM.player('ytapiplayer', {
-            video: id,
-            width: '100%',
-            height: '100%',
-            params: {
-                autoplay: !(at < 0),
-                start: Math.max(at, 0),
-                'queue-autoplay-next': false,
-                'queue-enable': false,
-                'sharing-enable': false,
-                'ui-highlight': 'c600ad',
-                'ui-logo': false,
-                'ui-start-screen-info': false
-            }
-        });
-
-		this.PLAYER.addEventListener('apiready', function() {
-			//attempting to set volume in apiready or playback_ready
-			//somehow is often ignored for some odd reason, 
-			//it does however work on video_start \\bpshrug
-
-			//if you manually set the volume using the slider
-			//instead of 1, it'll grab that set value
-			
-			//note: video_start fires when the player fades to black, before any sound is heard
-			this.addEventListener('video_start', function() {
-				this.setVolume(volume);
-				this.addEventListener('volumechange', function() {
-					window.volume.set(this.volume);
-				});
-			});
-			
-			this.addEventListener('playback_ready', onceFunction(function() {
-				// adjust in case loading the player took a while
-				at += (Date.now() - preloadTime) / 1000;
-	
-				if (at < 0) {
-					setTimeout(() => {
-						this.play();
-					}, at * -1000);
-				}
-			}));
-		});
-    },
-    pause: function() {
-        if (this.PLAYER) {
-            this.PLAYER.pause();
-        }
-    },
-    play: function(){
-        if (this.PLAYER) {
-            this.PLAYER.play();
-        }
-    },
-    seek: function(pos) {
-        if (this.PLAYER) {
-            this.PLAYER.seek(pos);
-        }
-    },
-    getVideoState: function () {
-        return 1;
-    },
-    getTime: function(callback) {
-        if (callback && this.PLAYER && this.PLAYER.currentTime) {
-            callback(this.PLAYER.currentTime);
-        }
-    },
-    getVolume: function(callback) {
-        if (callback && this.PLAYER && this.PLAYER.currentTime) {
-            callback(this.PLAYER.volume);
-        }
-    }
-};
-
-window.PLAYERS.yt = {
-    playVideo: function (id, at) {
-        var self = this;
-        waitForFlag("YTAPREADY", function () {
-            self.PLAYER.loadVideoById(id);
-            if (at < 0) {
-                videoPlay();
-                videoPause();
-                var wait = (at * -1000);
-                setTimeout(function () {
-                    videoPlay();
-                }, wait);
-            } else {
-                videoSeekTo(at);
-                videoPlay();
-            }
-        });
-    },
-    loadPlayer: function (id, at, volume) {
-        var self = this;
-        waitForFlag("YTAPREADY", function () {
-            var params = {
-                disablekb: 1,
-                enablejsapi: 1,
-                iv_load_policy: 3,
-                modestbranding: 1,
-                playsinline: 1,
-                rel: 0
-            };
-            if (getStorage("legacyPlayer") == 0) {
-                params.wmode = "transparent";
-            }
-            if (parseInt(getStorage("disableYoutube")) == 1) {
-                return;
-            }
-            self.PLAYER = new YT.Player('ytapiplayer', {
-                height: videoHeight,
-                width: videoWidth,
-                videoId: id,
-                playerVars: params,
-                events: {
-                    'onReady': function () {
-                        self.PLAYER.setVolume(volume);
-
-                        if (at < 0) {
-                            videoPlay();
-                            videoPause();
-                            var wait = (at * -1000);
-                            setTimeout(function () {
-                                videoPlay();
-                            }, wait);
-                        } else {
-                            videoSeekTo(at);
-                            videoPlay();
-                        }
-                    },
-                    'onStateChange': self.onPlayerStateChange
-                }
-            });
-        });
-    },
-    onPlayerStateChange: function (event) {
-        var newState = event.data;
-        //Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).
-        switch (newState) {
-            case -1:
-                //videoUnstarted();
-                break;
-            case 0:
-                videoEnded();
-                break;
-            case 1:
-                videoPlaying();
-                break;
-            case 2:
-                videoPaused();
-                break;
-            case 3:
-                //videoBuffering();
-                break;
-            case 5:
-                break;
-        }
-        dbg("Player's new state: " + newState);
-    },
-    pause: function () {
-        this.PLAYER.pauseVideo();
-    },
-    play: function () {
-        //if (this.getVideoState() != 3)
-            this.PLAYER.playVideo();
-    },
-    getVideoState: function () {
-        return this.PLAYER.getPlayerState();
-    },
-    seek: function (pos) {
-        this.PLAYER.seekTo(pos);
-    },
-    getTime: function (callback) {
-        if(callback && this.PLAYER && this.PLAYER.getCurrentTime){
-            callback(this.PLAYER.getCurrentTime());
-        }
-    },
-	getVolume: function(callback){
-        let volume = window.volume.get('yt');
-
-        //only grab volumes if youtube's api is ready, 
-        //otherwise default to current volume
-        if (this.PLAYER && this.PLAYER.getVolume) {
-            volume = this.PLAYER.getVolume();
-        }
-
-        if (this.PLAYER && this.PLAYER.isMuted) {
-    		volume = this.PLAYER.isMuted() ? 0 : volume;
-        }
-
-		if(callback)callback(volume);
-	}
-};
-
-window.PLAYERS.vimeo = {
-  status: {
-    time: 0,
-    state: 3,
-    ready: false
-  },
-  loadPlayer: function(id, at, volume) {
-    this.preloadTime = Date.now();
-    var currentEmbed = $("#ytapiplayer");
-    var frame = $("<iframe src='https://player.vimeo.com/video/"+id+"' style='width:100%;height:100%' frameborder='0' allow='autoplay; encrypted-media; fullscreen' allowfullscreen />").appendTo(currentEmbed);
-    this.PLAYER = new Vimeo.Player(frame[0],{
-      id:id,
-      autoplay:true
-    });
-    //YoU dO nOt nEeD to WaIt FoR ReAdy tO trigger to begin adding event listeners or calling other methods.LIES
-    //no really, it fails to find setvolume sometimes
-    this.PLAYER.ready().then(()=>{
-      this.PLAYER.setVolume(volume);
-      this.status.ready = true;
-      this.status.oldVolume = volume;
-      //Idk how much the state is used much anymore, but whatever, covering the bases
-      //also using these for post-seek changes, to know what our state_should_ be,
-      //since seeking autostarts
-      var eventFunctions = {
-        'ended': ()=>{
-          this.status.state = 0;
-          videoEnded();
-        },
-        'play': ()=>{
-          this.status.state = 1;
-          videoPlaying();
-        },
-        'volumechange': (o)=>{
-          window.volume.set(o.volume);
-        },
-        'pause': ()=>{
-          this.status.state = 2;
-          videoPaused();
-        },
-        'bufferstart': ()=>{
-          this.status.state = 3;
-        },
-        'seeked': (seekDetails)=>{
-          videoSeeked(seekDetails.seconds);
-        }
-      };
-      for (var p in eventFunctions) {
-        this.PLAYER.on(p, eventFunctions[p]);
-      }
-      //adjust the time for player getting ready
-      //doing this here once because maybe the player is already present when playVideo gets called
-      at += (Date.now() - this.preloadTime)/1000;
-      this.playVideo(id, at);
-    });
-  },
-  playVideo: function(id, at) {
-    this.preloadTime = Date.now();
-    //let's see if it'll just continue if given the same id..
-    //not sure if there might be a race for the player's initiallization, or the video load, we'll see I guess
-    this.status.ready = false;
-    this.PLAYER.loadVideo(id).then(()=>{
-      //this didn't seem to work earlier in the process, stayed blue
-      //complains about not enough contrast, looks fine to me.
-      this.PLAYER.setColor('C600AD').catch(()=>{});
-      this.status.ready = true;
-      //Loading takes a bit of time, adjust for this
-      //may want to use an eventlistener like bufferfinish or whatever
-      at += (Date.now() - this.preloadTime)/1000;
-      if (at < 0) {
-        videoPause();
-        var wait = (at * -1000);
-        setTimeout(()=>{
-          videoPlay();
-        }, wait);
-      } else {
-        videoSeekTo(at);
-        //current vimeo API starts playback as soon as seek happens
-        //Fine for us for now, but seems presumptuous
-      }
-    });
-
-  },
-  pause: function() {
-    this.status.state = 2;
-    if (this.status.ready) {
-      this.PLAYER.pause();
-    }
-  },
-  play: function() {
-    this.status.state = 1;
-    if (this.status.ready) {
-      this.PLAYER.play().catch((err)=>{
-        console.log("could not start playback", err);
-      });
-    }
-  },
-  seek: function(pos) {
-    if (this.status.ready) {
-      //may want to adjust this for load time too,
-      this.PLAYER.setCurrentTime(pos).then(()=>{
-      }).catch((err)=>{
-        console.log("could not seek",err);
-        //if there's a seek error, it'll try and start at the beginning, stop that
-        videoPause();
-      });
-      //restore playback state since vimeo autoplays on seek...or tries
-      this.PLAYER.getPaused().then((paused)=>{
-        if (!paused && this.status.state == 2) {
-          videoPause();
-        } else if (paused && this.status.state != 2) {
-          videoPlay();
-        }
-      });
-    }
-  },
-  getVideoState: function() {
-    return this.status.state;
-  },
-  getTime: function(callback) {
-    if (callback) {
-      if (!this.status.ready) {
-        callback(0);
-      } else {
-        this.PLAYER.getCurrentTime()
-        .then((time)=>{
-          callback(time);
-        }).catch((err)=>{
-          console.log("Vimeo getTime error",err);
-        });
-      }
-    }
-  },
-  getVolume: function(callback) {
-    if (callback) {
-      this.PLAYER.getVolume()
-      .then(callback)
-      .catch((err)=>{
-        console.log("Vimeo getVolume error",err);
-      });
-    }
-  }
-};
-
-function osmfEventHandler(playerId, event, data) {
-    if (event == "volumechange") {
-        PLAYERS.osmf.VOLUME = (data.muted ? 0 : data.volume);
-        dbg("Volume change", PLAYERS.osmf.VOLUME);
-    }
-}
-
-window.PLAYERS.osmf = {
-    loadPlayer: function (src, at, volume) {
-        var player = $("<video>", {
-            "style" : "width:100%;height:100%",
-            "id" : "vjs_player",
-            "data-setup" : '{ "autoplay": true, "controls": true, "bigPlayButton": false, "techorder": ["flash","html5"] }',
-            "class" : "video-js vjs-default-skin"
-        });
-
-        var source = $("<source>", {
-            "src" : src,
-            "type" : "rtmp/mp4"
-        });
-
-        player.append(source);
-
-        $("#ytapiplayer").append(player);
-        videojs("vjs_player").ready(function(){
-            this.volume(volume);
-            this.on('volumechange',function(){
-                window.volume.set(this.volume());
-            });
-        });
-
-    },
-    getVolume: function(callback){
-        if (callback) callback(videojs('vjs_player').volume());
-    }
-
-};
-
-window.PLAYERS.soundcloud = {
-	/*playVideo: function (id, at) {
-
-    },*/
-    loadPlayer: function (id, at, volume, length) {
-		var self = this;
-		var placeHolderDiv = $('#ytapiplayer');
-		var background = $('<div id="scBackground"/>').appendTo(placeHolderDiv);
-		var player = $('<iframe id="scPlayer"/>').appendTo(placeHolderDiv);
-        player.attr("allow", "autoplay; encrypted-media");
-		var volumeSliderWrap = $('<div id="scVolumeSliderWrap"/>').appendTo(placeHolderDiv);
-		var volumeSlider = $('<div id="scVolumeSlider"/>').slider({
-			orientation:'vertical',
-			range:'min',
-			value: volume,
-			min: 0,
-			max: 100,
-			stop:function(_, ui) {
-				self.PLAYER.setVolume(ui.value);
-				window.volume.set(ui.value);
-			}
-		}).appendTo(volumeSliderWrap);
-
-		$( "#scVolumeSlider .ui-slider-range" ).css('background', '#C600AD');
-		player.attr('src', 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + id.substr(2) +
-			encodeURIComponent('?liking=false&sharing=false&show_comments=false&show_playcount=false&color=C600AD'));
-
-		this.PLAYER = SC.Widget(player[0]);
-		this.PLAYER.bind(SC.Widget.Events.READY,()=>{
-			this.PLAYER.setVolume(volume);
-		});
-
-		if (at < 0) {
-            var wait = (at * -1000);
-            setTimeout(function () {
-                videoPlay();
-                self.PLAYER.bind(SC.Widget.Events.PLAY_PROGRESS, function(obj) {
-                    if (obj.loadedProgress > 0) {
-                        self.PLAYER.setVolume(volume);
-                        self.PLAYER.unbind(SC.Widget.Events.PLAY_PROGRESS);
-                    }
-                });
-            }, wait);
-        }
-		else {
-            videoPlay();
-            var initial = new Date();
-			this.PLAYER.bind(SC.Widget.Events.PLAY_PROGRESS, function(obj) {
-                var target = (at * 1.0) / length;
-				if (target < obj.loadedProgress) {
-		            self.getVolume(function(vol){
-                        self.PLAYER.setVolume(vol);
-                    });
-                    var now = new Date();
-					self.seek(at + ((now - initial) / 1000));
-					self.PLAYER.unbind(SC.Widget.Events.PLAY_PROGRESS);
-				}
-			});
-        }
-	},
-	pause: function () {
-        this.PLAYER.pause();
-    },
-    play: function () {
-        this.PLAYER.play();
-    },
-    seek: function (pos) {
-        var self = this;
-        this.PLAYER.seekTo(pos * 1000);
-        setTimeout(function() {
-            self.PLAYER.isPaused(function(paused) {
-                if (paused) {
-                    self.PLAYER.play();
-                }
-            });
-        }, 1000);
-    },
-    getVideoState: function () {
-        return 1;
-    },
-    getTime: function (callback) {
-		this.PLAYER.getPosition(function(time) { if(callback)callback(time / 1000.0); });
-    },
-    getVolume: function(callback){
-		if(callback)callback($('#scVolumeSlider').slider('value'));
-    }
-};
-
-const fileExtensionRegex = /(mp4|m4v|webm)([^/]*)$/;
-
-window.PLAYERS.file = {
-    loadPlayer: function (src, at, volume, length, meta) {
-        var player = $("<video>", {
-            "style" : "width:100%;height:100%",
-            "id": "vjs_player",
-            "data-setup" : '{ "autoplay": true, "controls": true }',
-            "class" : "video-js vjs-default-skin"
-        });
-
-        const fileExtensionMatch = fileExtensionRegex.exec(src);
-        let fileExtension = fileExtensionMatch
-            ? fileExtensionMatch[1]
-            : "mp4";
-
-        // m4v is just mp4 with additional Apple bullshit
-        if (fileExtension === 'm4v') {
-            fileExtension = 'mp4';
-        }
-
-		if (meta.manifest) {
-			const sourceCount = meta.manifest.sources.length;
-			if (sourceCount > 1) {
-				const targetSource = pickSourceAtQuality(meta.manifest.sources, getUserQualityPreference());
-				for (const source of meta.manifest.sources) {
-					let $source = $("<source>", {
-						src: source.url,
-						type: source.contentType,
-						label: source.quality,
-					});
-
-					if (targetSource == source) {
-						// jQuery does dumb things sometimes, we need the selected attribute to be the
-						// string literal of true
-						$source[0].setAttribute("selected", "true");
-					}
-
-					player.append($source);
-				}
-			} else if (sourceCount === 1) {
-				const { url, contentType } = meta.manifest.sources[0]
-				player.append($("<source>", {
-					"src" : url,
-					"type" : contentType
-				}));
-			} else {
-				console.error("manifest had no sources?!")
-			}
-		} else {
-			var source = $("<source>", {
-				"src" : src,
-				"type" : `video/${fileExtension}`
-			});
-
-			player.append(source);
-		}
-
-        $("#ytapiplayer").append(player);
-		const videoJsPlayer = videojs("vjs_player");
-
-		videoJsPlayer.ready(function(){
-			this.volume(volume);
-
-            this.on("volumechange",function(){
-                window.volume.set(this.volume());
-			});
-
-            this.on("seeked",function(){
-                videoSeeked(this.currentTime());
-            });
-
-			this.on("qualitySelected", (e, { label }) => {
-				setUserQualityPreference(parseInt(label));
-			});
-
-
-		});
-
-		videoJsPlayer.controlBar.addChild("QualitySelector");
-    },
-    pause: function () {
-        videojs('vjs_player').pause();
-    },
-    play: function () {
-        videojs('vjs_player').play();
-    },
-    seek: function (pos) {
-        videojs('vjs_player').currentTime(pos);
-    },
-    getVideoState: function () {
-        return 1;
-    },
-    getTime: function (callback) {
-        if(callback) callback(videojs('vjs_player').currentTime());
-    },
-    getVolume: function(callback){
-        if (callback) callback(videojs('vjs_player').volume());
-    }
-};
-
-window.PLAYERS.dash = {
-    loadPlayer: function (src, at, volume) {
-        var player = $("<video>", {
-            "style" : "width:100%;height:100%",
-            "id" : "vjs_player",
-            "data-setup" : '{ "autoplay": true, "controls": true }',
-            "class" : "video-js vjs-default-skin"
-        });
-
-        const parts = src.split('.');
-        var source = $("<source>", {
-            "src" : src,
-            "type" : 'application/dash+xml'
-        });
-
-        player.append(source);
-
-        $("#ytapiplayer").append(player);
-        videojs("vjs_player").ready(function(){
-            this.volume(volume);
-            this.on('volumechange',function(){
-                window.volume.set(this.volume());
-            });
-            this.on('seeked',function(){
-                videoSeeked(this.currentTime());
-            });
-        });
-    },
-    pause: function () {
-        videojs('vjs_player').pause();
-    },
-    play: function () {
-        videojs('vjs_player').play();
-    },
-    seek: function (pos) {
-        videojs('vjs_player').currentTime(pos);
-    },
-    getVideoState: function () {
-        return 1;
-    },
-    getTime: function (callback) {
-        if(callback) callback(videojs('vjs_player').currentTime());
-    },
-    getVolume: function(callback){
-        if (callback) callback(videojs('vjs_player').volume());
-    }
-};
-
-window.PLAYERS.hls = {
-    loadPlayer: function (src, at, volume) {
-        var player = $("<video>", {
-            "style" : "width:100%;height:100%",
-            "id" : "vjs_player",
-            "data-setup" : '{ "autoplay": true, "controls": true }',
-            "class" : "video-js vjs-default-skin"
-        });
-
-        const parts = src.split('.');
-        var source = $("<source>", {
-            "src" : src,
-            "type" : "application/x-mpegURL"
-        });
-
-        player.append(source);
-
-        $("#ytapiplayer").append(player);
-        videojs("vjs_player").ready(function(){
-            this.volume(volume);
-            this.on('volumechange',function(){
-                window.volume.set(this.volume());
-            });
-        });
-    },
-    getVolume: function(callback){
-        if (callback) callback(videojs('vjs_player').volume());
-    }
-};
-
-var twitchplayer = null;
-window.PLAYERS.twitch = {
-    loadPlayer: function (src, at, volume) {
-        const opts = {
-            width: videoWidth,
-            height: videoHeight
-        };
-
-        const parts = src.split('/');
-        if (parts[0] === 'videos') {
-            opts.video = parts[1];
-        } else {
-            opts.channel = parts[0];
-        }
-
-        twitchplayer = new Twitch.Player("ytapiplayer", opts);
-        twitchplayer.addEventListener(Twitch.Player.READY, function(){
-            if (twitchplayer) {
-                twitchplayer.setVolume(volume);
-                twitchplayer.seek(0);
-            }
-        });
-        twitchplayer.addEventListener(Twitch.Player.PLAYING, function(){
-            if (twitchplayer) {
-                videoSeeked(twitchplayer.getCurrentTime());
-            }
-        });
-    },/*
-    playVideo: function (id, at) {
-        if (twitchplayer) {
-            const parts = id.split('/');
-            if (parts[0] === 'videos') {
-                twitchplayer.setVideo(parts[1], at);
-            } else {
-                twitchplayer.setChannel(parts[0]);
-            }
-        }
-    },*/
-    pause: function () {
-        if (twitchplayer) twitchplayer.pause();
-    },
-    play: function () {
-        if (twitchplayer) twitchplayer.play();
-    },
-    seek: function (pos) {
-        if (twitchplayer) twitchplayer.seek(pos);
-    },
-    getTime: function (callback) {
-        if(callback && twitchplayer) callback(twitchplayer.getCurrentTime());
-    },
-    getVolume: function(callback){
-        if (callback && twitchplayer) callback(twitchplayer.getVolume());
-    }
-};
-
-window.PLAYERS.twitchclip = {
-    loadPlayer: function (src, at, volume) {
-		const parameters = [
-			`clip=${src}`,
-			`parent=${document.location.hostname}`,
-			
-			//autoplay and muted are querystring parameters
-			`autoplay=true`,
-			`muted=${volume === 0}`
-		];
-
-        $('<iframe>', {
-            id: 'twitchclipplayer',
-            src: `https://clips.twitch.tv/embed?${parameters.join('&')}`,
-            width: videoWidth,
-            height: videoHeight,
-            frameborder: '0',
-            scrolling: 'no',
-            preload: 'auto',
-            allowfullscreen: 'true',
-            css: {
-                width: '100%',
-                height: '100%'
-            }
-        }).appendTo('#ytapiplayer');
-    }
-};
diff --git a/web/plugins/dpm/dpm.js b/web/plugins/dpm/dpm.js
index 5c48d18c..eb9eb431 100644
--- a/web/plugins/dpm/dpm.js
+++ b/web/plugins/dpm/dpm.js
@@ -1,10 +1,15 @@
+
 $(function() {
-    var startTime = -1;
+    var startTime = new Date().getTime();
 
     function doDpm() {
         if (PLAYER.getTime) {
             PLAYER.getTime(function(time) {
-                $('.dpmCounter').text(' DPM: ' + (DRINKS / (time / 60)).toFixed(2));
+				if (time > -1) {
+					$('.dpmCounter').text(' DPM: ' + (DRINKS / (time / 60)).toFixed(2));
+				} else {
+					$('.dpmCounter').text(' DPM: ' + (DRINKS / ((new Date() - startTime) / 60000)).toFixed(2));
+				}
             });
         }
         else if (startTime > -1) {
@@ -15,13 +20,8 @@ $(function() {
         }
     }
 
-    socket.on('forceVideoChange', function(data) {
-        if (PLAYERS[data.video.videotype].getTime) {
-            startTime = -1;
-        }
-        else {
-            startTime = new Date().getTime();
-        }
+    socket.on('forceVideoChange', function() {
+        startTime = new Date().getTime();
     });
 
     $('<style type="text/css"/>').text('.dpmCounter { font-size: 40px !important; visibility: visible !important; }').appendTo($('head'));
diff --git a/web/plugins/videoBlacklist/videoBlacklist.js b/web/plugins/videoBlacklist/videoBlacklist.js
index de3a9f8a..73c8f823 100644
--- a/web/plugins/videoBlacklist/videoBlacklist.js
+++ b/web/plugins/videoBlacklist/videoBlacklist.js
@@ -179,9 +179,11 @@ new function(){
     ns.installBlackListType = function(){
         var wrap = $("<div/>").addClass("blacklistwrap");
         var progress = $("<div/>").addClass("blacklistprogress");
-        PLAYERS.blacklist = {
+        Players.register('blacklist', {
             playVideo: function (id, at) {},
             loadPlayer: function (id, at, volume) {
+                $('#ytapiplayer').empty();
+
                 ns.tcLastSeek = new Date().getTime();
                 ns.tcCurrentTime = at;
                 wrap.appendTo($("#ytapiplayer"));
@@ -203,8 +205,12 @@ new function(){
                     width: (perc * 100)+"%"
                 });
                 callback(x);
-            }
-        };
+            },
+            destroy: function() {
+				$('#ytapiplayer').empty();
+			},
+            resetRetries: function() {}
+        });
     }
 
     ns.init = function(){