diff --git a/package-lock.json b/package-lock.json
index b1db142..e45aba5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,9 @@
         "videojs-youtube": "^3.0.1",
         "web-vitals": "^2.1.4",
         "ws": "^8.13.0"
+      },
+      "devDependencies": {
+        "@types/react-beautiful-dnd": "^13.1.8"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -4103,6 +4106,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-beautiful-dnd": {
+      "version": "13.1.8",
+      "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.8.tgz",
+      "integrity": "sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.2.13",
       "license": "MIT",
diff --git a/package.json b/package.json
index b29394e..82b66f5 100644
--- a/package.json
+++ b/package.json
@@ -64,5 +64,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-beautiful-dnd": "^13.1.8"
   }
 }
diff --git a/src/components/MediaWidget/AddMediaPopup.tsx b/src/components/MediaWidget/AddMediaPopup.tsx
index 49bf4a5..6af5793 100644
--- a/src/components/MediaWidget/AddMediaPopup.tsx
+++ b/src/components/MediaWidget/AddMediaPopup.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
-import { Playlist } from "./types";
 import axios from "axios";
 import { useLoaderData } from "react-router";
 import { log } from "../../logging";
+import { Playlist } from "../../logic/playlist/Playlist";
+import { Song } from "./types";
 
-export default function AddMediaPopup() {
+export default function AddMediaPopup({ playlist }: { playlist: Playlist }) {
   const [showNewMediaPopup, setShowNewMediaPopup] = useState(false);
   const [savedPlaylists, setSavedPlaylists] = useState<Playlist[]>([]);
   const { recipientId } = useLoaderData();
@@ -40,7 +41,7 @@ export default function AddMediaPopup() {
           };
           return song;
         });
-        document.dispatchEvent(new CustomEvent("addSongs", { detail: songs }));
+        songs.forEach((song:Song) => playlist.addSong(song));
         return list.title;
       });
   }
@@ -77,11 +78,11 @@ export default function AddMediaPopup() {
         src: url,
         type: "video/youtube",
         id: id,
-        originId: id,
         owner: recipientId,
         title: "Manually added video",
+        originId: null
       };
-      document.dispatchEvent(new CustomEvent("addSongs", { detail: [song] }));
+      playlist.addSong(song);
     }
     document.getElementById("new-media-input").value = "";
     setShowNewMediaPopup(false);
diff --git a/src/components/MediaWidget/IPlayer.ts b/src/components/MediaWidget/IPlayer.ts
new file mode 100644
index 0000000..a26b0ef
--- /dev/null
+++ b/src/components/MediaWidget/IPlayer.ts
@@ -0,0 +1,12 @@
+import { Song } from "./types";
+
+export enum PlayerState{
+  PLAYING,
+  PAUSED,
+  STOPPED
+}
+
+export interface IPlayer {
+  id: string;
+	play(song: Song): void;
+}
diff --git a/src/components/MediaWidget/IPlaylist.ts b/src/components/MediaWidget/IPlaylist.ts
new file mode 100644
index 0000000..95cc008
--- /dev/null
+++ b/src/components/MediaWidget/IPlaylist.ts
@@ -0,0 +1,10 @@
+import { Playlist } from "../../logic/playlist/Playlist";
+import { PlaylistController } from "./PlaylistController";
+
+export interface IPlaylistRenderer {
+  id: string;
+	playlistController: PlaylistController;
+
+	bind(playlist: Playlist): void;
+  unbind(playlist: Playlist): void;
+}
diff --git a/src/components/MediaWidget/MediaWidget.css b/src/components/MediaWidget/MediaWidget.css
index 60e1008..23e25b1 100644
--- a/src/components/MediaWidget/MediaWidget.css
+++ b/src/components/MediaWidget/MediaWidget.css
@@ -132,11 +132,36 @@
   right: 10px;
 }
 
