fix styles, add visual draft for 'Add options to roulette' button

OpenDonationAssistant · Feb 11, 2024 · cab09ec · cab09ec
1 parent bdd035e
commit cab09ec
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 90 deletions.
diff --git a/src/components/ConfigurationPage/WidgetConfiguration.tsx b/src/components/ConfigurationPage/WidgetConfiguration.tsx
@@ -13,6 +13,7 @@ import BaseSettings from "./settings/BaseSettings";
 import DonatersTopListSettings from "./settings/DonatersTopListSettings";
 import DonationTimerSettings from "./settings/DonationTimerSettings";
 import { socket } from "../../socket";
+import RouletteWidgetSettings from "../../pages/Reel/RouletteWidgetSettings";
 
 interface WidgetConfigurationProps {
   id: string;
@@ -27,8 +28,8 @@ function getSettingsWidget(id: string, type: string, onChange: Function) {
       return <PaymentAlertSettings id={id} onChange={onChange} />;
     case "donaters-top-list":
       return <DonatersTopListSettings id={id} onChange={onChange} />;
-    case "donation-timer":
-      return <BaseSettings id={id} onChange={onChange} />;
+    case "roulette":
+      return <RouletteWidgetSettings 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
@@ -223,6 +223,15 @@ const defaultSettings = {
         value: "#000000",
         displayName: "Цвет",
       },
+      {
+        name: "optionList",
+        type: "custom",
+        value: [
+          "Ничего",
+          "Выигрыш"
+        ],
+        displayName: "Призы",
+      }
     ],
   },
 };

diff --git a/src/components/ConfigurationPage/css/WidgetSettings.css b/src/components/ConfigurationPage/css/WidgetSettings.css
@@ -41,6 +41,9 @@
   top: 10px;
   font-family: "Martian Mono", monospace;
 }
+.payment-alert-settings .widget-settings-name {
+  width: 50%;
+}
 
 .widget-settings-value:focus-visible,
 .widget-settings-value:focus {
@@ -53,6 +56,15 @@
   border-image-slice: 1;
 }
 
