add link popup

OpenDonationAssistant · Mar 21, 2024 · fc1fc5e · fc1fc5e
1 parent 1c6eb93
commit fc1fc5e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 15 deletions.
diff --git a/src/components/MediaWidget/MediaWidget.css b/src/components/MediaWidget/MediaWidget.css
@@ -82,15 +82,21 @@
 
 .link-popup {
   position: absolute;
-  width: 90%;
-  min-height: 30px;
-  background-color: white;
+  width: 100%;
+  height: 100%;
+  bottom: 0px;
+  background: rgba(30, 30, 30, 0.9);
+  z-index: 3;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .link-popup input {
-  position: absolute;
   top: 50%;
-  width: 100%;
+  width: 98%;
 }
 
 .item-buttons {

diff --git a/src/components/MediaWidget/PlaylistComponent.tsx b/src/components/MediaWidget/PlaylistComponent.tsx
@@ -9,13 +9,13 @@ import { Song } from "./types";
 import { WidgetData } from "../../types/WidgetData";
 
 export default function PlaylistComponent({
-  playlist
+  playlist,
 }: {
-  playlist: Playlist
+  playlist: Playlist;
 }) {
   const { settings, widgetId } = useLoaderData() as WidgetData;
   const activeRef = useRef<HTMLDivElement>(null);
-  const [current, setCurrent] = useState<number|null>(null);
+  const [current, setCurrent] = useState<number | null>(null);
   const [songs, setSongs] = useState<Song[]>([]);
   const [urlToCopy, setUrlToCopy] = useState<string>("");
 
@@ -36,13 +36,13 @@ export default function PlaylistComponent({
   useEffect(() => {
     playlist.addListener({
       id: `${widgetId}_playlist`,
-      trigger(playlist: Playlist){
+      trigger(playlist: Playlist) {
         setSongs(playlist.songs());
         setCurrent(playlist.index());
-      }
+      },
     });
     // todo cleanup function
-  },[playlist]);
+  }, [playlist]);
 
   useEffect(() => {
     if (activeRef.current) {
@@ -96,7 +96,7 @@ export default function PlaylistComponent({
                           <button
                             className="btn btn-outline-light play"
                             onClick={() => {
-                              const id = playlist.song()?.id
+                              const id = playlist.song()?.id;
                               if (id) {
                                 playlist.markListened(id);
                               }
@@ -110,7 +110,7 @@ export default function PlaylistComponent({
                           <button
                             className="btn btn-outline-light share"
                             onClick={() => {
-                              navigator.clipboard.writeText(song.src)
+                              navigator.clipboard.writeText(song.src);
                               setUrlToCopy(song.src);
                             }}
                           >
@@ -167,6 +167,15 @@ export default function PlaylistComponent({
                 <span className="material-symbols-sharp">add</span>
               </button>
             </div>
+            <div className={`link-popup ${urlToCopy ? "" : "hidden"}`}>
+              <input value={urlToCopy} />
+              <button
+                id="close-add-media-popup"
+                onClick={() => setUrlToCopy("")}
+              >
+                <span className="material-symbols-sharp">close</span>
+              </button>
+            </div>
             <AddMediaPopup playlist={playlist} />
           </div>
         )}

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -15,7 +15,7 @@ export default function Tabs({
 
   useEffect(() => {
     const settings = config.get(widgetId);
-    log.debug({settings: settings},"trying to find first tab");
+    log.debug({ settings: settings }, "trying to find first tab");
     if (!settings) {
       return;
     }
@@ -25,7 +25,7 @@ export default function Tabs({
       onChange(firstTab.value);
       setTab(firstTab.value);
     }
-  },[config]);
+  }, [config]);
 
   const tabs = () => {
     const settings = config.get(widgetId);