+.player-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /* flex-wrap: wrap; */
+}
+
+.videoImplToggler {
+  flex: 0 0 auto;
+  margin-right: 10px;
+  margin-left: 10px;
+  padding-top: 15px;
+}
+
+.videoImpl {
+  margin-left: 5px;
+  color: white;
+  vertical-align: top;
+}
+
 .song-title-container {
+  flex: 1 1 150px;
   padding-left: 10px;
   padding-top: 10px;
   color: rgb(13, 110, 253);
   min-height: 50px;
+  display: inline-block;
+  overflow-x: hidden;
+  white-space: nowrap;
+  width: 150px;
 }
 
 .add-button-container .btn.add {
@@ -154,6 +179,7 @@
   padding-top: 15px;
   padding-right: 15px;
   font-size: 14px;
+  display: inline-block;
 }
 
 .faded {
@@ -302,3 +328,15 @@ iframe {
   margin-right: auto;
   margin-bottom: 10px;
 }
+
+.videoImplToggler {
+  height: 100%;
+}
+
+.videoImplToggler button {
+  border-radius: 5px;
+  background: none;
+  color: white;
+  height: 30px;
+  border: 1x solid rgb(110, 110, 110);
+}
diff --git a/src/components/MediaWidget/MediaWidget.tsx b/src/components/MediaWidget/MediaWidget.tsx
index 7cd68d9..1849ef5 100644
--- a/src/components/MediaWidget/MediaWidget.tsx
+++ b/src/components/MediaWidget/MediaWidget.tsx
@@ -3,69 +3,65 @@ import { useRef, useEffect, useState } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { useLoaderData, useNavigate } from "react-router";
 import "./MediaWidget.css";
-import { v4 as uuidv4 } from "uuid";
-import Playlist from "./Playlist";
-import Player from "./Player";
-import { PLAYLIST_TYPE, PlaylistController } from "./PlaylistController";
-import { setupCommandListener, subscribe } from "../../socket";
+import { PlaylistController } from "./PlaylistController";
+import { setupCommandListener } from "../../socket";
 import Menu from "../Menu/Menu";
 import { PaymentPageConfig } from "./PaymentPageConfig";
-import { log } from "../../logging";
 import RequestsDisabledWarning from "./RequestsDisabledWarning";
 import MenuEventButton from "../Menu/MenuEventButton";
 import MenuButton from "../Menu/MenuButton";
+import { PLAYLIST_TYPE, Playlist } from "../../logic/playlist/Playlist";
+import { IPlaylistChangesListener } from "../../logic/playlist/PlaylistChangesListener";
+import PlaylistComponent from "./PlaylistComponent";
+import VideoJSComponent from "./VideoJSComponent";
 import { Song } from "./types";
+import { log } from "../../logging";
 
 export default function MediaWidget({}: {}) {
-  const [playlist, setPlaylist] = useState([]);
-  const [current, setCurrent] = useState(0);
-  const playlistController = useRef<PlaylistController|null>(null);
+  const { recipientId, conf, widgetId } = useLoaderData();
+
+  const [playlist, setPlaylist] = useState<Playlist>(
+    new Playlist(PLAYLIST_TYPE.REQUESTED),
+  );
+  const [playlistSize, setPlaylistSize] = useState<number>(0);
+  const [index, setIndex] = useState<number>(-1);
   const paymentPageConfig = useRef<PaymentPageConfig>();
   const navigate = useNavigate();
-  const { recipientId, conf, widgetId } = useLoaderData();
   const [activeTab, setActiveTab] = useState(PLAYLIST_TYPE.REQUESTED);
-  const [requestsEnabled, setRequestsEnabled] = useState(true);
+  const playlistController = useRef<PlaylistController>();
+  const [song, setSong] = useState<Song|null>(null);
 
   useEffect(() => {
+    const playlistListener: IPlaylistChangesListener = {
+      id: widgetId,
+      trigger(playlist: Playlist) {
+        log.debug(`updating MediaWidget because of changes in Playlist`);
+        setPlaylistSize(playlist.songs().length);
+        setIndex(playlist.index() ?? -1);
+        setActiveTab(playlist.type());
+        setSong(playlist.song());
+      },
+    };
+    setupCommandListener(widgetId, () => navigate(0));
+    paymentPageConfig.current = new PaymentPageConfig();
     playlistController.current = new PlaylistController(
       recipientId,
-      setPlaylist,
-      setCurrent,
-      (tab: PLAYLIST_TYPE) => {
-        setActiveTab(tab);
-        log.debug(`using tab ${tab}`);
-      },
+      widgetId,
+      conf,
     );
-    subscribe(widgetId, conf.topic.media, (message) => {
-      let json = JSON.parse(message.body);
-      let song = {
-        src: json.url,
-        type: "video/youtube",
-        id: uuidv4(),
-        originId: json.id,
-        owner: "Аноним",
-        title: json.title,
-      };
-      playlistController.current?.handleNewRequestedSongEvent(song);
-      message.ack();
+    playlistController.current.addPlaylistRenderer({
+      id: widgetId,
+      bind: (playlist: Playlist) => {
+        setPlaylist(playlist);
+        playlist.addListener(playlistListener);
+      },
+      unbind: (playlist: Playlist) => {
+        playlist.removeListener(widgetId);
+      },
+      playlistController: playlistController.current,
     });
-    setupCommandListener(widgetId, () => navigate(0));
-    paymentPageConfig.current = new PaymentPageConfig();
   }, [recipientId, widgetId]);
 
-  useEffect(() => {
-    const toggle: EventListenerOrEventListenerObject = (event: { detail: boolean }) => {
-      log.debug(`toggle requests: ${event.detail}`);
-      setRequestsEnabled(event.detail);
-    }
-    log.debug("create mediawidget listener for media-requests toggler");
-    document.addEventListener("toggleMediaRequests", toggle);
-    return () => {
-      log.debug("destroy mediawidget listener for media-requests toggler");
-      document.removeEventListener("toggleMediaRequests", toggle);
-    };
-  }, [widgetId]);
-
   return (
     <>
       <style
@@ -75,25 +71,14 @@ export default function MediaWidget({}: {}) {
       />
       <div className="video-container" data-vjs-player>
         <RequestsDisabledWarning />
-        <Player
-          playlist={playlist}
-          tab={activeTab}
-          current={current}
-          updateCurrentFn={(newIndex:number) =>
-            playlistController.current?.updateIndex(newIndex)
-          }
-        />
+        {song && playlistController.current && <VideoJSComponent playlistController={playlistController.current} song={song}/>}
         <div className="playlist-controls">
           <Menu>
             <MenuEventButton text="Hide/Show video" event="toggleVideo" />
             <MenuButton
-              text={
-                requestsEnabled
-                  ? "Disable music requests"
-                  : "Enable music request"
-              }
+              text="Toggle music requests"
               handler={() => {
-                paymentPageConfig.current?.toggleMediaRequests()
+                paymentPageConfig.current?.toggleMediaRequests();
                 paymentPageConfig.current?.save();
               }}
             />
@@ -106,7 +91,7 @@ export default function MediaWidget({}: {}) {
                 }`}
                 onClick={() => {
                   setActiveTab(PLAYLIST_TYPE.REQUESTED);
-                  playlistController.current?.switchToRequested();
+                  playlistController.current?.switchTo(PLAYLIST_TYPE.REQUESTED);
                 }}
               >
                 Requested
@@ -119,7 +104,7 @@ export default function MediaWidget({}: {}) {
                 }`}
                 onClick={() => {
                   setActiveTab(PLAYLIST_TYPE.PERSONAL);
-                  playlistController.current?.switchToFallback();
+                  playlistController.current?.switchTo(PLAYLIST_TYPE.PERSONAL);
                 }}
               >
                 Personal
@@ -127,21 +112,10 @@ export default function MediaWidget({}: {}) {
             </li>
           </ul>
           <div className="video-counter">
-            {`${playlist[current] ? current + 1 : 0} / ${
-              playlist[current] ? playlist.length : 0
-            }`}
+            {`${index + 1} / ${playlistSize}`}
           </div>
         </div>
-        <Playlist
-          playlist={playlist}
-          current={current}
-          updatePlaylistFn={(newPlaylist: Song[]) =>
-            playlistController.current?.updatePlaylist(newPlaylist)
-          }
-          playFn={(newIndex: number) =>
-            playlistController.current?.updateIndex(newIndex)
-          }
-        />
+        {playlist && <PlaylistComponent playlist={playlist} />}
       </div>
     </>
   );
diff --git a/src/components/MediaWidget/Player.tsx b/src/components/MediaWidget/Player.tsx
deleted file mode 100644
index 14f634c..0000000
--- a/src/components/MediaWidget/Player.tsx
+++ /dev/null
@@ -1,380 +0,0 @@
-import { useRef, useEffect, useState } from "react";
-import videojs from "video.js";
-import "videojs-youtube";
-import { markListened } from "./api";
-import { v4 as uuidv4 } from "uuid";
-import { publish, subscribe } from "../../socket";
-import { useLoaderData } from "react-router";
-import { PLAYLIST_TYPE } from "./PlaylistController";
-import { log } from "../../logging";
-
-let options = {
-  autoplay: false,
-  controls: false,
-  responsive: false,
-  fluid: false,
-  width: 500,
-  height: 500,
-  preload: "none",
-  techOrder: ["youtube"],
-  youtube: { ytControls: 0, rel: 0 },
-};
-
-let pausedByCommand = false;
-let pausedManually = false;
-
-export default function Player({ playlist, tab, current, updateCurrentFn }) {
-  const playerRef = useRef(null);
-  const videoRef = useRef(null);
-  const currentRef = useRef(null);
-  const playlistRef = useRef(null);
-  const [previousListen, setPreviousListen] = useState(-1);
-  const [showPlayButton, setShowPlayButton] = useState(true);
-  const [hideVideo, setHideVideo] = useState(true);
-  const { recipientId, conf, widgetId } = useLoaderData();
-
-  function previous() {
-    if (current > 0) {
-      updateCurrentFn(current - 1);
-    }
-  }
-
-  function next() {
-    playerRef.current.currentTime(playerRef.current.duration());
-  }
-
-  function sendAlert(title, number, count) {
-    publish(conf.topic.player, {
-      title: title,
-      number: number,
-      count: tab == PLAYLIST_TYPE.REQUESTED ? count : 0,
-    });
-  }
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      if (!playerRef.current) {
-        return;
-      }
-      let bar = document.getElementById("progressBar");
-      if (!bar) {
-        return;
-      }
-      let progress = (
-        (playerRef.current.currentTime() / playerRef.current.duration()) *
-        100
-      ).toFixed(2);
-      bar.style["width"] = `${progress}%`;
-    }, 250);
-    return () => clearInterval(intervalId);
-  }, [playerRef]);
-
-  useEffect(() => {
-    currentRef.current = current;
-  }, [current]);
-
-  useEffect(() => {
-    playlistRef.current = playlist;
-  }, [playlist]);
-
-  function listenToggleVideoEvent() {
-    log.debug("toggle video");
-    setHideVideo((value) => !value);
-  }
-
-  useEffect(() => {
-    document.addEventListener("toggleVideo", listenToggleVideoEvent);
-    return () =>
-      document.removeEventListener("toggleVideo", listenToggleVideoEvent);
-  }, [recipientId]);
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      if (!playerRef.current) {
-        return;
-      }
-      let duration = document.getElementById("video-duration");
-      if (!duration) {
-        return;
-      }
-      let currentSeconds = Math.trunc(playerRef.current.currentTime() % 60);
-      if (currentSeconds < 10) {
-        currentSeconds = "0" + currentSeconds;
-      }
-      let durationSeconds = Math.trunc(playerRef.current.duration() % 60);
-      if (durationSeconds < 10) {
-        durationSeconds = "0" + durationSeconds;
-      }
-      duration.innerHTML = `${Math.trunc(
-        playerRef.current.currentTime() / 60,
-      )}:${currentSeconds} / ${Math.trunc(
-        playerRef.current.duration() / 60,
-      )}:${durationSeconds}`;
-    }, 1000);
-    return () => clearInterval(intervalId);
-  }, [playerRef]);
-
-  useEffect(() => {
-    log.debug("Running constructing");
-    const intervalId = setInterval(() => {
-      if (playerRef.current) {
-        return;
-      }
-
-      if (!playlist || current < 0 || !playlist[current]) {
-        return;
-      }
-
-      console.log("CREATING PLAYER");
-
-      const videoElement = document.createElement("video-js");
-      videoElement.setAttribute("id", "mediaplayer");
-
-      videoElement.classList.add("vjs-big-play-centered");
-      videoRef.current.appendChild(videoElement);
-      options.sources = playlist[current];
-
-      playerRef.current = videojs(videoElement, options);
-      const player = playerRef.current;
-      player.src(playlist[current]);
-      player.uuid = uuidv4();
-      player.volume(0.5);
-      player.off("play");
-      player.on("play", () => {
-        setShowPlayButton(false);
-        pausedByCommand = false;
-        pausedManually = false;
-        sendAlert(player.currentSource().title, current, playlist.length);
-      });
-      player.off("pause");
-      player.on("pause", () => {
-        pausedManually = false;
-        setShowPlayButton(true);
-        sendAlert(null, 0, 0);
-      });
-      player.off("ended");
-      player.on("ended", () => {
-        setShowPlayButton(true);
-        setPreviousListen(currentRef.current);
-        if (playerRef.current.currentSource().originId) {
-          markListened(playerRef.current.currentSource().originId);
-        }
-        log.debug(`updating index to ${current + 1}`);
-        updateCurrentFn(current + 1);
-        sendAlert(null, 0, 0);
-      });
-      player.off("error");
-      player.on("error", function () {
-        console.log("2");
-        console.log(player.error());
-        setShowPlayButton(true);
-        setPreviousListen(currentRef.current);
-        if (playerRef.current.currentSource().originId) {
-          markListened(playerRef.current.currentSource().originId);
-        }
-        log.debug(`updating index to ${current + 1}`);
-        updateCurrentFn(current + 1);
-        sendAlert(null, 0, 0);
-      });
-      console.log("created: " + playerRef.current.uuid);
-    }, 1000);
-    return () => clearInterval(intervalId);
-  }, [playerRef, videoRef, playlist, current]);
-
-  useEffect(() => {
-    if (!playerRef.current) {
-      return;
-    }
-    if (current >= playlist.length) {
-      return;
-    }
-    if (current === -1) {
-      return;
-    }
-    let player = playerRef.current;
-    console.log("set song: " + current);
-    console.log(playlist[current]);
-    player.src(playlist[current]);
-    console.log("pausedByCommand:" + pausedByCommand);
-    console.log("pausedManually:" + pausedManually);
-    if (!pausedByCommand && !pausedManually) {
-      console.log("start playing after changing playlist/current");
-      setTimeout(() => player.play(), 500);
-    }
-  }, [playerRef, playlist, tab, current]);
-
-  useEffect(() => {
-    if (!playerRef.current) {
-      return;
-    }
-    let player = playerRef.current;
-    player.off("play");
-    player.on("play", () => {
-      setShowPlayButton(false);
-      pausedByCommand = false;
-      pausedManually = false;
-      console.log(player.currentSource());
-      sendAlert(player.currentSource().title, current, playlist.length);
-    });
-    player.off("pause");
-    player.on("pause", () => {
-      console.log("pausing");
-      pausedManually = true;
-      setShowPlayButton(true);
-      sendAlert(null, 0, 0);
-    });
-    player.off("ended");
-    player.on("ended", () => {
-      setShowPlayButton(true);
-      setPreviousListen(currentRef.current);
-      if (playerRef.current.currentSource().originId) {
-        markListened(playerRef.current.currentSource().originId);
-      }
-      log.debug(`updating index to ${current + 1}`);
-      updateCurrentFn(current + 1);
-      sendAlert(null, 0, 0);
-    });
-    player.off("error");
-    player.on("error", function () {
-      console.log("1");
-      console.log(player.error());
-      pausedManually = false;
-      setShowPlayButton(true);
-      setPreviousListen(currentRef.current);
-      if (playerRef.current.currentSource().originId) {
-        markListened(playerRef.current.currentSource().originId);
-      }
-      log.debug(`updating index to ${current + 1}`);
-      updateCurrentFn(current + 1);
-      sendAlert(null, 0, 0);
-    });
-  }, [playerRef, playlist, current]);
-
-  useEffect(() => {
-    subscribe(widgetId, conf.topic.playerCommands, (message) => {
-      console.log("--------");
-      if (playerRef.current) {
-        console.log("HANDLE COMMAND for " + playerRef.current.uuid);
-      } else {
-        console.log("HANDLE COMMAND for future player");
-      }
-      if (playlistRef.current) {
-        console.log("playlist length:" + playlistRef.current.length);
-      }
-      if (currentRef.current) {
-        console.log("current: " + currentRef.current);
-      }
-      if (playerRef.current) {
-        console.log("paused: " + playerRef.current.paused());
-        console.log("paused by command: " + pausedByCommand);
-        console.log("ended: " + playerRef.current.ended());
-      }
-      console.log("previousListen: " + previousListen);
-
-      let json = JSON.parse(message.body);
-      // todo check if playing
-      if (json.command === "pause") {
-        console.log("PAUSE BY COMMAND");
-        pausedByCommand = true;
-        if (playerRef.current) {
-          playerRef.current.pause();
-        }
-      }
-      if (
-        json.command === "resume" &&
-        playerRef.current &&
-        (pausedByCommand ||
-          (!pausedManually &&
-            playerRef.current.ended() &&
-            previousListen &&
-            previousListen + 1 == currentRef.current))
-      ) {
-        console.log("start playing by command");
-        playerRef.current.play();
-        console.log("Playlist length in player:" + playlistRef.current.length);
-      }
-      if (json.command === "play") {
-        playerRef.current.play();
-      }
-      if (json.command === "volume") {
-        playerRef.current.volume(json.value);
-      }
-      if (json.command === "next") {
-        setPreviousListen(currentRef.current);
-        if (playerRef.current.currentSource().originId) {
-          markListened(playerRef.current.currentSource().originId);
-        }
-        updateCurrentFn(current + 1);
-        sendAlert(null, 0, 0);
-      }
-      message.ack();
-    });
-  }, [recipientId]);
-
-  return (
-    <div className="player-container">
-      {hideVideo && (
-        <>
-          <div className="song-title-container">
-            {playlist[current] ? playlist[current].title : ""}
-          </div>
-        </>
-      )}
-      <div
-        className="video-player"
-        data-vjs-player
-        style={hideVideo ? { visibility: "hidden", height: "1px" } : {}}
-      >
-        <div ref={videoRef} />
-      </div>
-      <div className="progress">
-        <div id="progressBar" className="progress-bar"></div>
-      </div>
-      <div className="video-controls">
-        <div className="video-buttons">
-          <button
-            className="btn btn-outline-light"
-            disabled={current < 1 || !playlist[current]}
-            onClick={() => {
-              previous();
-            }}
-          >
-            <span className="material-symbols-sharp">skip_previous</span>
-          </button>
-          {showPlayButton ? (
-            <button
-              className="btn btn-outline-light"
-              disabled={playlist[current] == null}
-              onClick={() => playerRef.current.play()}
-            >
-              <span className="material-symbols-sharp">play_arrow</span>
-            </button>
-          ) : (
-            <button
-              className="btn btn-outline-light"
-              disabled={playlist[current] == null}
-              onClick={() => {
-                playerRef.current.pause();
-                pausedByCommand = true;
-              }}
-            >
-              <span className="material-symbols-sharp">pause</span>
-            </button>
-          )}
-          <button
-            className="btn btn-outline-light"
-            disabled={!playlist[current]}
-            onClick={() => {
-              next();
-            }}
-          >
-            <span className="material-symbols-sharp">skip_next</span>
-          </button>
-        </div>
-        <div id="video-duration" className="video-duration">
-          0.00 / 0.00
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/MediaWidget/Playlist.tsx b/src/components/MediaWidget/PlaylistComponent.tsx
similarity index 75%
rename from src/components/MediaWidget/Playlist.tsx
rename to src/components/MediaWidget/PlaylistComponent.tsx
index bf20ab2..9fc56b9 100644
--- a/src/components/MediaWidget/Playlist.tsx
+++ b/src/components/MediaWidget/PlaylistComponent.tsx
@@ -1,41 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
 import { useEffect, useRef } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
-import axios from "axios";
 import { findSetting } from "../utils";
 import { useLoaderData } from "react-router";
 import AddMediaPopup from "./AddMediaPopup";
+import { Playlist } from "../../logic/playlist/Playlist";
+import { Song } from "./types";
 
-export default function Playlist({
-  playlist,
-  current,
-  playFn,
-  updatePlaylistFn,
+export default function PlaylistComponent({
+  playlist
+}: {
+  playlist: Playlist
 }) {
-  const activeRef = useRef();
-  const { settings } = useLoaderData();
-
-  function remove(index) {
-    try {
-      axios
-        .patch(
-          process.env.REACT_APP_API_ENDPOINT +
-            "/media/" +
-            playlist[index > -1 ? index : 0].originId,
-          {
-            listened: true,
-          },
-        )
-        .catch(function (error) {
-          console.log(error);
-        });
-    } catch (error) {
-      console.log(error);
-    }
-    let updated = Array.from(playlist);
-    updated.splice(index, 1);
-    updatePlaylistFn(updated);
-  }
+  const { recipientId, settings, widgetId } = useLoaderData();
+  const activeRef = useRef<HTMLDivElement>(null);
+  const [current, setCurrent] = useState(0);
+  const [songs, setSongs] = useState<Song[]>([]);
 
   function onDragEnd(result) {
     if (!result.destination) {
@@ -48,14 +28,20 @@ export default function Playlist({
     ) {
       return;
     }
-
-    let song = playlist[source.index];
-    let updatedPlaylist = Array.from(playlist);
-    updatedPlaylist.splice(source.index, 1);
-    updatedPlaylist.splice(destination.index, 0, song);
-    updatePlaylistFn(updatedPlaylist);
+    playlist.moveSong(source.index, destination.index);
   }
 
+  useEffect(() => {
+    playlist.addListener({
+      id: `${widgetId}_playlist`,
+      trigger(playlist: Playlist){
+        setSongs(playlist.songs());
+        setCurrent(playlist.index() ?? 0);
+      }
+    });
+    // todo cleanup function
+  },[playlist]);
+
   useEffect(() => {
     if (activeRef.current) {
       activeRef.current.scrollIntoView();
@@ -91,9 +77,9 @@ export default function Playlist({
             className="playlist"
           >
             <ul {...provided.droppableProps} className="list-group">
-              {playlist.map((song, number) => {
+              {songs.map((song, index) => {
                 return (
-                  <Draggable key={song.id} draggableId={song.id} index={number}>
+                  <Draggable key={song.id} draggableId={song.id} index={index}>
                     {(draggable) => (
                       <li
                         ref={draggable.innerRef}
@@ -101,14 +87,18 @@ export default function Playlist({
                         {...draggable.dragHandleProps}
                         key={song.id}
                         className={`list-group-item ${
-                          number === current ? "active" : ""
+                          index === current ? "active" : ""
                         }`}
                       >
                         <div className="item-buttons">
                           <button
                             className="btn btn-outline-light play"
                             onClick={() => {
-                              playFn(number);
+                              const id = playlist.song()?.id
+                              if (id) {
+                                playlist.markListened(id);
+                              }
+                              playlist.setIndex(index);
                             }}
                           >
                             <span className="material-symbols-sharp">
@@ -127,28 +117,28 @@ export default function Playlist({
                           </button>
                           <button
                             className="btn btn-outline-light delete"
-                            onClick={() => remove(number)}
+                            onClick={() => playlist.removeSong(index)}
                           >
                             <span className="material-symbols-sharp">
                               delete
                             </span>
                           </button>
                         </div>
-                        {number === current && (
+                        {index === current && (
                           <div
                             style={playlistSongTitleStyle}
                             className="song-title"
                             ref={activeRef}
                           >
-                            {number + 1}. {song.title}
+                            {index + 1}. {song.title}
                           </div>
                         )}
-                        {number !== current && (
+                        {index !== current && (
                           <div
                             style={playlistSongTitleStyle}
                             className="song-title"
                           >
-                            {number + 1}. {song.title}
+                            {index + 1}. {song.title}
                           </div>
                         )}
                         <div style={playlistNicknameStyle} className="owner">
@@ -174,7 +164,7 @@ export default function Playlist({
                 <span className="material-symbols-sharp">add</span>
               </button>
             </div>
-            <AddMediaPopup />
+            <AddMediaPopup playlist={playlist} />
           </div>
         )}
       </Droppable>
diff --git a/src/components/MediaWidget/PlaylistController.ts b/src/components/MediaWidget/PlaylistController.ts
new file mode 100644
index 0000000..15efd6c
--- /dev/null
+++ b/src/components/MediaWidget/PlaylistController.ts
@@ -0,0 +1,128 @@
+import axios from "axios";
+import { v4 as uuidv4 } from "uuid";
+import { log } from "../../logging";
+import { Song } from "./types";
+import { IPlaylistRenderer } from "./IPlaylist";
+import { PLAYLIST_TYPE, Playlist } from "../../logic/playlist/Playlist";
+import { subscribe } from "../../socket";
+
+export class PlaylistController {
+  playlists = new Map<PLAYLIST_TYPE, Playlist>();
+  current: Playlist;
+
+  playlistRenderers: IPlaylistRenderer[] = [];
+
+  recipientId;
+
+  constructor(recipientId: string, widgetId: string, conf: any) {
+    this.recipientId = recipientId;
+    const requested = new Playlist(PLAYLIST_TYPE.REQUESTED);
+    this.current = requested;
+    this.playlists.set(PLAYLIST_TYPE.REQUESTED, requested);
+    this.playlists.set(
+      PLAYLIST_TYPE.PERSONAL,
+      new Playlist(PLAYLIST_TYPE.PERSONAL),
+    );
+
+    log.info(`Loading playlist for ${recipientId}`);
+
+    axios
+      .get(
+        `${process.env.REACT_APP_API_ENDPOINT}/media?recipientId=${recipientId}`,
+      )
+      .then((response) => {
+        let songs = response.data;
+        songs = songs.map(
+          (element: { url: string; id: string; title: string }) => {
+            return {
+              src: element.url,
+              type: "video/youtube",
+              id: uuidv4(),
+              originId: element.id,
+              owner: "Аноним",
+              title: element.title,
+            };
+          },
+        );
+        return fillSongData(recipientId, songs);
+      })
+      .then((playlist) => {
+        playlist.forEach((song) => this.current.addSong(song));
+      });
+
+    subscribe(widgetId, conf.topic.media, (message) => {
+      let json = JSON.parse(message.body);
+      let song = {
+        src: json.url,
+        type: "video/youtube",
+        id: uuidv4(),
+        originId: json.id,
+        owner: "Аноним",
+        title: json.title,
+      };
+      this.handleNewRequestedSongEvent(song);
+      message.ack();
+    });
+  }
+
+  handleNewRequestedSongEvent(song:Song){
+    this.playlists.get(PLAYLIST_TYPE.REQUESTED)?.addSong(song);
+    if (this.current.type() == PLAYLIST_TYPE.PERSONAL) {
+      this.switchTo(PLAYLIST_TYPE.REQUESTED);
+    }
+  }
+
+  previousSong(){
+    const index = this.current.index();
+    if (index != null && index > 0) {
+      this.current.setIndex(index - 1);
+    }
+  }
+
+  finishSong(){
+    const song = this.current.song();
+    if (song?.id){
+      this.current.markListened(song?.id);
+    }
+  }
+
+  addPlaylistRenderer(renderer: IPlaylistRenderer): PlaylistController {
+    this.playlistRenderers.push(renderer);
+    renderer.bind(this.current);
+    return this;
+  }
+
+  switchTo(type: PLAYLIST_TYPE) {
+    log.debug(`switching to ${type == PLAYLIST_TYPE.PERSONAL ? "personal" : "requested"}`);
+    const playlist = this.playlists.get(type);
+    if (playlist) {
+      this.playlistRenderers.forEach((renderer) => {
+        renderer.unbind(this.current);
+        renderer.bind(playlist);
+      });
+      this.current = playlist;
+    }
+  }
+}
+
+async function fillSongData(recipientId: string, playlist: Song[]) {
+  log.info(`Trying to find songs for ${recipientId}`);
+  let response = await axios.get(
+    `${process.env.REACT_APP_API_ENDPOINT}/payment?recipientId=${recipientId}`,
+  );
+  let updatedPlaylist = playlist;
+  response.data.forEach(
+    (item: { attachments: (string | null)[]; senderName: string | null }) =>
+      item.attachments.forEach((attach: string | null) => {
+        updatedPlaylist = updatedPlaylist.map((song) => {
+          if (song.originId === attach) {
+            song.owner = item.senderName ? item.senderName : "Аноним";
+            return song;
+          } else {
+            return song;
+          }
+        });
+      }),
+  );
+  return updatedPlaylist;
+}
diff --git a/src/components/MediaWidget/PlaylistController.tsx b/src/components/MediaWidget/PlaylistController.tsx
deleted file mode 100644
index 5c1e77b..0000000
--- a/src/components/MediaWidget/PlaylistController.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import axios from "axios";
-import { v4 as uuidv4 } from "uuid";
-import { log } from "../../logging";
-import { Song } from "./types";
-
-export enum PLAYLIST_TYPE {
-  REQUESTED,
-  PERSONAL,
-}
-
-export class PlaylistController {
-  requested: Song[] = [];
-  fallback: Song[] = [];
-  requestedIndex = -1;
-  fallbackIndex = -1;
-  updatePlaylistFn;
-  updateIndexFn;
-  recipientId;
-  currentPlaylist;
-  playlistChangedFn: Function;
-
-  constructor(
-    recipientId: string,
-    updatePlaylistFn: Function,
-    updateIndexFn: Function,
-    playlistChangedFn: Function,
-  ) {
-    this.updatePlaylistFn = updatePlaylistFn;
-    this.updateIndexFn = updateIndexFn;
-    this.recipientId = recipientId;
-    this.currentPlaylist = PLAYLIST_TYPE.REQUESTED;
-    this.playlistChangedFn = playlistChangedFn;
-    log.info("Loading playlist for " + JSON.stringify(recipientId));
-    document.removeEventListener("addSongs", this.addSongs);
-    document.addEventListener("addSongs", this.addSongs);
-
-    axios
-      .get(
-        `${process.env.REACT_APP_API_ENDPOINT}/media?recipientId=${recipientId}`,
-      )
-      .then((response) => {
-        let songs = response.data;
-        songs = songs.map((element) => {
-          return {
-            src: element.url,
-            type: "video/youtube",
-            id: uuidv4(),
-            originId: element.id,
-            owner: "Аноним",
-            title: element.title,
-          };
-        });
-        return fillSongData(recipientId, songs);
-      })
-      .then((playlist) => {
-        this.requestedIndex = 0;
-        this.updatePlaylist(playlist);
-      });
-  }
-
-  addSong(song: Song) {
-    fillSongData(this.recipientId, [song]).then((updated) => {
-      const oldPlaylist =
-        this.currentPlaylist === PLAYLIST_TYPE.PERSONAL
-          ? this.fallback
-          : this.requested;
-      if (oldPlaylist.some((existing) => existing.originId === song.originId)) {
-        log.debug("skipping updating playlist because of same song");
-        return;
-      }
-      this.updatePlaylist([...oldPlaylist, updated[0]]);
-    });
-  }
-
-  handleNewRequestedSongEvent(song: Song) {
-    log.debug(
-      `adding song ${JSON.stringify(song)}, requested current index: ${
-        this.requestedIndex
-      }`,
-    );
-    if (this.currentPlaylist === PLAYLIST_TYPE.PERSONAL) {
-      log.debug("switch to requested playlist for new song");
-      this.switchToRequested();
-    }
-    this.addSong(song);
-    log.debug(
-      `song ${song.id} added, requested current index: ${this.requestedIndex}`,
-    );
-  }
-
-  handleRequestedPlaylistEnd() {
-    if (this.fallbackIndex + 1 < this.fallback.length) {
-      log.debug("switch to personal because of requested end");
-      this.switchToFallback();
-      this.updateIndex(this.fallbackIndex + 1);
-    }
-  }
-
-  addSongs = (event) => {
-    const songs: Song[] = event.detail;
-    const oldPlaylist =
-      this.currentPlaylist === PLAYLIST_TYPE.PERSONAL
-        ? this.fallback
-        : this.requested;
-    this.updatePlaylist(oldPlaylist.concat(songs));
-  };
-
-  updatePlaylist(newPlaylist: Song[]) {
-    log.debug(`updating playlist, current: ${this.currentPlaylist}`);
-    const oldPlaylist =
-      this.currentPlaylist === PLAYLIST_TYPE.PERSONAL
-        ? this.fallback
-        : this.requested;
-    const oldIndex =
-      this.currentPlaylist === PLAYLIST_TYPE.PERSONAL
-        ? this.fallbackIndex
-        : this.requestedIndex;
-    let song = oldPlaylist[oldIndex];
-    log.debug("SEARCHING FOR SONG(" + oldIndex + ") : " + JSON.stringify(song));
-    if (song) {
-      let index = newPlaylist.findIndex((it) => it.id === song.id);
-      log.debug("FOUND INDEX: " + index);
-      this.updateIndex(index > -1 ? index : oldIndex);
-    }
-    if (this.currentPlaylist === PLAYLIST_TYPE.REQUESTED) {
-      this.requested = newPlaylist;
-    }
-    if (this.currentPlaylist === PLAYLIST_TYPE.PERSONAL) {
-      this.fallback = newPlaylist;
-    }
-    this.updatePlaylistFn(newPlaylist);
-  }
-
-  updateIndex(newIndex: number) {
-    log.debug(
-      `updating index for ${newIndex} in playlist ${this.currentPlaylist}, current personal: ${this.fallbackIndex}, current requested: ${this.requestedIndex}`,
-    );
-    this.updateIndexFn(newIndex);
-    if (this.currentPlaylist === PLAYLIST_TYPE.PERSONAL) {
-      this.fallbackIndex = newIndex;
-    }
-    if (this.currentPlaylist === PLAYLIST_TYPE.REQUESTED) {
-      this.requestedIndex = newIndex;
-      if (this.requestedIndex >= this.requested.length) {
-        this.handleRequestedPlaylistEnd();
-      }
-    }
-    log.debug(
-      `updated indexes, requested: ${this.requestedIndex}, personal: ${this.fallbackIndex}`,
-    );
-  }
-
-  switchToFallback() {
-    log.debug("switching to personal");
-    this.currentPlaylist = PLAYLIST_TYPE.PERSONAL;
-    this.playlistChangedFn(PLAYLIST_TYPE.PERSONAL);
-    this.updatePlaylistFn(this.fallback);
-    this.updateIndexFn(this.fallbackIndex);
-  }
-
-  switchToRequested() {
-    log.debug("switching to requested");
-    this.currentPlaylist = PLAYLIST_TYPE.REQUESTED;
-    this.playlistChangedFn(PLAYLIST_TYPE.REQUESTED);
-    this.updatePlaylistFn(this.requested);
-    this.updateIndexFn(this.requestedIndex);
-  }
-}
-
-async function fillSongData(recipientId: string, playlist: Song[]) {
-  log.info(`Trying to find songs for ${recipientId}`);
-  let response = await axios.get(
-    `${process.env.REACT_APP_API_ENDPOINT}/payment?recipientId=${recipientId}`,
-  );
-  let updatedPlaylist = playlist;
-  response.data.forEach((item) =>
-    item.attachments.forEach((attach) => {
-      updatedPlaylist = updatedPlaylist.map((song) => {
-        if (song.originId === attach) {
-          song.owner = item.senderName ? item.senderName : "Аноним";
-          return song;
-        } else {
-          return song;
-        }
-      });
-    }),
-  );
-  return updatedPlaylist;
-}
diff --git a/src/components/MediaWidget/PopupPlayerImpl.ts b/src/components/MediaWidget/PopupPlayerImpl.ts
new file mode 100644
index 0000000..7ba8f38
--- /dev/null
+++ b/src/components/MediaWidget/PopupPlayerImpl.ts
@@ -0,0 +1,14 @@
+import { publish, subscribe } from "../../socket";
+import { Song } from "./types";
+
+export class PopupPlayerImpl implements IPlayer {
+  play(song: Song): void {
+    publish("/topic/media", { url: song.src });
+  }
+  onEnded(callback: Function): void {
+    subscribe("test2", "/topic/finishedmedia", (message) => {
+      callback.call({});
+      message.ack();
+    });
+  }
+}
diff --git a/src/components/MediaWidget/ProgressBar.tsx b/src/components/MediaWidget/ProgressBar.tsx
new file mode 100644
index 0000000..22e0d38
--- /dev/null
+++ b/src/components/MediaWidget/ProgressBar.tsx
@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+import { VideoJsPlayer } from "video.js";
+
+export default function ProgressBar({ player }: { player: VideoJsPlayer }) {
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (!player) {
+        return;
+      }
+      let bar = document.getElementById("progressBar");
+      if (!bar) {
+        return;
+      }
+      let progress = ((player.currentTime() / player.duration()) * 100).toFixed(
+        2,
+      );
+      bar.style["width"] = `${progress}%`;
+    }, 250);
+    return () => clearInterval(intervalId);
+  }, [player]);
+
+  return (
+    <div className="progress">
+      <div id="progressBar" className="progress-bar"></div>
+    </div>
+  );
+}
diff --git a/src/components/MediaWidget/RequestsDisabledWarning.tsx b/src/components/MediaWidget/RequestsDisabledWarning.tsx
index 50a3ebf..71a113d 100644
--- a/src/components/MediaWidget/RequestsDisabledWarning.tsx
+++ b/src/components/MediaWidget/RequestsDisabledWarning.tsx
@@ -1,16 +1,22 @@
 import React, { useEffect } from "react";
 import { useState } from "react";
+import { log } from "../../logging";
 
 export default function RequestsDisabledWarning({}: {}) {
   const [requestsEnabled, setRequestsEnabled] = useState(true);
 
   useEffect(() => {
     function toggle(event) {
+      log.debug(`toggle requests: ${event.detail}`);
       setRequestsEnabled(event.detail);
     }
+    log.debug("create mediawidget listener for media-requests toggler");
     document.addEventListener("toggleMediaRequests", toggle);
-    return () => document.removeEventListener("toggleMediaRequests", toggle);
-  }, [requestsEnabled]);
+    return () => {
+      log.debug("destroy mediawidget listener for media-requests toggler");
+      document.removeEventListener("toggleMediaRequests", toggle);
+    };
+  }, [setRequestsEnabled]);
 
   return (
     <>
diff --git a/src/components/MediaWidget/VideoDuration.tsx b/src/components/MediaWidget/VideoDuration.tsx
new file mode 100644
index 0000000..19c3c5e
--- /dev/null
+++ b/src/components/MediaWidget/VideoDuration.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+
+export default function VideoDuration({ player }: { player: videojs.VideoJsPlayer }) {
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (!player) {
+        return;
+      }
+      let duration = document.getElementById("video-duration");
+      if (!duration) {
+        return;
+      }
+      let currentSeconds = String(Math.trunc(player.currentTime() % 60));
+      if (currentSeconds.length < 2) {
+        currentSeconds = "0" + currentSeconds;
+      }
+      let durationSeconds = String(Math.trunc(player.duration() % 60));
+      if (durationSeconds.length < 2) {
+        durationSeconds = "0" + durationSeconds;
+      }
+      duration.innerHTML = `${Math.trunc(
+        player.currentTime() / 60,
+      )}:${currentSeconds} / ${Math.trunc(
+        player.duration() / 60,
+      )}:${durationSeconds}`;
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, [player]);
+  return (
+    <>
+      <div id="video-duration" className="video-duration">
+        0.00 / 0.00
+      </div>
+    </>
+  );
+}
diff --git a/src/components/MediaWidget/VideoJSComponent.tsx b/src/components/MediaWidget/VideoJSComponent.tsx
new file mode 100644
index 0000000..a1545f5
--- /dev/null
+++ b/src/components/MediaWidget/VideoJSComponent.tsx
@@ -0,0 +1,208 @@
+import React, { useEffect, useRef, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+import videojs from "video.js";
+import "videojs-youtube";
+import { Song } from "./types";
+import { VideoJsPlayer } from "video.js";
+import { VideoJsPlayerOptions } from "video.js";
+import { log } from "../../logging";
+import { useLoaderData } from "react-router";
+import VideoPopupToggler from "./VideoPopupToggler";
+import ProgressBar from "./ProgressBar";
+import VideoDuration from "./VideoDuration";
+import { PlaylistController } from "./PlaylistController";
+import { publish, subscribe } from "../../socket";
+
+let options: VideoJsPlayerOptions = {
+  autoplay: true,
+  controls: false,
+  responsive: false,
+  fluid: false,
+  width: 500,
+  height: 500,
+  preload: "none",
+  techOrder: ["youtube"],
+  youtube: { ytControls: 0, rel: 0 },
+};
+
+enum PLAYER_STATE {
+  PLAYING,
+  PAUSED,
+}
+
+export default function VideoJSComponent({
+  song,
+  playlistController,
+}: {
+  song: Song;
+  playlistController: PlaylistController;
+}) {
+  const { conf, widgetId } = useLoaderData();
+  const videoRef = useRef<HTMLDivElement>(null);
+  const [hideVideo, setHideVideo] = useState(true);
+  const [playerState, setPlayerState] = useState<PLAYER_STATE>(
+    PLAYER_STATE.PAUSED,
+  );
+  const pausedByCommand = useRef<boolean>(false);
+  const [player, setPlayer] = useState<VideoJsPlayer|null>(null);
+
+  function freeze() {
+    log.debug(`freezing player`);
+    if (player && !player.paused()) {
+      pausedByCommand.current = true;
+      player.pause();
+    }
+  }
+
+  function unfreeze() {
+    log.debug(`unfreezing player`);
+    if (!player) {
+      return;
+    }
+    if (pausedByCommand.current) {
+      pausedByCommand.current = false;
+      player.play();
+    }
+  }
+
+  function listenToggleVideoEvent() {
+    log.debug(`toggle video`);
+    setHideVideo((value) => !value);
+  }
+
+  useEffect(() => {
+    document.addEventListener("toggleVideo", listenToggleVideoEvent);
+    return () =>
+      document.removeEventListener("toggleVideo", listenToggleVideoEvent);
+  }, [widgetId]);
+
+  useEffect(() => {
+    subscribe(widgetId, conf.topic.playerCommands, (message) => {
+      let json = JSON.parse(message.body);
+      if (json.command === "pause") {
+        freeze();
+      }
+      if (json.command === "resume") {
+        unfreeze();
+      }
+      if (json.command === "play") {
+        player.play();
+      }
+      if (json.command === "volume") {
+        player.volume(json.value);
+      }
+      if (json.command === "next") {
+        playlistController.finishSong();
+      }
+      message.ack();
+    });
+  }, [widgetId]);
+
+  function sendAlert(title: string) {
+    publish(conf.topic.player, {
+      title: title,
+    });
+  }
+
+  useEffect(() => {
+    log.debug("Creating new player instance");
+    log.debug(`playing song ${JSON.stringify(song)}`);
+
+    const videoElement = document.createElement("video-js");
+    videoElement.setAttribute("id", "mediaplayer");
+    videoElement.classList.add("vjs-big-play-centered");
+    videoRef.current?.appendChild(videoElement);
+    options.sources = song;
+
+    const player = videojs(videoElement, options);
+    player.src(song);
+    player.volume(0.5)t
+    player.on("play", () => {
+      log.debug("start playing");
+      setPlayerState(PLAYER_STATE.PLAYING);
+      sendAlert(song.title);
+    });
+    player.on("pause", () => {
+      log.debug("pause player");
+      setPlayerState(PLAYER_STATE.PAUSED);
+      sendAlert("");
+    });
+    player.on("ended", () => {
+      log.debug("song ended");
+      playlistController.finishSong();
+      sendAlert("");
+    });
+    player.on("error", function () {
+      log.error(player.error());
+      playlistController.finishSong();
+      sendAlert("");
+    });
+    setPlayer(player);
+    return () => {
+      player.dispose();
+    };
+  }, [song]);
+
+  return (
+    <>
+      <>
+        <div className="player-header">
+          <div className="song-title-container">{song?.title}</div>
+          <VideoPopupToggler/>
+        </div>
+      </>
+      <div
+        className="video-player"
+        data-vjs-player
+        style={hideVideo ? { visibility: "hidden", height: "1px" } : {}}
+      >
+        <div ref={videoRef} />
+      </div>
+      <ProgressBar player={player} />
+      <div className="player-container">
+        <div className="video-controls">
+          <div className="video-buttons">
+            <button
+              className="btn btn-outline-light"
+              onClick={() => {
+                playlistController.previousSong();
+              }}
+            >
+              <span className="material-symbols-sharp">skip_previous</span>
+            </button>
+            {playerState == PLAYER_STATE.PAUSED && (
+              <button
+                className="btn btn-outline-light"
+                disabled={song == null}
+                onClick={() => player.play()}
+              >
+                <span className="material-symbols-sharp">play_arrow</span>
+              </button>
+            )}
+            {playerState == PLAYER_STATE.PLAYING && (
+              <button
+                className="btn btn-outline-light"
+                disabled={song == null}
+                onClick={() => {
+                  player.pause();
+                }}
+              >
+                <span className="material-symbols-sharp">pause</span>
+              </button>
+            )}
+            <button
+              className="btn btn-outline-light"
+              disabled={!song}
+              onClick={() => {
+                playlistController.finishSong();
+              }}
+            >
+              <span className="material-symbols-sharp">skip_next</span>
+            </button>
+            <VideoDuration player={player} />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/MediaWidget/VideoPopupToggler.tsx b/src/components/MediaWidget/VideoPopupToggler.tsx
new file mode 100644
index 0000000..2ed47f0
--- /dev/null
+++ b/src/components/MediaWidget/VideoPopupToggler.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import Toggle from "react-toggle";
+import "react-toggle/style.css";
+
+enum VIDEO_IMPL {
+  EMBEDDED,
+  REMOTE,
+}
+
+export default function VideoPopupToggler({}) {
+  const [videoImpl, setVideoImpl] = useState<VIDEO_IMPL>(VIDEO_IMPL.EMBEDDED);
+  return (
+    <>
+      <div className="videoImplToggler">
+        <label>
+          <Toggle
+            defaultChecked={videoImpl === VIDEO_IMPL.REMOTE}
+            onChange={() => {
+              if (videoImpl === VIDEO_IMPL.REMOTE) {
+                setVideoImpl(VIDEO_IMPL.EMBEDDED);
+              }
+              if (videoImpl === VIDEO_IMPL.EMBEDDED) {
+                setVideoImpl(VIDEO_IMPL.REMOTE);
+              }
+            }}
+          />
+          <span className="videoImpl">{videoImpl === VIDEO_IMPL.REMOTE ? "Remote" : "Embedded"}</span>
+        </label>
+        </div>
+    </>
+  );
+}
diff --git a/src/components/MediaWidget/api.tsx b/src/components/MediaWidget/api.tsx
index 96cf7e0..2eb38ec 100644
--- a/src/components/MediaWidget/api.tsx
+++ b/src/components/MediaWidget/api.tsx
@@ -1,6 +1,6 @@
 import axios from "axios";
 
-export function markListened(id) {
+export function markListened(id:string) {
   try {
     axios
       .patch(`${process.env.REACT_APP_API_ENDPOINT}/media/${id}`, {
diff --git a/src/components/MediaWidget/types.ts b/src/components/MediaWidget/types.ts
index 9933453..b603342 100644
--- a/src/components/MediaWidget/types.ts
+++ b/src/components/MediaWidget/types.ts
@@ -1,15 +1,10 @@
-interface Playlist {
-  title: string;
-  id: string;
-}
-
 interface Song {
   src: string;
   type: string;
   id: string;
-  originId: string;
+  originId: string|null;
   owner: string;
   title: string;
 }
 
-export { Playlist, Song };
+export { Song };
diff --git a/src/components/Payments/Menu.tsx b/src/components/Payments/Menu.tsx
index f699ef3..9569499 100644
--- a/src/components/Payments/Menu.tsx
+++ b/src/components/Payments/Menu.tsx
@@ -46,7 +46,6 @@ export default function Menu({ config, socket }) {
         title:
           "DARK AGE - Afterlife (2013) // Official Music Video // AFM Records",
         thumbnail: "https://i.ytimg.com/vi/at1e2XnbOuw/maxresdefault.jpg",
-        listened: false,
         ready: true,
       }),
     });
diff --git a/src/components/PlayerInfo/PlayerInfo.tsx b/src/components/PlayerInfo/PlayerInfo.tsx
index fcf7f38..42c6613 100644
--- a/src/components/PlayerInfo/PlayerInfo.tsx
+++ b/src/components/PlayerInfo/PlayerInfo.tsx
@@ -19,7 +19,7 @@ function PlayerInfo() {
       log.debug(`Received: ${message.body}`);
       let json = JSON.parse(message.body);
       setAlert(json);
-      setLeft(json.count - json.number);
+      setLeft(json.count && json.number ? json.count - json.number : 0);
       message.ack();
     });
 		setupCommandListener(widgetId, () => navigate(0));
diff --git a/src/components/PlayerPopup/PlayerPopup.tsx b/src/components/PlayerPopup/PlayerPopup.tsx
new file mode 100644
index 0000000..8dcf15d
--- /dev/null
+++ b/src/components/PlayerPopup/PlayerPopup.tsx
@@ -0,0 +1,77 @@
+import { useRef, useEffect, useState } from "react";
+import videojs from "video.js";
+import "videojs-youtube";
+import { v4 as uuidv4 } from "uuid";
+import { publish, subscribe } from "../../socket";
+import { useLoaderData } from "react-router";
+import { log } from "../../logging";
+
+let options = {
+  autoplay: true,
+  controls: false,
+  responsive: false,
+  fluid: false,
+  width: 500,
+  height: 500,
+  preload: "none",
+  techOrder: ["youtube"],
+  youtube: { ytControls: 0, rel: 0 },
+};
+
+export default function PlayerPopup({}) {
+  const playerRef = useRef(null);
+  const videoRef = useRef(null);
+  const [hideVideo, setHideVideo] = useState(true);
+  const [mediaUrl, setMediaUrl] = useState("");
+  const { recipientId, conf, widgetId } = useLoaderData();
+
+  useEffect(() => {
+    if (!mediaUrl) {
+      return;
+    }
+    createPlayer(mediaUrl);
+    setHideVideo(false);
+    playerRef?.current?.src({ type: "video/youtube", src: mediaUrl });
+  }, [mediaUrl]);
+
+  function createPlayer(url: string) {
+    if (playerRef.current) {
+      return;
+    }
+    log.debug("Creating player");
+
+    const videoElement = document.createElement("video-js");
+    videoElement.setAttribute("id", "mediaplayer");
+
+    videoElement.classList.add("vjs-big-play-centered");
+    videoRef?.current?.appendChild(videoElement);
+    options.sources = [{ type: "video/youtube", src: url }];
+
+    playerRef.current = videojs(videoElement, options);
+    playerRef.current.uuid = uuidv4();
+    playerRef.current.on("ended", () => {
+			setHideVideo(true);
+			publish("/topic/finishedmedia", {});
+    });
+    log.debug("Player has been created");
+  }
+
+  useEffect(() => {
+    subscribe("test", "/topic/media", (message) => {
+      let json = JSON.parse(message.body);
+      log.debug(`playing ${json.url}`);
+      setMediaUrl(json.url);
+      message.ack();
+    });
+  }, [widgetId]);
+
+  return (
+    <div
+      className="video-player"
+      data-vjs-player
+      style={hideVideo ? { visibility: "hidden", height: "1px" } : {}}
+    >
+      <div ref={videoRef} />
+    </div>
+  );
+}
diff --git a/src/index.tsx b/src/index.tsx
index 8bbffaa..3b59ce9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -22,6 +22,7 @@ import DonationTimer from "./components/DonationTimer/DonationTimer";
 import type { Params } from "react-router-dom";
 import PaymentPageConfigComponent from "./components/PaymentPageConfig/PaymentPageConfigComponent";
 import PaymentGatewaysConfiguration from "./pages/PaymentGatewaysConfiguration/PaymentGatewaysConfiguration";
+import PlayerPopup from "./components/PlayerPopup/PlayerPopup";
 
 async function widgetSettingsLoader({
   params,
@@ -93,6 +94,11 @@ const router = createBrowserRouter([
     element: <PlayerInfo />,
     loader: widgetSettingsLoader,
   },
+  {
+    path: "/player-popup/:widgetId",
+    element: <PlayerPopup />,
+    loader: widgetSettingsLoader,
+  },
   {
     path: "/player-control/:widgetId",
     element: <PlayerControl />,
diff --git a/src/logic/playlist/Playlist.ts b/src/logic/playlist/Playlist.ts
new file mode 100644
index 0000000..37351c5
--- /dev/null
+++ b/src/logic/playlist/Playlist.ts
@@ -0,0 +1,137 @@
+import { markListened } from "../../components/MediaWidget/api";
+import { Song } from "../../components/MediaWidget/types";
+import { log } from "../../logging";
+import { IPlaylistChangesListener } from "./PlaylistChangesListener";
+
+enum PLAYLIST_TYPE {
+  REQUESTED,
+  PERSONAL,
+}
+
+class Playlist {
+  _songs: Song[] = [];
+  _index: number | null = null;
+  _type: PLAYLIST_TYPE;
+  _listeners: IPlaylistChangesListener[] = [];
+
+  constructor(type: PLAYLIST_TYPE) {
+    this._type = type;
+  }
+
+  addSong(song: Song) {
+    log.debug(`adding song ${song.title}`);
+    if (
+      this._songs.some(
+        (existing) => existing.originId && existing.originId === song.originId,
+      )
+    ) {
+      log.debug("skipping playlist update because of same song");
+      return;
+    }
+    this._songs.push(song);
+    if (this._index == null) {
+      this._index = 0;
+    }
+    this.triggerListeners();
+  }
+
+  removeSong(index: number) {
+    if (index < 0 || index > this._songs.length) {
+      return;
+    }
+    const originId = this._songs[index].originId;
+    if (originId) {
+      markListened(originId);
+    }
+    this._songs.splice(index, 1);
+    this.triggerListeners();
+  }
+
+  moveSong(from: number, to: number) {
+    if (from < 0 || from > this._songs.length) {
+      return;
+    }
+    if (to < 0 || to > this._songs.length) {
+      return;
+    }
+    let currentSongId: string | null = null;
+    if (this._index != null) {
+      currentSongId = this._songs[this._index].id;
+    }
+    const song = this._songs[from];
+    this._songs.splice(from, 1);
+    this._songs.splice(to, 0, song);
+    if (currentSongId) {
+      const newIndex = this._songs.findIndex(
+        (song) => song.id === currentSongId,
+      );
+      this._index = newIndex;
+    }
+    this.triggerListeners();
+  }
+
+  songs(): Song[] {
+    return this._songs;
+  }
+
+  song(): Song | null {
+    if (this._index != null) {
+      return this._songs[this._index];
+    }
+    return null;
+  }
+
+  setIndex(current: number): void {
+    log.debug(`set playlist index to ${current}`);
+    this._index = current;
+    this.triggerListeners();
+  }
+
+  index(): number | null {
+    return this._index;
+  }
+
+  markListened(id: string): void {
+    this._songs.map((song) => {
+      if (song.id === id) {
+        if (song.originId) {
+          markListened(song.originId);
+        }
+      }
+      return song;
+    });
+    if (this.song()?.id === id) {
+      this.nextSong();
+    }
+  }
+
+  nextSong() {
+    if (this._index != null) {
+      this._index = this._index + 1;
+      if (this._index >= this._songs.length) {
+        this._index = null;
+      }
+    }
+    this.triggerListeners();
+  }
+
+  type(): PLAYLIST_TYPE {
+    return this._type;
+  }
+
+  addListener(listener: IPlaylistChangesListener) {
+    this._listeners.push(listener);
+    listener.trigger(this);
+  }
+
+  removeListener(id: string) {
+    const index = this._listeners.findIndex((listener) => (listener.id = id));
+    this._listeners.splice(index, 1);
+  }
+
+  triggerListeners() {
+    this._listeners.forEach((listener) => listener.trigger(this));
+  }
+}
+
+export { PLAYLIST_TYPE, Playlist };
diff --git a/src/logic/playlist/PlaylistChangesListener.ts b/src/logic/playlist/PlaylistChangesListener.ts
new file mode 100644
index 0000000..8b9287a
--- /dev/null
+++ b/src/logic/playlist/PlaylistChangesListener.ts
@@ -0,0 +1,8 @@
+import { Playlist } from "./Playlist";
+
+interface IPlaylistChangesListener {
+  id: string;
+  trigger(updated: Playlist): void;
+}
+
+export { IPlaylistChangesListener }
diff --git a/src/types/Alert.ts b/src/types/Alert.ts
new file mode 100644
index 0000000..d520051
--- /dev/null
+++ b/src/types/Alert.ts
@@ -0,0 +1,2 @@
+interface Alert{
+}