add more options to Reel

OpenDonationAssistant · May 17, 2024 · f2e764f · f2e764f
1 parent 6267b41
commit f2e764f
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 99 deletions.
diff --git a/src/components/ConfigurationPage/WidgetConfiguration.tsx b/src/components/ConfigurationPage/WidgetConfiguration.tsx
@@ -10,7 +10,6 @@ import "./css/WidgetSettings.css";
 import PaymentAlertSettings from "./settings/PaymentAlertsSettings";
 import { WidgetsContext } from "./WidgetsContext";
 import BaseSettings from "./settings/BaseSettings";
-import DonatersTopListSettings from "./settings/DonatersTopListSettings";
 import { socket } from "../../socket";
 import ReelWidgetSettings from "../../pages/Reel/ReelWidgetSettings";
 import { log } from "../../logging";
@@ -26,12 +25,10 @@ function getSettingsWidget(id: string, type: string, onChange: Function) {
   switch (type) {
     case "payment-alerts":
       return <PaymentAlertSettings id={id} onChange={onChange} />;
-    case "donaters-top-list":
-      return <DonatersTopListSettings id={id} onChange={onChange} />;
     case "reel":
-      return <ReelWidgetSettings id={id} onChange={onChange} />;
+      return <ReelWidgetSettings id={id}/>;
     default:
-      return <BaseSettings id={id} onChange={onChange} />;
+      return <BaseSettings id={id}/>;
   }
 }
 

diff --git a/src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx b/src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx
diff --git a/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.module.css b/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.module.css
diff --git a/src/components/ConfigurationPage/widgetsettings/ReelWidgetSettings.tsx b/src/components/ConfigurationPage/widgetsettings/ReelWidgetSettings.tsx
@@ -67,6 +67,30 @@ export class ReelWidgetSettings extends AbstractWidgetSettings {
           "Условие",
           "general",
         ),
+        new NumberProperty(
+          widgetId,
+          "perView",
+          "number",
+          5,
+          "Отображаемое кол-во карточек",
+          "general",
+        ),
+        new NumberProperty(
+          widgetId,
+          "speed",
+          "number",
+          250,
+          "Время (мс) на один поворот",
+          "general",
+        ),
+        new NumberProperty(
+          widgetId,
+          "time",
+          "number",
+          10,
+          "Время (сек), сколько крутить до выпадения результата",
+          "general",
+        ),
         new NumberProperty(
           widgetId,
           "requiredAmount",

diff --git a/src/components/utils.ts b/src/components/utils.ts
@@ -5,17 +5,3 @@ export function findSetting(settings, key: string, defaultValue: any | null) {
   }
   return defaultValue;
 }
-//
-// export function hider(ref, hideFunction) {
-//   useEffect(() => {
-//     function handleClickOutside(event) {
-//       if (ref.current && !ref.current.contains(event.target)) {
-//         hideFunction.apply({});
-//       }
-//     }
-//     document.addEventListener("mousedown", handleClickOutside);
-//     return () => {
-//       document.removeEventListener("mousedown", handleClickOutside);
-//     };
-//   }, [ref]);
-// }
diff --git a/src/pages/Reel/ReelWidget.module.css b/src/pages/Reel/ReelWidget.module.css
@@ -2,6 +2,8 @@
   text-align: center;
   padding-top: 20px;
   padding-bottom: 20px;
+  padding-left: 5px;
+  padding-right: 5px;
   font-size: 30px;
   height: min-content;
 }
@@ -20,6 +22,11 @@
   animation: blinker 1s linear infinite;
 }
 
