Feat/songs database

frontend/src/components/app/App.tsx

@@ -22,6 +22,7 @@ import {
   TimersRoute,
   TriggerRoutes,
   ConfigRoutes,
+  SongsRoutes,
 } from "@routes";
 
 function App() {
@@ -64,6 +65,7 @@ function App() {
                   path="/stream-sessions/*"
                   element={<StreamSessionRoutes />}
                 />
+                <Route path="/songs/*" element={<SongsRoutes />} />
                 <Route path="/timers/*" element={<TimersRoute />} />
                 <Route path="/triggers/*" element={<TriggerRoutes />} />
                 <Route path="/configs/*" element={<ConfigRoutes />} />

frontend/src/components/overlay/musicPlayer/MusicPlayer.tsx

@@ -143,7 +143,7 @@ export default function MusicPlayer() {
 }
 
 interface SongsPlaylistProps {
-  songs: [string, string][];
+  songs: AudioStreamDataInfo["songsInQue"];
 }
 
 function SongsPlaylist({ songs }: SongsPlaylistProps) {
@@ -155,7 +155,7 @@ function SongsPlaylist({ songs }: SongsPlaylistProps) {
             <div className="music-player-playlist-index">{index + 1}. </div>
             <div className="music-player-playlist-song-name">{songName} </div>
             <div className="music-player-playlist-requester">
-              {requester || "default"}
+              {requester?.username || "default"}
             </div>
           </div>
         ))}

frontend/src/components/songsList/PreviewSongModal.tsx

@@ -0,0 +1,84 @@
+import Modal from "@components/modal";
+import { Song } from "@services";
+import YouTube, { YouTubeProps } from "react-youtube";
+
+interface PreviewSongModalProps {
+  song: Song;
+  onCloseModal: () => void;
+}
+
+export default function PreviewSongModal({
+  song,
+  onCloseModal,
+}: PreviewSongModalProps) {
+  const opts: YouTubeProps["opts"] = {
+    width: window.innerWidth / 3,
+    height: window.innerHeight / 3,
+    playerVars: {
+      autoplay: 1,
+      enablejsapi: 1,
+      modestbranding: 1,
+    },
+  };
+
+  console.log(song.likes);
+
+  return (
+    <Modal
+      title={song.title}
+      onClose={() => onCloseModal()}
+      onSubmit={() => onCloseModal()}
+      show={!!song}
+    >
+      <div className="preview-song-modal-content-wrapper">
+        <YouTube opts={opts} videoId={song.youtubeId} />
+        <div className="song-details">
+          {song.customTitle ? (
+            <div>
+              <div>Custom title </div>
+              <div> {song.customTitle.band + " " + song.customTitle.title}</div>
+            </div>
+          ) : null}
+          <div>
+            <div>Duration </div>
+            <div>{song.duration}</div>
+          </div>
+          {Object.keys(song.likes).length > 0 ? (
+            <div>
+              <div>Likes </div>
+              <div>
+                <SongLikes likes={song.likes} />
+              </div>
+            </div>
+          ) : null}
+          {song.customId ? (
+            <div>
+              <div>Custom id </div>
+              <div>{song.customId}</div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+interface SongLikesProps {
+  likes: Record<string, number>;
+}
+
+function SongLikes({ likes }: SongLikesProps) {
+  return (
+    <>
+      {/* {Object.entries(likes).map(([id, like], index) => (
+        <div key={index}>
+          <div>{id}</div>
+          <div>{like}</div>
+        </div>
+      ))} */}
+    </>
+  );
+}
+
+// TODO: add song likes
+// TODO: add song uses users?

frontend/src/components/songsList/SongModalData.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { SongCreateData } from "@services";
+import { DispatchAction } from "./types";
+import ModalDataWrapper from "@components/modalDataWrapper/ModalDataWrapper";
+
+interface SongModalDataProps {
+  state: SongCreateData;
+  dispatch: React.Dispatch<DispatchAction>;
+}
+
+export default function SongModalData({ state, dispatch }: SongModalDataProps) {
+  return (
+    <ModalDataWrapper>
+      <div>Title</div>
+      <div>
+        <input
+          type="text"
+          value={state.title}
+          onChange={(e) =>
+            dispatch({ type: "SET_TITLE", payload: e.target.value })
+          }
+        />
+      </div>
+      <div>Youtube Id </div>
+      <div>
+        <input
+          type="text"
+          value={state.youtubeId}
+          onChange={(e) =>
+            dispatch({ type: "SET_YOUTUBE_ID", payload: e.target.value })
+          }
+        />
+      </div>
+      <div>Duration</div>
+      <div>
+        <input
+          type="number"
+          value={state.duration}
+          onChange={(e) =>
+            dispatch({ type: "SET_DURATION", payload: e.target.valueAsNumber })
+          }
+        />
+      </div>
+      <div>Custom title</div>
+      <div>
+        <input
+          type="text"
+          value={state.customTitle?.band || ""}
+          placeholder="band"
+          onChange={(e) =>
+            dispatch({
+              type: "SET_CUSTOM_TITLE",
+              payload: {
+                title: state.customTitle?.title || "",
+                band: e.target.value,
+              },
+            })
+          }
+        />
+        <input
+          type="text"
+          value={state.customTitle?.title || ""}
+          placeholder="title"
+          onChange={(e) =>
+            dispatch({
+              type: "SET_CUSTOM_TITLE",
+              payload: {
+                title: e.target.value,
+                band: state.customTitle?.band || "",
+              },
+            })
+          }
+        />
+      </div>
+      <div>Custom id</div>
+      <div>
+        <input
+          type="text"
+          value={state.customId || ""}
+          onChange={(e) =>
+            dispatch({ type: "SET_CUSTOM_ID", payload: e.target.value })
+          }
+        />
+      </div>
+    </ModalDataWrapper>
+  );
+}

frontend/src/components/songsList/SongsData.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import { Song } from "@services";
+import { TableListWrapper } from "@components/tableWrapper";
+import SortByParamsButton from "@components/SortByParamsButton";
+import { DateTooltip } from "@components/dateTooltip";
+import PreviewSongModal from "./PreviewSongModal";
+
+interface SongsDataProps {
+  data: Song[];
+  handleOnShowEditModal: (song: Song) => void;
+  handleOnShowCreateModal: (song?: Song) => void;
+  setSongIdDelete: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+export default function SongsData({
+  data,
+  handleOnShowCreateModal,
+  handleOnShowEditModal,
+  setSongIdDelete,
+}: SongsDataProps) {
+  const [previewedSong, setPrevievedSong] = useState<Song | null>(null);
+  return (
+    <>
+      <TableListWrapper
+        theadChildren={
+          <tr>
+            <th>
+              Actions
+              <button
+                className="common-button primary-button"
+                onClick={(e) => handleOnShowCreateModal()}
+              >
+                New
+              </button>
+            </th>
+            <th>
+              <SortByParamsButton buttonText="Title" sortBy="title" />
+            </th>
+            <th>
+              <SortByParamsButton buttonText="Youtube Id" sortBy="youtubeId" />
+            </th>
+            <th>Custom Id</th>
+            <th>
+              <SortByParamsButton buttonText="Uses" sortBy="uses" />
+            </th>
+            <th>
+              <SortByParamsButton buttonText="botUses" sortBy="botUses" />
+            </th>
+            <th>
+              <SortByParamsButton
+                buttonText="SR Uses"
+                sortBy="songRequestUses"
+              />
+            </th>
+            <th>
+              <SortByParamsButton buttonText="Duration" sortBy="duration" />
+            </th>
+            <th>
+              <SortByParamsButton buttonText="Created At" sortBy="createdAt" />
+            </th>
+            <th>
+              <SortByParamsButton buttonText="Updated at" sortBy="updatedAt" />
+            </th>
+            <th>Who added</th>
+          </tr>
+        }
+        tbodyChildren={data.map((song, index) => {
+          return (
+            <tr
+              key={index}
+              className="songs-data-table-song-details"
+              onClick={(e) => {
+                setPrevievedSong(song);
+              }}
+            >
+              <td>
+                <div className="songs-data-table-actions">
+                  <button
+                    className="common-button primary-button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleOnShowEditModal(song);
+                    }}
+                  >
+                    Edit
+                  </button>
+                  <button
+                    className="common-button danger-button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setSongIdDelete(song._id);
+                    }}
+                  >
+                    Delete
+                  </button>
+                </div>
+              </td>
+              <td>{song.title}</td>
+              <td>{song.youtubeId}</td>
+              <td>{song.customId || ""}</td>
+              <td>{song.uses}</td>
+              <td>{song.botUses}</td>
+              <td>{song.songRequestUses}</td>
+              <td>{song.duration}</td>
+              <td>
+                <DateTooltip date={song.createdAt} />
+              </td>
+              <td>
+                <DateTooltip date={song.updatedAt} />
+              </td>
+              <td>{song.whoAdded.username}</td>
+            </tr>
+          );
+        })}
+      ></TableListWrapper>
+
+      {previewedSong ? (
+        <PreviewSongModal
+          song={previewedSong}
+          onCloseModal={() => setPrevievedSong(null)}
+        />
+      ) : null}
+    </>
+  );
+}