+.widget-settings-value:hover {
+  cursor: pointer;
+}
+
+.widget-settings-item,
+.widget-settings-item label:hover {
+  cursor: default;
+}
+
 .widget-settings-value {
   font-family: inherit;
   width: 100%;
@@ -71,6 +83,7 @@
 .textarea-container {
   width: 100%;
   text-align: right;
+  padding-top: 5px;
 }
 
 .widget-settings-value {
@@ -82,6 +95,7 @@
 
 textarea.widget-settings-value {
   text-align: left;
+  width: 50%;
 }
 
 .widget-settings-value.select {
@@ -224,4 +238,6 @@ textarea.widget-settings-value {
 .widget-settings-radiocontainer {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  text-align: right;
 }
diff --git a/src/components/ConfigurationPage/settings/BaseSettings.tsx b/src/components/ConfigurationPage/settings/BaseSettings.tsx
@@ -34,13 +34,17 @@ export default function BaseSettings({
   return (
     <>
       {config.get(id)?.properties?.map((prop) => (
+      <>
+        {(prop.type !== "custom" || customHandler) && (
         <div key={prop.name} className="widget-settings-item">
-          <label
-            htmlFor={`${id}_${prop.name}`}
-            className="widget-settings-name"
-          >
-            {prop.displayName}
-          </label>
+          {prop.type !== "custom" && (
+            <label
+              htmlFor={`${id}_${prop.name}`}
+              className="widget-settings-name"
+            >
+              {prop.displayName}
+            </label>
+          )}
           {(!prop.type || prop.type == "string") && (
             <input
               id={`${id}_${prop.name}`}
@@ -86,7 +90,19 @@ export default function BaseSettings({
           ) : (
             <></>
           )}
+          {prop.type === "number" && (
+            <>
+              <input
+                value={prop.value}
+                type="number"
+                className="widget-settings-value"
+                onChange={(e) => update(prop.name, e.target.value)}
+              />
+            </>
+          )}
         </div>
+        )}
+        </>
       ))}
     </>
   );

diff --git a/src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx b/src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx
@@ -1,6 +1,7 @@
 import React, { ChangeEvent, useContext } from "react";
 import { WidgetsContext } from "../WidgetsContext";
 import ColorPicker from "./ColorPicker";
+import BaseSettings from "./BaseSettings";
 
 const fonts = [
   "Roboto",
@@ -67,33 +68,12 @@ export default function DonatersTopListSettings({
 
   return (
     <>
+      <BaseSettings id={id} onChange={onChange}/>
       {config.get(id)?.properties?.map((prop) => (
+        <>
+        {prop.type === "custom" && (
         <div key={prop.name} className="widget-settings-item">
-          <div className="widget-settings-name">{prop.displayName}</div>
-          {(!prop.type || prop.type == "string") && prop.type != "custom" && (
-            <input
-              value={prop.value}
-              className="widget-settings-value"
-              onChange={(e) => update(prop.name, e.target.value)}
-            />
-          )}
-          {prop.type === "fontselect" && (
-            <select
-              value={prop.value}
-              className="widget-settings-value select"
-              onChange={(e) => update(prop.name, e.target.value)}
-            >
-              {fonts.sort().map((font) => (
-                <option key={font}>{font}</option>
-              ))}
-            </select>
-          )}
-          {prop.type === "color" && (
-            <ColorPicker
-              value={prop.value}
-              onChange={(value) => update(prop.name, value)}
-            />
-          )}
+          <label className="widget-settings-name">{prop.displayName}</label>
           {prop.name === "type" && (
             <select
               value={prop.value}
@@ -149,28 +129,11 @@ export default function DonatersTopListSettings({
               </div>
             </>
           )}
-          {prop.type === "text" && (
-            <>
-              <textarea
-                style={{ width: "100%" }}
-                className="widget-settings-value"
-                value={prop.value}
-                onChange={(e) => update(prop.name, e.target.value)}
-              />
-            </>
-          )}
-          {prop.type === "number" && (
-            <>
-              <input
-                value={prop.value}
-                type="number"
-                className="widget-settings-value"
-                onChange={(e) => update(prop.name, e.target.value)}
-              />
-            </>
-          )}
         </div>
-      ))}
+        )}
+        </>
+      ))
+      }
     </>
   );
 }
diff --git a/src/components/MediaWidget/PlaylistController.ts b/src/components/MediaWidget/PlaylistController.ts
@@ -63,30 +63,36 @@ 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();
-    });
+    subscribe(
+      `${widgetId}_playlistController`,
+      conf.topic.remoteplayerfeedback,
+      (message) => {
+        const feedback = JSON.parse(message.body);
+        if (feedback.state === "finished") {
+          this.current.markListened(feedback.song.id);
+        }
+        message.ack();
+      },
+    );
   }
 
-  handleNewRequestedSongEvent(song:Song){
+  handleNewRequestedSongEvent(song: Song) {
     this.playlists.get(PLAYLIST_TYPE.REQUESTED)?.addSong(song);
     if (this.current.type() == PLAYLIST_TYPE.PERSONAL) {
       this.switchTo(PLAYLIST_TYPE.REQUESTED);
     }
   }
 
-  previousSong(){
+  previousSong() {
     const index = this.current.index();
     if (index != null && index > 0) {
       this.current.setIndex(index - 1);
     }
   }
 
-  finishSong(){
+  finishSong() {
     const song = this.current.song();
-    if (song?.id){
+    if (song?.id) {
       this.current.markListened(song?.id);
     }
   }
@@ -98,7 +104,11 @@ export class PlaylistController {
   }
 
   switchTo(type: PLAYLIST_TYPE) {
-    log.debug(`switching to ${type == PLAYLIST_TYPE.PERSONAL ? "personal" : "requested"}`);
+    log.debug(
+      `switching to ${
+        type == PLAYLIST_TYPE.PERSONAL ? "personal" : "requested"
+      }`,
+    );
     const playlist = this.playlists.get(type);
     if (playlist) {
       this.playlistRenderers.forEach((renderer) => {

diff --git a/src/components/MediaWidget/PopupPlayerImpl.ts b/src/components/MediaWidget/PopupPlayerImpl.ts
diff --git a/src/components/MediaWidget/VideoJSComponent.tsx b/src/components/MediaWidget/VideoJSComponent.tsx
@@ -115,6 +115,7 @@ export default function VideoJSComponent({
     }
     log.debug(`sending song ${JSON.stringify(song)} to remote player`);
     publish(conf.topic.remoteplayer, { command: "play", song: song });
+    setPlayerState(PLAYER_STATE.PLAYING);
   }, [isRemote, song]);
 
   function sendAlert(title: string) {
@@ -127,7 +128,6 @@ export default function VideoJSComponent({
     if (isRemote || song === null) {
       return;
     }
-    log.debug("Creating new player instance");
     log.debug(`playing song ${JSON.stringify(song)}`);
 
     const videoElement = document.createElement("video-js");

diff --git a/src/components/PlayerPopup/PlayerPopup.tsx b/src/components/PlayerPopup/PlayerPopup.tsx
@@ -24,12 +24,12 @@ export default function PlayerPopup({}) {
   const videoRef = useRef(null);
   const [hideVideo, setHideVideo] = useState(false);
   const { recipientId, settings, conf, widgetId } = useLoaderData();
-  const [song, setSong] = useState<Song|null>(null);
+  const [song, setSong] = useState<Song | null>(null);
 
   useEffect(() => {
     const audioOnly = findSetting(settings, "audioOnly", false);
     setHideVideo(audioOnly);
-  },[conf]);
+  }, [conf]);
 
   function createPlayer(song: Song) {
     if (playerRef.current) {
@@ -49,7 +49,10 @@ export default function PlayerPopup({}) {
     playerRef.current.uuid = uuidv4();
     playerRef.current.on("ended", () => {
       log.debug(`finished playing song`);
-			publish(conf.topic.finishedmedia, song);
+      publish(conf.topic.remoteplayerfeedback, {
+        state: "finished",
+        song: song,
+      });
       playerRef.current?.dispose();
       playerRef.current = null;
     });
@@ -60,17 +63,17 @@ export default function PlayerPopup({}) {
     subscribe(widgetId, conf.topic.remoteplayer, (message) => {
       let json = JSON.parse(message.body);
       log.debug(`playing ${JSON.stringify(json.song)}`);
-      if (json.command === "play"){
+      if (json.command === "play") {
         setSong(json.song);
       }
-      if (json.command === "stop"){
+      if (json.command === "stop") {
         playerRef.current?.dispose();
         setSong(null);
       }
-      if (json.command === "pause"){
+      if (json.command === "pause") {
         playerRef.current?.pause();
       }
-      if (json.command === "resume"){
+      if (json.command === "resume") {
         playerRef.current?.play();
       }
       message.ack();

diff --git a/src/pages/Reel/RouletteWidgetSettings.module.css b/src/pages/Reel/RouletteWidgetSettings.module.css
@@ -0,0 +1,18 @@
+.optionscontainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
+.addoptionsbutton {
+  border: none;
+  background-color: initial;
+  color: #684aff;
+}
+
+.addbuttoncontainer {
+  width: 50%;
+  text-align: center;
+  padding-top: 10px;
+}