+.notactive {
+  /* margin-top: 20px; */
+  /* margin-bottom: 20px; */
+}
+
 @keyframes blinker {
   50% {
     opacity: 0;

diff --git a/src/pages/Reel/ReelWidget.tsx b/src/pages/Reel/ReelWidget.tsx
@@ -22,19 +22,21 @@ export default function ReelWidget({}) {
   const glide = useRef<Glide | null>(null);
   const [active, setActive] = useState<string | null>(null);
   const [highlight, setHighlight] = useState<boolean>(false);
+  const [options, setOptions] = useState<string[]>([]);
 
   function handleSelection(selection: string) {
     if (!glideRef.current?.classList.contains("hidden")) {
       setTimeout(() => handleSelection(selection), 40000);
       return;
     }
     setActive(selection);
+    const time = findSetting(settings, "time", 10) * 1000;
     setTimeout(() => {
       log.debug(`clear active and highlight`);
       setActive(null);
       setHighlight(false);
       glideRef.current?.classList.add("hidden");
-    }, 20000);
+    }, time + 20000);
   }
 
   useEffect(() => {
@@ -52,62 +54,55 @@ export default function ReelWidget({}) {
   }, [widgetId]);
 
   useEffect(() => {
-    if (!glideRef) {
+    if (!glideRef || !options) {
       return;
     }
 
+    const perView = findSetting(settings, "perView", 5);
+    const speed = findSetting(settings, "speed", 250);
     glide.current = new Glide(".glide", {
       type: "carousel",
-      perView: options.length,
+      perView: perView,
       rewind: true,
-      animationDuration: 140,
+      animationDuration: speed,
       focusAt: "center",
     }).mount();
-  }, [glideRef]);
+  }, [glideRef, options]);
 
   useEffect(() => {
     if (!active) {
       return;
     }
     glideRef.current?.classList.remove("hidden");
     log.debug(`selecting ${active} for reel`);
-    setupScroll(
-      glide.current,
-      40,
-      () => {
-        const index = options.findIndex((option) => option === active);
-        log.debug(`highlight ${index} from ${JSON.stringify(options)}`);
-        glide.current?.update({ startAt: index });
-        setHighlight(true);
-      },
-      options.length,
-    );
+    const index = options.findIndex((option) => option === active);
+    log.debug({ options: options, index: index }, "highlight");
+    const speed = findSetting(settings, "speed", 250);
+    const time = findSetting(settings, "time", 10) * 1000;
+    glide.current?.update({autoplay: speed});
+    setTimeout(() => {
+      const index = options.findIndex((option) => option === active);
+      log.debug({ options: options, index: index }, "highlight");
+      glide.current?.update({ autoplay: false, startAt: index });
+      setHighlight(true);
+    }, time);
   }, [active]);
 
-  function setupScroll(
-    glide: any,
-    iteration: number,
-    result: Function,
-    itemsCount: number,
-  ) {
-    if (iteration < 1) {
-      result();
-      return;
-    }
-    const selected = getRndInteger(0, itemsCount);
-    const scroll = () => {
-      glide.go(">");
-      glide.go(">");
-    };
-    console.log(`selected: ${selected}`);
-    if (iteration === 1) {
-      console.log(`setActive to ${selected}`);
+  useEffect(() => {
+    const shuffle = findSetting(settings, "shuffle", true);
+    let options = structuredClone(findSetting(settings, "optionList", []));
+    if (shuffle) {
+      let shuffled = [];
+      const count = options.length;
+      for (let i = 0; i < count; i++) {
+        const index = getRndInteger(0, options.length);
+        shuffled.push(options[index]);
+        options.splice(index, 1);
+      }
+      options = shuffled;
     }
-    setTimeout(() => {
-      scroll();
-      setupScroll(glide, iteration - 1, result, itemsCount);
-    }, 140);
-  }
+    setOptions(options);
+  }, [widgetId]);
 
   function getRndInteger(min: number, max: number): number {
     return Math.floor(Math.random() * (max - min)) + min;
@@ -121,8 +116,8 @@ export default function ReelWidget({}) {
     fontFamily: font ? font : "unset",
     color: color,
   };
-  const options = findSetting(settings, "optionList", []);
   const borderColor = findSetting(settings, "borderColor", "red");
+  const borderWidth = findSetting(settings, "borderWidth", 30);
   const selectionColor = findSetting(settings, "selectionColor", "green");
   const slideStyle = {
     borderColor: borderColor,
@@ -133,6 +128,7 @@ export default function ReelWidget({}) {
   function calcItemStyle(option: string) {
     const style = {};
     style.borderColor = borderColor;
+    style.borderWidth = `${borderWidth}px`;
     if (highlight && active === option) {
       style.backgroundColor = selectionColor;
     } else {
@@ -161,7 +157,7 @@ export default function ReelWidget({}) {
                   key={option}
                   style={calcItemStyle(option)}
                   className={`${classes.reelitemcontainer} ${
-                    highlight && active === option ? classes.active : ""
+                    highlight && active === option ? classes.active : classes.notactive
                   }`}
                 >
                   <li

diff --git a/src/pages/Reel/ReelWidgetSettings.tsx b/src/pages/Reel/ReelWidgetSettings.tsx
@@ -1,39 +1,26 @@
-import React, { ChangeEvent, useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import BaseSettings from "../../components/ConfigurationPage/settings/BaseSettings";
 import { WidgetsContext } from "../../components/ConfigurationPage/WidgetsContext";
 import { log } from "../../logging";
 import classes from "./ReelWidgetSettings.module.css";
 import { useLoaderData } from "react-router";
 import { publish } from "../../socket";
-import axios from "axios";
 import { WidgetData } from "../../types/WidgetData";
 
-export default function ReelWidgetSettings({
-  id,
-  onChange,
-}: {
-  id: string;
-  onChange: Function;
-}) {
-  const { config, updateConfig } = useContext(WidgetsContext);
+export default function ReelWidgetSettings({ id }: { id: string }) {
+  const { config } = useContext(WidgetsContext);
   const [optionList, setOptionList] = useState<string[]>([]);
   const { conf } = useLoaderData() as WidgetData;
-  const [tab, setTab] = useState<string>("");
-  const [backgroundImage, setBackgroundImage] = useState<string>("");
 
   function getProperty(name: string): any {
     return config.get(id)?.properties.find((prop) => prop.name === name)?.value;
   }
 
-  useEffect(() => {
-    setBackgroundImage(getProperty("backgroundImage") ?? "");
-  }, [config]);
-
   useEffect(() => {
     log.debug(`running effect for updating option list`);
     setOptionList((oldList) => {
       const newList = getProperty("optionList");
-      log.debug({options: newList}, `updating option list`);
+      log.debug({ options: newList }, `updating option list`);
       return newList;
     });
   }, [config]);
@@ -59,7 +46,7 @@ export default function ReelWidgetSettings({
       >
         Крутануть
       </button>
-      <BaseSettings id={id}/>
+      <BaseSettings id={id} />
     </>
   );
 }