diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx index ce8e747..f1cd7e2 100644 --- a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx +++ b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx @@ -16,6 +16,64 @@ interface PaymentAlertSettingsProps { onChange: Function; } +export const APPEARANCE_ANIMATIONS = [ + "bounce", + "flash", + "pulse", + "rubberBand", + "shakeY", + "shakeX", + "headShake", + "swing", + "wobble", + "jello", + "heartBeat", + "backInDown", + "backInLeft", + "backInRight", + "backInUp", + "bounceIn", + "bounceInDown", + "bounceInLeft", + "bounceInRight", + "bounceInUp", + "fadeIn", + "fadeInDown", + "fadeInDownBig", + "fadeInLeft", + "fadeInLeftBig", + "fadeInRight", + "fadeInRightBig", + "fadeInUp", + "fadeInUpBig", + "fadeInTopLeft", + "fadeInTopRight", + "fadeInBottomLeft", + "fadeInBottomRight", + "flip", + "flinInX", + "flipInY", + "lightSpeedInRight", + "lightSpeedInLeft", + "rotateIn", + "rotateInDownLeft", + "rotateInDownRight", + "rotateInUpLeft", + "rotateInUpRight", + "hinge", + "jackInTheBox", + "rollIn", + "zoomIn", + "zoomInDown", + "zoomInLeft", + "zoomInRight", + "zoomInUp", + "slideInDown", + "slideInLeft", + "slideInRight", + "slideInUp", + ]; + export default function PaymentAlertSettings({ id, onChange, @@ -479,64 +537,7 @@ export default function PaymentAlertSettings({ alert.properties.find((prop) => prop.name === "appearance") ?.value, "appearance", - [ - "bounce", - "flash", - "pulse", - "rubberBand", - "shakeY", - "shakeX", - "headShake", - "swing", - "wobble", - "jello", - "heartBeat", - "backInDown", - "backInLeft", - "backInRight", - "backInUp", - "bounceIn", - "bounceInDown", - "bounceInLeft", - "bounceInRight", - "bounceInUp", - "fadeIn", - "fadeInDown", - "fadeInDownBig", - "fadeInLeft", - "fadeInLeftBig", - "fadeInRight", - "fadeInRightBig", - "fadeInUp", - "fadeInUpBig", - "fadeInTopLeft", - "fadeInTopRight", - "fadeInBottomLeft", - "fadeInBottomRight", - "flip", - "flinInX", - "flipInY", - "lightSpeedInRight", - "lightSpeedInLeft", - "rotateIn", - "rotateInDownLeft", - "rotateInDownRight", - "rotateInUpLeft", - "rotateInUpRight", - "hinge", - "jackInTheBox", - "rollIn", - "zoomIn", - "zoomInDown", - "zoomInLeft", - "zoomInRight", - "zoomInUp", - "slideInDown", - "slideInLeft", - "slideInRight", - "slideInUp", - "none", - ], + [...APPEARANCE_ANIMATIONS,"random","none"] ).markup((widgetId, name, value) => update("appearance", value, index), ), diff --git a/src/logic/alert/AlertController.ts b/src/logic/alert/AlertController.ts index 8fc2a02..504c7d7 100644 --- a/src/logic/alert/AlertController.ts +++ b/src/logic/alert/AlertController.ts @@ -1,3 +1,4 @@ +import { APPEARANCE_ANIMATIONS } from "../../components/ConfigurationPage/settings/PaymentAlertsSettings"; import { AnimatedFontProperty } from "../../components/ConfigurationPage/widgetproperties/AnimatedFontProperty"; import { IFontLoader } from "../../components/FontLoader/IFontLoader"; import { log } from "../../logging"; @@ -219,6 +220,12 @@ export class AlertController { this.showing = false; } + + private getRndInteger(min: number, max: number): number { + return Math.floor(Math.random() * (max - min)) + min; + } + + private renderImage(alert: any) { log.debug( `Amount of alert image renderers: ${this.alertImageRenderers.length}`, @@ -239,9 +246,13 @@ export class AlertController { `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${alert.video}`, ); } - if (appearance && appearance !== "none"){ + if (appearance && appearance !== "none" && appearance !== "random"){ renderer.setClassName(`animate__animated animate__slow animate__${appearance}`); } + if (appearance === "random"){ + const choice = APPEARANCE_ANIMATIONS[this.getRndInteger(0, APPEARANCE_ANIMATIONS.length - 1)]; + renderer.setClassName(`animate__animated animate__slow animate__${choice}`); + } if (showTime) { setTimeout(() => { renderer.setImage(null);