widgets: port spin wheel

Author: wesrupert

app/app-services.ts

@@ -117,7 +117,6 @@ export { SseService } from 'services/server-sent-events';
 export { WidgetSource, WidgetsService } from './services/widgets';
 export { MediaShareService } from 'services/widgets/settings/media-share';
 export { AlertBoxService } from 'services/widgets/settings/alert-box';
-export { SpinWheelService } from 'services/widgets/settings/spin-wheel';
 export { PollService } from 'services/widgets/settings/poll';
 export { ChatHighlightService } from 'services/widgets/settings/chat-highlight';
 
@@ -175,7 +174,6 @@ import { AudioService } from './services/audio';
 import { SourceFiltersService } from './services/source-filters';
 import { DiagnosticsService } from './services/diagnostics';
 import { WebsocketService } from './services/websocket';
-import { SpinWheelService } from 'services/widgets/settings/spin-wheel';
 import { LayoutService } from './services/layout';
 import { ProjectorService } from './services/projector';
 import { ObsImporterService } from 'services/obs-importer';
@@ -267,7 +265,6 @@ export const AppServices = {
   SourceFiltersService,
   DiagnosticsService,
   WebsocketService,
-  SpinWheelService,
   LayoutService,
   ProjectorService,
   ObsImporterService,

app/components-react/editor/elements/RecentEvents.tsx

@@ -32,7 +32,7 @@ export default function RecentEvents(p: { isOverlay?: boolean }) {
 }
 
 function Toolbar() {
-  const { RecentEventsService, UserService, SpinWheelService } = Services;
+  const { RecentEventsService, UserService } = Services;
 
   const {
     muted,
@@ -59,7 +59,7 @@ function Toolbar() {
         <Tooltip title={$t('Spin Wheel')} placement="bottom">
           <i
             className="fas fa-chart-pie action-icon"
-            onClick={() => SpinWheelService.actions.spinWheel()}
+            onClick={() => RecentEventsService.actions.spinWheel()}
           />
         </Tooltip>
       )}

app/components-react/shared/inputs/FormFactory.tsx

@@ -28,6 +28,7 @@ const componentTable: {
   textarea: inputs.TextAreaInput,
   color: inputs.ColorInput,
   mediaurl: inputs.MediaUrlInput,
+  audiourl: inputs.AudioUrlInput,
   imagepicker: inputs.ImagePickerInput,
   time: inputs.TimeInput,
   animation: inputs.AnimationInput,

app/components-react/widgets/SpinWheel.m.less

@@ -0,0 +1,66 @@
+.category-editor {
+  &-row {
+    margin-bottom: 16px;
+    align-items: center;
+    gap: 8px;
+
+    &--name {
+      flex: 1;
+    }
+
+    &--close-button {
+      margin-left: 4px;
+      cursor: pointer;
+    }
+  }
+
+  &-buttons {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+  }
+}
+
+.section-editor {
+  &-row {
+    margin-bottom: 16px;
+    align-items: center;
+    gap: 8px;
+
+    &--category {
+      flex-basis: 160px;
+
+      :global(.ant-select) {
+        width: 100% !important;
+      }
+    }
+
+    &--weight {
+      flex: 1;
+    }
+
+    &-buttons {
+      flex-basis: 58px;
+    }
+
+    &--close-button {
+      margin-left: 4px;
+      cursor: pointer;
+    }
+  }
+
+  &--warning {
+    margin-bottom: 16px;
+    text-align: center;
+    font-style: italic;
+    opacity: 0.5;
+  }
+
+  &-buttons {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+  }
+}