From 16da4f95951af4f760d6fa886e53160bd4c328a2 Mon Sep 17 00:00:00 2001
From: stCarolas <stcarolas@gmail.com>
Date: Wed, 19 Jun 2024 12:04:55 +0300
Subject: [PATCH] get title for manually added video

---
 src/components/MediaWidget/AddMediaPopup.tsx  | 40 ++++++++++++++-----
 src/components/MediaWidget/MediaWidget.css    |  4 --
 .../MediaWidget/PlaylistComponent.tsx         |  6 ++-
 src/i18n.js                                   |  2 +
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/components/MediaWidget/AddMediaPopup.tsx b/src/components/MediaWidget/AddMediaPopup.tsx
index 2189a06..ead5eae 100644
--- a/src/components/MediaWidget/AddMediaPopup.tsx
+++ b/src/components/MediaWidget/AddMediaPopup.tsx
@@ -7,6 +7,8 @@ import { Playlist } from "../../logic/playlist/Playlist";
 import { Song } from "./types";
 import { WidgetData } from "../../types/WidgetData";
 
+const youtube_url_regexp = /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube(-nocookie)?\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/g;
+
 export default function AddMediaPopup({ playlist }: { playlist: Playlist }) {
   const [showNewMediaPopup, setShowNewMediaPopup] = useState(false);
   const [savedPlaylists, setSavedPlaylists] = useState<Playlist[]>([]);
@@ -23,6 +25,30 @@ export default function AddMediaPopup({ playlist }: { playlist: Playlist }) {
     return () => document.removeEventListener("toggleAddMediaPopup", toggle);
   }, [showNewMediaPopup]);
 
+  function addVideo(videoId: string) {
+    return axios
+      .get(
+        `${process.env.REACT_APP_MEDIA_API_ENDPOINT}/media/available?videoId=${videoId}`,
+      )
+      .then((data) => data.data)
+      .then((list) => {
+        const songs = list.map((video) => {
+          let id = uuidv4();
+          let song = {
+            src: `https://www.youtube.com/watch?v=${videoId}`,
+            type: "video/youtube",
+            id: id,
+            originId: videoId, // todo remove originId?
+            owner: recipientId,
+            title: video.snippet.title,
+          };
+          return song;
+        });
+        songs.forEach((song: Song) => playlist.addSong(song));
+        return list.title;
+      });
+  }
+
   function addPlaylistItems(playlistId: string) {
     return axios
       .get(
@@ -42,7 +68,7 @@ export default function AddMediaPopup({ playlist }: { playlist: Playlist }) {
           };
           return song;
         });
-        songs.forEach((song:Song) => playlist.addSong(song));
+        songs.forEach((song: Song) => playlist.addSong(song));
         return list.title;
       });
   }
@@ -74,16 +100,8 @@ export default function AddMediaPopup({ playlist }: { playlist: Playlist }) {
         localStorage.setItem("playlists", JSON.stringify(filteredPlaylists));
       });
     } else {
-      let id = uuidv4();
-      let song = {
-        src: url,
-        type: "video/youtube",
-        id: id,
-        owner: recipientId,
-        title: "Manually added video",
-        originId: null
-      };
-      playlist.addSong(song);
+      const videoId = youtube_url_regexp.exec(url)?.at(6);
+      videoId && addVideo(videoId);
     }
     document.getElementById("new-media-input").value = "";
     setShowNewMediaPopup(false);
diff --git a/src/components/MediaWidget/MediaWidget.css b/src/components/MediaWidget/MediaWidget.css
index e9b7d3a..10522b9 100644
--- a/src/components/MediaWidget/MediaWidget.css
+++ b/src/components/MediaWidget/MediaWidget.css
@@ -250,10 +250,6 @@
   margin-top: 10px;
 }
 
-.add-button-container button {
-  border-color: rgb(170, 170, 170);
-}
-
 iframe {
   /* width: 500px !important; */
   height: 300px !important;
diff --git a/src/components/MediaWidget/PlaylistComponent.tsx b/src/components/MediaWidget/PlaylistComponent.tsx
index 6abe3fb..3b372dc 100644
--- a/src/components/MediaWidget/PlaylistComponent.tsx
+++ b/src/components/MediaWidget/PlaylistComponent.tsx
@@ -7,6 +7,7 @@ import AddMediaPopup from "./AddMediaPopup";
 import { Playlist } from "../../logic/playlist/Playlist";
 import { Song } from "./types";
 import { WidgetData } from "../../types/WidgetData";
+import { useTranslation } from "react-i18next";
 
 export default function PlaylistComponent({
   playlist,
@@ -18,6 +19,7 @@ export default function PlaylistComponent({
   const [current, setCurrent] = useState<number | null>(null);
   const [songs, setSongs] = useState<Song[]>([]);
   const [urlToCopy, setUrlToCopy] = useState<string>("");
+  const { t } =  useTranslation();
 
   function onDragEnd(result) {
     if (!result.destination) {
@@ -156,14 +158,14 @@ export default function PlaylistComponent({
             </ul>
             <div className="add-button-container">
               <button
-                className="btn btn-outline-light add"
+                className="oda-btn-default"
                 onClick={() => {
                   document.dispatchEvent(
                     new CustomEvent("toggleAddMediaPopup"),
                   );
                 }}
               >
-                <span className="material-symbols-sharp">add</span>
+                {t("widget-player-add-video")}
               </button>
             </div>
             <div className={`link-popup ${urlToCopy ? "" : "hidden"}`}>
diff --git a/src/i18n.js b/src/i18n.js
index af519df..73e9303 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -127,6 +127,7 @@ i18n
           "widget-alert-message-font-size":"Font size",
           "widget-alert-message-color":"Color",
           "widget-alert-use-greenscreen":"Use greenscreen",
+          "widget-player-add-video":"Add video or playlist",
           "All":"All",
           "Top":"Top",
           "Last":"Last",
@@ -254,6 +255,7 @@ i18n
           "widget-alert-message-font-size":"Размер шрифта",
           "widget-alert-message-color":"Цвет",
           "widget-alert-use-greenscreen":"Использовать greenscreen",
+          "widget-player-add-video":"Добавить видео или плейлист",
           "All":"Все",
           "Top":"Топ",
           "Last":"Последние",