Refactor to accept new inputs

stream-labs · gettinToasty · Aug 4, 2018 · Jul 25, 2018 · Jul 25, 2018 · Jul 27, 2018
commit d200f7dee8205cb0c6c60d6f100405dc0af671df
diff --git a/app/components/widget-settings/SponsorBanner.vue b/app/components/widget-settings/SponsorBanner.vue
diff --git a/app/components/widgets/SponsorBanner.vue b/app/components/widgets/SponsorBanner.vue
@@ -0,0 +1,42 @@
+<template>
+<widget-window v-if="wData" ref="layout" v-model="tabName">
+
+  <div slot="description">
+    {{ $t('Set up a sponsor banner to be able to edit (add, remove, update) rotating sponsor logos on streamer channel.') }}
+  </div>
+
+  <div slot="settings" >
+    <form-group :title="$t('Banner Width')">
+      <slider-input v-model="wData.settings.banner_width" :metadata="{ max: 720, interval: 5 }" />
+    </form-group>
+    <form-group :title="$t('Banner Height')">
+      <slider-input v-model="wData.settings.banner_height" :metadata="{ max: 720, interval: 5 }" />
+    </form-group>
+    <form-group :title="$t('Image Animation')">
+      <animation-input v-model="wData.settings.show_animation" />
+    </form-group>
+    <form-group :title="$t('Background Color')">
+      <bool-input v-model="wData.settings.background_color_option" :metadata="{ title: $t('Transparent') }" />
+      <color-input v-if="!wData.settings.background_color_option" v-model="wData.settings.background_container_color" />
+    </form-group>
+    <form-group :title="$t('Placement')">
+      <list-input v-model="wData.settings.placement_options" :metadata="{ options: placementOptions }" />
+    </form-group>
+  </div>
+
+  <div slot="HTML" >
+    <code-editor v-model="wData" :metadata="{ type: 'html' }"/>
+  </div>
+
+  <div slot="CSS" >
+    <code-editor v-model="wData" :metadata="{ type: 'css' }"/>
+  </div>
+
+  <div slot="JS" >
+    <code-editor v-model="wData" :metadata="{ type: 'js' }"/>
+  </div>
+
+</widget-window>
+</template>
+
+<script lang="ts" src="./SponsorBanner.vue.ts"></script>
diff --git a/...ents/widget-settings/SponsorBanner.vue.ts → app/components/widgets/SponsorBanner.vue.ts b/...ents/widget-settings/SponsorBanner.vue.ts → app/components/widgets/SponsorBanner.vue.ts
@@ -7,15 +7,17 @@ import {
 import WidgetWindow from 'components/windows/WidgetWindow.vue';
 import WidgetSettings from './WidgetSettings.vue';
 
-import * as comps from 'components/shared/widget-inputs';
-import WFormGroup from 'components/shared/widget-inputs/WFormGroup.vue';
+import { inputComponents } from 'components/shared/inputs';
+import { AnimationInput } from './inputs';
+import FormGroup from 'components/shared/inputs/FormGroup.vue';
 import { $t } from 'services/i18n';
 
 @Component({
   components: {
     WidgetWindow,
-    WFormGroup,
-    ...comps
+    FormGroup,
+    AnimationInput,
+    ...inputComponents
   }
 })
 export default class SponsorBanner extends WidgetSettings<ISponsorBannerData, SponsorBannerService> {

diff --git a/app/services/widget-settings/sponsor-banner.ts b/app/services/widget-settings/sponsor-banner.ts
@@ -1,6 +1,5 @@
 import { CODE_EDITOR_TABS, IWidgetData, IWidgetSettings, WidgetSettingsService } from './widget-settings';
 import { WidgetType } from 'services/widgets';
-import { metadata } from 'components/shared/widget-inputs/WInput';
 
 export interface ISponsorBannerSettings extends IWidgetSettings {
   background_color_option: boolean;

diff --git a/app/services/widgets/widgets-data.ts b/app/services/widgets/widgets-data.ts
@@ -16,7 +16,8 @@ export enum WidgetType {
   ViewerCount = 9,
   StreamBoss = 10,
   Credits = 11,
-  SpinWheel = 12
+  SpinWheel = 12,
+  SponsorBanner = 13
 }
 
 
@@ -274,6 +275,21 @@ export const WidgetDefinitions: { [x: number]: IWidget } = {
     anchor: AnchorPoint.Center
   },
 
+  [WidgetType.SponsorBanner]: {
+    name: 'Sponsor Banner',
+    url(host, token) {
+      return `https://${host}/widgets/sponsor-banner?token=${token}`;
+    },
+
+    width: 600,
+    height: 200,
+
+    x: 0,
+    y: 1,
+
+    anchor: AnchorPoint.SouthWest
+  },
+
   [WidgetType.SpinWheel]: {
     name: 'Spin Wheel',
     url(host, token) {
@@ -408,6 +424,15 @@ export const WidgetDisplayData = (): { [x: number]: IWidgetDisplayData } => ({
       $t('Donations')
     ]
   },
+  [WidgetType.SponsorBanner]: {
+    name: $t('Sponsor Banner'),
+    description: $t(
+      'Set up a sponsor banner to be able to edit (add, remove, update) rotating sponsor logos on streamer channel.'
+    ),
+    demoVideo: false,
+    demoFilename: 'source-sponsor-banner.png',
+    supportList: [$t('The streamer manually adds images of sponsors.')]
+  },
   [WidgetType.SpinWheel]: {
     name: $t('Spin Wheel'),
     description: $t('Spin the wheel to make a decision.'),

diff --git a/media/source-demos/day/source-sponsor-banner.png b/media/source-demos/day/source-sponsor-banner.png
diff --git a/media/source-demos/night/source-sponsor-banner.png b/media/source-demos/night/source-sponsor-banner.png