feat(clipscarousel): add fade animation

package.json

@@ -11,10 +11,10 @@
   "author": "Michal Orlik <sogehige@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@sogebot/ui-admin": "^36.2.2",
+    "@sogebot/ui-admin": "^37.0.0",
     "@sogebot/ui-helpers": "^2.8.0",
     "@sogebot/ui-oauth": "~3.0.2",
-    "@sogebot/ui-overlay": "^17.2.3",
+    "@sogebot/ui-overlay": "^18.0.0",
     "@sogebot/ui-public": "^2.0.0",
     "@twurple/api": "^5.0.17",
     "@twurple/chat": "^5.0.17",

src/database/entity/overlay.ts

@@ -286,6 +286,7 @@ export interface OverlayMapperClipsCarousel {
     customPeriod: number,
     numOfClips: number,
     volume: number,
+    animation: string,
   },
 }
 

src/graphql/resolvers/overlayResolver.ts

@@ -1,7 +1,8 @@
 import {
-  OverlayMapper, OverlayMapperInterface, OverlayMappers,
+  OverlayMapper, OverlayMapperClipsCarousel, OverlayMapperInterface, OverlayMappers,
 } from '@entity/overlay';
 import { SECOND } from '@sogebot/ui-helpers/constants';
+import { defaults, pick } from 'lodash';
 import {
   Arg, Authorized,  Mutation, Query, Resolver,
 } from 'type-graphql';
@@ -86,15 +87,26 @@ export class overlayResolver {
       emotesfireworks: items.filter(o => o.value === 'emotesfireworks'),
       emotesexplode:   items.filter(o => o.value === 'emotesexplode'),
       hypetrain:       items.filter(o => o.value === 'hypetrain'),
-      clipscarousel:   items.filter(o => o.value === 'clipscarousel'),
-      carousel:        items.filter(o => o.value === 'carousel'),
-      tts:             items.filter(o => o.value === 'tts'),
-      polls:           items.filter(o => o.value === 'polls'),
-      obswebsocket:    items.filter(o => o.value === 'obswebsocket'),
-      group:           items.filter(o => o.value === 'group'),
-      stats:           items.filter(o => o.value === 'stats'),
-      wordcloud:       items.filter(o => o.value === 'wordcloud'),
-      randomizer:      items.filter(o => o.value === 'randomizer'),
+      clipscarousel:   (items.filter(o => o.value === 'clipscarousel') as OverlayMapperClipsCarousel[]).map((value) => {
+        value.opts = pick(
+          defaults(value.opts, {
+            volume:       0,
+            customPeriod: 31,
+            numOfClips:   20,
+            animation:    'slide',
+          }),
+          ['volume', 'customPeriod', 'numOfClips', 'animation'],
+        );
+        return value;
+      }),
+      carousel:     items.filter(o => o.value === 'carousel'),
+      tts:          items.filter(o => o.value === 'tts'),
+      polls:        items.filter(o => o.value === 'polls'),
+      obswebsocket: items.filter(o => o.value === 'obswebsocket'),
+      group:        items.filter(o => o.value === 'group'),
+      stats:        items.filter(o => o.value === 'stats'),
+      wordcloud:    items.filter(o => o.value === 'wordcloud'),
+      randomizer:   items.filter(o => o.value === 'randomizer'),
     } as OverlayObject;
     return response;
   }

src/graphql/schema/overlay/OverlayClipsCarouselOptionsObject.ts

@@ -7,6 +7,7 @@ type OverlayMapperClipsCarouselOptions = NonNullable<OverlayMapperClipsCarousel[
 
 @ObjectType()
 export class OverlayClipsCarouselOptionsObject implements OverlayMapperClipsCarouselOptions {
+  @Field() animation: string;
   @Field(type => Int) customPeriod: number;
   @Field(type => Int) numOfClips: number;
   @Field(type => Float) volume: number;