diff --git a/src/components/ConfigurationPage/ConfigurationPage.tsx b/src/components/ConfigurationPage/ConfigurationPage.tsx
index 266a8aa..77e517c 100644
--- a/src/components/ConfigurationPage/ConfigurationPage.tsx
+++ b/src/components/ConfigurationPage/ConfigurationPage.tsx
@@ -5,6 +5,7 @@ import { WidgetsContext } from "./WidgetsContext";
 import axios from "axios";
 import { useLoaderData } from "react-router";
 import { defaultSettings } from "./WidgetSettings";
+import { log } from "../../logging";
 
 const backgroundColor = (
   <style
@@ -36,6 +37,7 @@ const types = [
   { name: "payments", description: "Payment History" },
   { name: "player-control", description: "Music Player Remote Control" },
   { name: "donation-timer", description: "Donation Timer" },
+  { name: "player-popup", description: "Video Popup" },
 ];
 
 export default function ConfigurationPage({}: {}) {
@@ -73,6 +75,7 @@ export default function ConfigurationPage({}: {}) {
 
     widgets.forEach((it) => {
       const settings = defaultSettings[it.type];
+      log.debug(`default settings for ${it.type} are ${JSON.stringify(settings)}`);
       const mergedSettings = settings.properties.map((prop) => {
 				const value = it.config?.properties?.find((sameprop) => sameprop.name === prop.name)?.value;
         const updatedProp = structuredClone(prop);
@@ -81,9 +84,9 @@ export default function ConfigurationPage({}: {}) {
 				}
 				return updatedProp;
       });
-			if (it.config) {
-				it.config.properties = mergedSettings;
-			}
+      log.debug(`merged settings for ${it.type} are ${JSON.stringify(mergedSettings)}`);
+      it.config = it.config ?? {};
+      it.config.properties = mergedSettings;
       widgetSettings.set(it.id, it.config);
     });
 
diff --git a/src/components/ConfigurationPage/WidgetConfiguration.tsx b/src/components/ConfigurationPage/WidgetConfiguration.tsx
index c213db4..bf1bc9f 100644
--- a/src/components/ConfigurationPage/WidgetConfiguration.tsx
+++ b/src/components/ConfigurationPage/WidgetConfiguration.tsx
@@ -23,14 +23,6 @@ interface WidgetConfigurationProps {
 
 function getSettingsWidget(id: string, type: string, onChange: Function) {
   switch (type) {
-    case "payments":
-      return <BaseSettings id={id} onChange={onChange} />;
-    case "media":
-      return <BaseSettings id={id} onChange={onChange} />;
-    case "player-info":
-      return <BaseSettings id={id} onChange={onChange} />;
-    case "player-control":
-      return <BaseSettings id={id} onChange={onChange} />;
     case "payment-alerts":
       return <PaymentAlertSettings id={id} onChange={onChange} />;
     case "donaters-top-list":
@@ -38,7 +30,7 @@ function getSettingsWidget(id: string, type: string, onChange: Function) {
     case "donation-timer":
       return <DonationTimerSettings id={id} onChange={onChange} />;
     default:
-      <></>;
+      return <BaseSettings id={id} onChange={onChange} />;
   }
 }
 
diff --git a/src/components/ConfigurationPage/WidgetSettings.ts b/src/components/ConfigurationPage/WidgetSettings.ts
index e857704..6b5c294 100644
--- a/src/components/ConfigurationPage/WidgetSettings.ts
+++ b/src/components/ConfigurationPage/WidgetSettings.ts
@@ -147,7 +147,14 @@ const defaultSettings = {
     properties: [],
   },
   "player-popup": {
-    properties: [],
+    properties: [
+      {
+        name: "audioOnly",
+        type: "boolean",
+        value: false,
+        displayName: "Воспроизводить только звук",
+      }
+    ],
   },
   payments: {
     properties: [
diff --git a/src/components/ConfigurationPage/settings/BaseSettings.tsx b/src/components/ConfigurationPage/settings/BaseSettings.tsx
index c260aa8..bc6e2ea 100644
--- a/src/components/ConfigurationPage/settings/BaseSettings.tsx
+++ b/src/components/ConfigurationPage/settings/BaseSettings.tsx
@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 import { WidgetsContext } from "../WidgetsContext";
 import ColorPicker from "./ColorPicker";
 import FontSelect from "./FontSelect";
+import { log } from "../../../logging";
 
 export default function BaseSettings({
   id,
diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
index 210a821..5e647d4 100644
--- a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
+++ b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
@@ -83,6 +83,12 @@ export default function PaymentAlertSettings({
           value: null,
           displayName: "Высота изображения в пикселях",
         },
+        {
+          tab: "image",
+          name: "imageShowTime",
+          value: null,
+          displayName: "Сколько времени показывать изображение (сек)",
+        },
         {
           tab: "header",
           name: "nicknameFont",
diff --git a/src/components/MediaWidget/IPlayer.ts b/src/components/MediaWidget/IPlayer.ts
index 5538986..afbcf34 100644
--- a/src/components/MediaWidget/IPlayer.ts
+++ b/src/components/MediaWidget/IPlayer.ts
@@ -1,8 +1,11 @@
+import { PlaylistController } from "./PlaylistController";
 import { Song } from "./types";
 
 interface IPlayer {
   id: string;
 	play(song: Song): void;
+
+  playlistController: PlaylistController;
 }
 
 export { IPlayer };
diff --git a/src/components/MediaWidget/MediaWidget.tsx b/src/components/MediaWidget/MediaWidget.tsx
index c1cbfb3..c184283 100644
--- a/src/components/MediaWidget/MediaWidget.tsx
+++ b/src/components/MediaWidget/MediaWidget.tsx
@@ -4,7 +4,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import { useLoaderData, useNavigate } from "react-router";
 import "./MediaWidget.css";
 import { PlaylistController } from "./PlaylistController";
-import { setupCommandListener } from "../../socket";
+import { publish, setupCommandListener } from "../../socket";
 import Menu from "../Menu/Menu";
 import { PaymentPageConfig } from "./PaymentPageConfig";
 import RequestsDisabledWarning from "./RequestsDisabledWarning";
@@ -31,9 +31,10 @@ export default function MediaWidget({}: {}) {
   const [activeTab, setActiveTab] = useState(PLAYLIST_TYPE.REQUESTED);
   const playlistController = useRef<PlaylistController>();
   const [song, setSong] = useState<Song | null>(null);
+  const [isRemote, setIsRemote] = useState<boolean>(false);
 
   useEffect(() => {
-    const playlistListener: IPlaylistChangesListener = {
+    const playlistListener = {
       id: widgetId,
       trigger(playlist: Playlist) {
         log.debug(
@@ -77,12 +78,18 @@ export default function MediaWidget({}: {}) {
         <RequestsDisabledWarning />
         <div className="player-header">
           <div className="song-title-container">{song?.title ?? ""}</div>
-          <VideoPopupToggler />
+          <VideoPopupToggler
+            onChange={() => {
+              publish(conf.topic.remoteplayer, { command: "stop" });
+              setIsRemote((old) => !old);
+            }}
+          />
         </div>
-        {song && playlistController.current && (
+        {playlistController.current && (
           <VideoJSComponent
             playlistController={playlistController.current}
             song={song}
+            isRemote={isRemote}
           />
         )}
         <div className="playlist-controls">
diff --git a/src/components/MediaWidget/PlaylistController.ts b/src/components/MediaWidget/PlaylistController.ts
index 15efd6c..e1b9efe 100644
--- a/src/components/MediaWidget/PlaylistController.ts
+++ b/src/components/MediaWidget/PlaylistController.ts
@@ -63,6 +63,11 @@ export class PlaylistController {
       this.handleNewRequestedSongEvent(song);
       message.ack();
     });
+    subscribe(widgetId, conf.topic.finishedmedia, (message) => {
+      const song = JSON.parse(message.body);
+      this.current.markListened(song.id);
+      message.ack();
+    });
   }
 
   handleNewRequestedSongEvent(song:Song){
diff --git a/src/components/MediaWidget/VideoJSComponent.tsx b/src/components/MediaWidget/VideoJSComponent.tsx
index d4cba94..53113f9 100644
--- a/src/components/MediaWidget/VideoJSComponent.tsx
+++ b/src/components/MediaWidget/VideoJSComponent.tsx
@@ -9,7 +9,7 @@ import { useLoaderData } from "react-router";
 import ProgressBar from "./ProgressBar";
 import VideoDuration from "./VideoDuration";
 import { PlaylistController } from "./PlaylistController";
-import { publish, subscribe } from "../../socket";
+import { publish, subscribe, unsubscribe } from "../../socket";
 
 let options: VideoJsPlayerOptions = {
   autoplay: true,
@@ -31,9 +31,11 @@ enum PLAYER_STATE {
 export default function VideoJSComponent({
   song,
   playlistController,
+  isRemote,
 }: {
-  song: Song;
+  song: Song | null;
   playlistController: PlaylistController;
+  isRemote: boolean;
 }) {
   const { conf, widgetId } = useLoaderData();
   const videoRef = useRef<HTMLDivElement>(null);
@@ -98,18 +100,23 @@ export default function VideoJSComponent({
   }, [player]);
 
   useEffect(() => {
-    subscribe(
-      widgetId,
-      conf.topic.playerCommands,
-      (message) => {
-        log.debug(`message: ${JSON.stringify(message)}`);
-        if (commandHandler.current){
-          commandHandler.current(message);
-        }
+    subscribe(widgetId, conf.topic.playerCommands, (message) => {
+      log.debug(`message: ${JSON.stringify(message)}`);
+      if (commandHandler.current) {
+        commandHandler.current(message);
       }
-    );
+    });
+    return () => unsubscribe(widgetId, conf.topic.playerCommands);
   }, [widgetId]);
 
+  useEffect(() => {
+    if (!isRemote || song === null) {
+      return;
+    }
+    log.debug(`sending song ${JSON.stringify(song)} to remote player`);
+    publish(conf.topic.remoteplayer, { command: "play", song: song });
+  }, [isRemote, song]);
+
   function sendAlert(title: string) {
     publish(conf.topic.player, {
       title: title,
@@ -117,6 +124,9 @@ export default function VideoJSComponent({
   }
 
   useEffect(() => {
+    if (isRemote || song === null) {
+      return;
+    }
     log.debug("Creating new player instance");
     log.debug(`playing song ${JSON.stringify(song)}`);
 
@@ -132,7 +142,9 @@ export default function VideoJSComponent({
     player.on("play", () => {
       log.debug("start playing");
       setPlayerState(PLAYER_STATE.PLAYING);
-      sendAlert(song.title);
+      if (song) {
+        sendAlert(song.title);
+      }
     });
     player.on("pause", () => {
       log.debug("pause player");
@@ -153,18 +165,20 @@ export default function VideoJSComponent({
     return () => {
       player.dispose();
     };
-  }, [song]);
+  }, [song, isRemote]);
 
   return (
     <>
-      <div
-        className="video-player"
-        data-vjs-player
-        style={hideVideo ? { visibility: "hidden", height: "1px" } : {}}
-      >
-        <div ref={videoRef} />
-      </div>
-      <ProgressBar player={player} />
+      {!isRemote && song && (
+        <div
+          className="video-player"
+          data-vjs-player
+          style={hideVideo ? { visibility: "hidden", height: "1px" } : {}}
+        >
+          <div ref={videoRef} />
+        </div>
+      )}
+      {!isRemote && <ProgressBar player={player} />}
       <div className="player-container">
         <div className="video-controls">
           <div className="video-buttons">
@@ -180,7 +194,17 @@ export default function VideoJSComponent({
               <button
                 className="btn btn-outline-light"
                 disabled={song == null}
-                onClick={() => player.play()}
+                onClick={() => {
+                  if (isRemote) {
+                    publish(conf.topic.remoteplayer, {
+                      command: "resume",
+                    });
+                    setPlayerState(PLAYER_STATE.PLAYING);
+                  }
+                  if (!isRemote) {
+                    player.play();
+                  }
+                }}
               >
                 <span className="material-symbols-sharp">play_arrow</span>
               </button>
@@ -190,7 +214,15 @@ export default function VideoJSComponent({
                 className="btn btn-outline-light"
                 disabled={song == null}
                 onClick={() => {
-                  player.pause();
+                  if (isRemote) {
+                    publish(conf.topic.remoteplayer, {
+                      command: "pause",
+                    });
+                    setPlayerState(PLAYER_STATE.PAUSED);
+                  }
+                  if (!isRemote) {
+                    player.pause();
+                  }
                 }}
               >
                 <span className="material-symbols-sharp">pause</span>
@@ -205,7 +237,7 @@ export default function VideoJSComponent({
             >
               <span className="material-symbols-sharp">skip_next</span>
             </button>
-            <VideoDuration player={player} />
+            {!isRemote && <VideoDuration player={player} />}
           </div>
         </div>
       </div>
diff --git a/src/components/MediaWidget/VideoPopupToggler.tsx b/src/components/MediaWidget/VideoPopupToggler.tsx
index 2ed47f0..c9e3573 100644
--- a/src/components/MediaWidget/VideoPopupToggler.tsx
+++ b/src/components/MediaWidget/VideoPopupToggler.tsx
@@ -7,7 +7,7 @@ enum VIDEO_IMPL {
   REMOTE,
 }
 
-export default function VideoPopupToggler({}) {
+export default function VideoPopupToggler({ onChange }: { onChange: Function}) {
   const [videoImpl, setVideoImpl] = useState<VIDEO_IMPL>(VIDEO_IMPL.EMBEDDED);
   return (
     <>
@@ -22,6 +22,7 @@ export default function VideoPopupToggler({}) {
               if (videoImpl === VIDEO_IMPL.EMBEDDED) {
                 setVideoImpl(VIDEO_IMPL.REMOTE);
               }
+              onChange();
             }}
           />
           <span className="videoImpl">{videoImpl === VIDEO_IMPL.REMOTE ? "Remote" : "Embedded"}</span>
diff --git a/src/components/PlayerPopup/PlayerPopup.tsx b/src/components/PlayerPopup/PlayerPopup.tsx
index 8dcf15d..351367d 100644
--- a/src/components/PlayerPopup/PlayerPopup.tsx
+++ b/src/components/PlayerPopup/PlayerPopup.tsx
@@ -5,38 +5,36 @@ import { v4 as uuidv4 } from "uuid";
 import { publish, subscribe } from "../../socket";
 import { useLoaderData } from "react-router";
 import { log } from "../../logging";
+import { Song } from "../MediaWidget/types";
+import { VideoJsPlayer } from "video.js";
+import { findSetting } from "../utils";
 
 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 playerRef = useRef<VideoJsPlayer>(null);
   const videoRef = useRef(null);
-  const [hideVideo, setHideVideo] = useState(true);
-  const [mediaUrl, setMediaUrl] = useState("");
-  const { recipientId, conf, widgetId } = useLoaderData();
+  const [hideVideo, setHideVideo] = useState(false);
+  const { recipientId, settings, conf, widgetId } = useLoaderData();
+  const [song, setSong] = useState<Song|null>(null);
 
   useEffect(() => {
-    if (!mediaUrl) {
-      return;
-    }
-    createPlayer(mediaUrl);
-    setHideVideo(false);
-    playerRef?.current?.src({ type: "video/youtube", src: mediaUrl });
-  }, [mediaUrl]);
+    const audioOnly = findSetting(settings, "audioOnly", false);
+    setHideVideo(audioOnly);
+  },[conf]);
 
-  function createPlayer(url: string) {
+  function createPlayer(song: Song) {
     if (playerRef.current) {
-      return;
+      playerRef.current.dispose();
+      log.debug(`cancel player creation because of existing instance`);
     }
     log.debug("Creating player");
 
@@ -45,26 +43,48 @@ export default function PlayerPopup({}) {
 
     videoElement.classList.add("vjs-big-play-centered");
     videoRef?.current?.appendChild(videoElement);
-    options.sources = [{ type: "video/youtube", src: url }];
+    options.sources = [song];
 
     playerRef.current = videojs(videoElement, options);
     playerRef.current.uuid = uuidv4();
     playerRef.current.on("ended", () => {
-			setHideVideo(true);
-			publish("/topic/finishedmedia", {});
+      log.debug(`finished playing song`);
+			publish(conf.topic.finishedmedia, song);
+      playerRef.current?.dispose();
+      playerRef.current = null;
     });
     log.debug("Player has been created");
   }
 
   useEffect(() => {
-    subscribe("test", "/topic/media", (message) => {
+    subscribe(widgetId, conf.topic.remoteplayer, (message) => {
       let json = JSON.parse(message.body);
-      log.debug(`playing ${json.url}`);
-      setMediaUrl(json.url);
+      log.debug(`playing ${JSON.stringify(json.song)}`);
+      if (json.command === "play"){
+        setSong(json.song);
+      }
+      if (json.command === "stop"){
+        playerRef.current?.dispose();
+        setSong(null);
+      }
+      if (json.command === "pause"){
+        playerRef.current?.pause();
+      }
+      if (json.command === "resume"){
+        playerRef.current?.play();
+      }
       message.ack();
     });
   }, [widgetId]);
 
+  useEffect(() => {
+    if (!song) {
+      return;
+    }
+    log.debug(`create player for new song`);
+    createPlayer(song);
+  }, [song]);
+
   return (
     <div
       className="video-player"
diff --git a/src/logic/alert/AlertController.ts b/src/logic/alert/AlertController.ts
index 216629e..d21dc5e 100644
--- a/src/logic/alert/AlertController.ts
+++ b/src/logic/alert/AlertController.ts
@@ -163,14 +163,17 @@ export class AlertController {
     this.renderTitle(alert, data);
     this.renderMessage(alert, data);
     this.voiceController?.playAudio(alert, () => {
-      this.voiceController?.pronounceTitle(alert, data, () =>
-        this.voiceController?.pronounceMessage(alert, data, () => {
-          log.debug("clearing alert");
-          this.clear();
-          this.resumePlayer();
-          ackFunction();
-          this.sendEndNotification();
-        }),
+      this.voiceController?.pronounceTitle(
+        alert,
+        data,
+        () =>
+          this.voiceController?.pronounceMessage(alert, data, () => {
+            log.debug("clearing alert");
+            this.clear();
+            this.resumePlayer();
+            ackFunction();
+            this.sendEndNotification();
+          }),
       );
     });
   }
@@ -196,11 +199,15 @@ export class AlertController {
     log.debug(
       `Amount of alert image renderers: ${this.alertImageRenderers.length}`,
     );
+    const showTime = this.findSetting(alert.properties, "imageShowTime", null);
     this.alertImageRenderers.forEach((renderer) => {
       console.log(alert.properties);
       renderer.setImage(
         `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${alert.image}`,
       );
+      if (showTime) {
+        setTimeout(() => renderer.setImage(null), showTime * 1000);
+      }
       renderer.setStyle(
         this.calculateImageStyle(
           this.findSetting(alert.properties, "imageWidth", 100),
diff --git a/src/logic/voice/VoiceController.ts b/src/logic/voice/VoiceController.ts
index 1510404..cc21459 100644
--- a/src/logic/voice/VoiceController.ts
+++ b/src/logic/voice/VoiceController.ts
@@ -56,9 +56,7 @@ export class VoiceController {
     const headerForVoice = message
       ? this.findSetting(alert.properties, "voiceTextTemplate", null)
       : this.findSetting(alert.properties, "voiceEmptyTextTemplate", null);
-    const text = headerForVoice
-      ? headerForVoice
-      : "Пользователь <username> отправил сообщение";
+    const text = headerForVoice ?? "";
     const templates = text.split("\n");
     const choosenTemplate =
       templates.length > 1
@@ -71,9 +69,13 @@ export class VoiceController {
       .replace("<minoramount>", data.amount.amount * 100)
       .replace("<streamer>", this.recipientId);
     try {
-      this.voiceByGoogle(resultText).then((audio) =>
-        this.pronounce(audio, onEndHandler),
-      );
+      if (resultText.length > 0){
+        this.voiceByGoogle(resultText).then((audio) =>
+          this.pronounce(audio, onEndHandler),
+        );
+      } else {
+        onEndHandler();
+      }
     } catch (error) {
       console.log(error);
       if (onEndHandler) {
diff --git a/src/socket.ts b/src/socket.ts
index d27fffe..27f877c 100644
--- a/src/socket.ts
+++ b/src/socket.ts
@@ -44,6 +44,11 @@ function subscribe(id: string, topic: string, onMessage: messageCallbackType) {
   log.info(`${id} connected`);
 }
 
+function unsubscribe(id: string, topic: string){
+  log.info(`Deleting subscription ${id} with topic ${topic}`);
+  socket.unsubscribe(`${id}-${topic}`);
+}
+
 function setupCommandListener(widgetId: string, reloadFn: Function) {
   subscribe(widgetId, "/topic/commands", (message) => {
     console.log(`Command: ${message.body}`);
@@ -63,4 +68,4 @@ function publish(topic: string, payload: any) {
   });
 }
 
-export { socket, subscribe, setupCommandListener, publish };
+export { socket, subscribe, unsubscribe, setupCommandListener, publish };