refactor: 💡 theming from lss to lottie slots

.changeset/wise-lions-argue.md

@@ -0,0 +1,5 @@
+---
+'@dotlottie/common': patch
+---
+
+refactor: 💡 theming from lss to lottie slots

apps/dotlottie-playground/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dotlottie/dotlottie-js": "^0.6.2",
+    "@dotlottie/dotlottie-js": "^0.7.0",
     "@dotlottie/react-player": "workspace:^",
     "@lottiefiles/lottie-types": "^1.2.0",
     "@monaco-editor/react": "^4.5.1",

apps/dotlottie-playground/src/app.tsx

@@ -15,6 +15,10 @@ const SAMPLE_FILES = [
   { name: 'toggle.lottie', path: `${import.meta.env.BASE_URL}toggle.lottie` },
   { name: 'interactivity_example.lottie', path: `${import.meta.env.BASE_URL}interactivity_example.lottie` },
   { name: 'aniki_hamster.lottie', path: `${import.meta.env.BASE_URL}aniki_hamster.lottie` },
+  {
+    name: 'theming_example.lottie',
+    path: `${import.meta.env.BASE_URL}theming_example.lottie`,
+  },
 ];
 
 interface HomeScreenProps {

apps/dotlottie-playground/src/components/dropzone.tsx

@@ -7,7 +7,7 @@ import ReactDropzone, { type DropzoneState, type FileError, type FileRejection,
 import { toast } from 'react-toastify';
 
 interface DropzoneProps {
-  accept: 'lottie' | 'json' | 'lss';
+  accept: 'lottie' | 'json';
   children: (state: DropzoneState) => JSX.Element;
   multiple?: boolean;
   noClick?: boolean;
@@ -40,13 +40,6 @@ export const Dropzone: React.FC<DropzoneProps> = ({ accept, children, multiple,
       };
     }
 
-    if (accept === 'lss' && !fileName.endsWith('.lss')) {
-      return {
-        message: 'Invalid .lss',
-        code: ErrorCode.FileInvalidType,
-      };
-    }
-
     return null;
   }, []);
 

apps/dotlottie-playground/src/components/file-tree/file-icon.tsx

@@ -3,14 +3,15 @@
  */
 
 import React from 'react';
-import { BsFiletypeJson, BsFiletypeCss } from 'react-icons/bs';
+import { BsFiletypeJson } from 'react-icons/bs';
 
 import type { SupportedFileTypes } from '.';
 
 export const FileIcon = ({ type }: { type: SupportedFileTypes }): JSX.Element => {
-  if (type === 'lss') {
-    return <BsFiletypeCss />;
-  } else {
-    return <BsFiletypeJson />;
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (type !== 'json') {
+    return <></>;
   }
+
+  return <BsFiletypeJson />;
 };

apps/dotlottie-playground/src/components/file-tree/index.tsx

@@ -2,7 +2,7 @@
  * Copyright 2023 Design Barn Inc.
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useKey } from 'react-use';
 
 import { useDotLottie } from '../../hooks/use-dotlottie';
@@ -14,7 +14,7 @@ import { AddNew } from './add-new';
 import { EditableItem } from './editable-item';
 import { Title } from './title';
 
-const FILE_TYPES = ['json', 'lss'] as const;
+const FILE_TYPES = ['json'] as const;
 
 export type SupportedFileTypes = typeof FILE_TYPES[number];
 
@@ -54,8 +54,6 @@ export const FileTree: React.FC<FileTreeProps> = ({
     [onClick, title],
   );
 
-  const fileExtention = useMemo(() => (title.toLowerCase() === 'themes' ? 'lss' : 'json'), [title]);
-
   const handleRemove = useCallback(
     (fileName: string) => {
       onRemove?.(title, fileName);
@@ -79,10 +77,10 @@ export const FileTree: React.FC<FileTreeProps> = ({
 
   const handleAddNew = useCallback(
     (value: string) => {
-      onAddNew?.(title, `${value}.${fileExtention}`);
+      onAddNew?.(title, `${value}.json`);
       setDisplayAdd(false);
     },
-    [onAddNew, title, fileExtention],
+    [onAddNew, title],
   );
 
   const handleRename = useCallback(
@@ -121,7 +119,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
         buttons={title === 'Animations' ? ['upload'] : ['upload', 'add']}
       />
       <div className="relative h-full overflow-y-auto custom-scrollbar">
-        <Dropzone onDrop={onDrop} accept={title === 'Themes' ? 'lss' : 'json'} noClick>
+        <Dropzone onDrop={onDrop} accept={'json'} noClick>
           {(state): JSX.Element => {
             return (
               <div {...state.getRootProps()}>
@@ -157,7 +155,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
 
                   {displayAdd && (
                     <li>
-                      <AddNew onAdd={handleAddNew} extension={title === 'Themes' ? 'lss' : 'json'} />
+                      <AddNew onAdd={handleAddNew} extension={'json'} />
                     </li>
                   )}
                 </ul>

apps/dotlottie-playground/src/components/file-tree/title.tsx

@@ -57,7 +57,7 @@ export const Title: React.FC<TitleProps> = ({ buttons, onClickAdd, onUpload, tit
 
             case 'upload':
               buttonsToDisplay.push(
-                <Dropzone key={item} onDrop={onDrop} accept={title === 'Themes' ? 'lss' : 'json'}>
+                <Dropzone key={item} onDrop={onDrop} accept={'json'}>
                   {({ getInputProps, getRootProps }): JSX.Element => (
                     <button {...getRootProps()} className="hover:text-white" title="Upload">
                       <input {...getInputProps()} />

apps/dotlottie-playground/src/components/playground.tsx

@@ -171,7 +171,6 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
     async (folder: string, fileName: string) => {
       dispatch(clearEditorState());
       let fileContent: string | undefined;
-      let isTheme = false;
 
       switch (folder) {
         case 'States':
@@ -180,7 +179,6 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
 
         case 'Themes':
           fileContent = await dotLottie.getTheme(fileName)?.toString();
-          isTheme = true;
           break;
 
         default:
@@ -191,9 +189,9 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
         dispatch(
           setEditorFile({
             name: fileName,
-            type: isTheme ? 'css' : 'json',
+            type: 'json',
             path: folder,
-            content: isTheme ? fileContent : formatJSON(fileContent),
+            content: formatJSON(fileContent),
           }),
         );
       }
@@ -243,7 +241,7 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
 
   const handleUpload = useCallback(
     async (title: string, file: File) => {
-      const fileName = processFilename(file.name).replace(/(.json|.lss)/gu, '');
+      const fileName = processFilename(file.name).replace(/(.json)/gu, '');
       let parsedContent: unknown;
 
       switch (title) {
@@ -276,7 +274,7 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
 
   const handleAddNew = useCallback(
     async (title: string, fileName: string) => {
-      const updatedFileName = processFilename(fileName).replace(/(.json|.lss)/gu, '');
+      const updatedFileName = processFilename(fileName).replace(/(.json)/gu, '');
       let mockState: DotLottieStateMachine;
 
       switch (title) {
@@ -287,7 +285,7 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
           break;
 
         case 'Themes':
-          addDotLottieTheme('/* Make your animations colorful */', updatedFileName);
+          addDotLottieTheme('{}', updatedFileName);
           break;
 
         default:

apps/dotlottie-playground/src/hooks/use-dotlottie.tsx

@@ -88,7 +88,7 @@ export const DotLottieProvider: React.FC<{ children: ReactNode }> = ({ children
       .map((item) => {
         return {
           name: `${item.id}`,
-          type: 'lss',
+          type: 'json',
         };
       })
       .sort((item1, item2) => (item1.name > item2.name ? 1 : -1));
@@ -148,7 +148,7 @@ export const DotLottieProvider: React.FC<{ children: ReactNode }> = ({ children
       dotLottie.removeTheme(themeId);
       dotLottie.addTheme({
         id: themeId,
-        data: theme,
+        data: JSON.parse(theme),
       });
       fetchAndUpdateDotLottie();
       buildAndUpdateUrl();

apps/dotlottie-playground/src/store/types.ts

@@ -2,7 +2,7 @@
  * Copyright 2023 Design Barn Inc.
  */
 
-export const SUPPORTED_FILE_TYPES = ['json', 'lss'] as const;
+export const SUPPORTED_FILE_TYPES = ['json'] as const;
 export const EDITOR_ACTIONS = [
   'themes_add',
   'themes_remove',

apps/react-player-test/src/pages/Home.tsx

@@ -10,7 +10,7 @@ import { ThemeContext } from '../App';
 const lotties = [
   {
     from: 'Multiple themes (.lottie)',
-    src: 'https://lottie.host/c7029f2f-d015-4d88-93f6-7693bf88692b/d7j8UjWsGt.lottie',
+    src: 'https://lottie.host/7ebddb46-c455-4191-ab23-b351ad9f4208/oX63nkjFYw.lottie',
   },
   {
     from: '.lottie',
@@ -133,7 +133,7 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
               <option value="">Please select a theme</option>
               {activeAnimationId
                 ? themes
-                  .filter((theme) => theme.animations.includes(activeAnimationId))
+                  .filter((theme) => theme.animations.includes(activeAnimationId) || theme.animations.length === 0)
                   .map((theme) => {
                     return (
                       <option key={theme.id} value={theme.id}>

packages/common/package.json

@@ -22,9 +22,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@dotlottie/dotlottie-js": "^0.6.2",
-    "@lottiefiles/relottie": "1.0.0",
-    "@lottiefiles/relottie-style": "0.4.3",
+    "@dotlottie/dotlottie-js": "^0.7.0",
     "@preact/signals-core": "^1.2.3",
     "howler": "^2.2.3",
     "lottie-web": "^5.12.2",

packages/common/src/dotlottie-loader.ts

@@ -20,7 +20,7 @@ export class DotLottieLoader {
 
   private readonly _animationsMap: Map<string, AnimationData> = new Map();
 
-  private readonly _themeMap: Map<string, string> = new Map();
+  private readonly _themeMap: Map<string, Record<string, unknown>> = new Map();
 
   private readonly _stateMachinesMap: Map<string, LottieStateMachine> = new Map();
 
@@ -34,7 +34,7 @@ export class DotLottieLoader {
     return this._animationsMap;
   }
 
-  public get themeMap(): Map<string, string> {
+  public get themeMap(): Map<string, Record<string, unknown>> {
     return this._themeMap;
   }
 
@@ -143,9 +143,9 @@ export class DotLottieLoader {
     return animation;
   }
 
-  public async getTheme(themeId: string): Promise<string | undefined> {
+  public async getTheme(themeId: string): Promise<Record<string, unknown> | undefined> {
     if (this._themeMap.get(themeId)) {
-      return this._themeMap.get(themeId) as string;
+      return this._themeMap.get(themeId);
     }
 
     if (!this._dotLottie) {

packages/common/src/dotlottie-player.ts

@@ -27,7 +27,6 @@
 import type { DotLottieAudio } from './dotlottie-audio';
 import { DotLottieLoader } from './dotlottie-loader';
 import { loadStateMachines } from './dotlottie-state-machine-loader';
-import { applyLottieStyleSheet } from './dotlottie-styler';
 import type { DotLottieStateMachineManager } from './state/dotlottie-state-machine-manager';
 import { Store } from './store';
 import {
@@ -528,7 +527,7 @@
     return this._dotLottieLoader.animationsMap;
   }
 
-  public get themes(): Map<string, string> {
+  public get themes(): Map<string, Record<string, unknown>> {
     return this._dotLottieLoader.themeMap;
   }
 
@@ -1774,14 +1773,16 @@
     };
 
     // load the dependencies in parallel
-    const [lottieStyleSheet, lottiePlayer, audioFactory] = await Promise.all([
+    const [theme, lottiePlayer, audioFactory] = await Promise.all([
       this._dotLottieLoader.getTheme(defaultTheme),
       this._getLottiePlayerInstance(),
       this._getAudioFactory(),
     ]);
 
-    if (lottieStyleSheet && this._animation) {
-      this._animation = await applyLottieStyleSheet(this._animation, lottieStyleSheet);
+    if (theme && this._animation) {
+      this._animation = deepCloneLottieJson(this._animation);
+      // @ts-ignore
+      this._animation['slots'] = theme;
     } else {
       this._animation = await this._dotLottieLoader.getAnimation(this._currentAnimationId ?? '');
     }
@@ -1865,7 +1866,7 @@
           'Worker is only supported with svg renderer. Change or remove renderer prop to get rid of this warning.',
         );
       }
       // @ts-ignore
       LottieWebModule = await import(`lottie-web/build/player/lottie_worker`);
 
       return LottieWebModule.default;
@@ -1885,7 +1886,7 @@
         if (this._light) {
           LottieWebModule = await import(`lottie-web/build/player/lottie_light_canvas`);
         } else {
           // @ts-ignore
           LottieWebModule = await import(`lottie-web/build/player/lottie_canvas`);
         }
 

packages/react-player/README.md

@@ -75,7 +75,7 @@ The `DotLottiePlayer` component accepts the following props:
 | `renderer`         | How to render                             | `'svg' \| 'html' \| 'canvas'`   | `svg`       |
 | `speed`            | Play speed                                | `number`                        | `1`         |
 | `onEvent`          | Listen to player events                   | `function`                      | `undefined` |
-| `defaultTheme`     | Default lss theme to use                  | `string`                        | `undefined` |
+| `defaultTheme`     | Default .lottie theme to use                  | `string`                        | `undefined` |
 
 ## Events
 

packages/react-player/src/controls.tsx

@@ -52,7 +52,7 @@ export const Controls: React.FC<ControlsProps> = ({ buttons = AVAILABLE_BUTTONS,
       selected: currentAnimationId === anim.id,
     }));
     const _themes = themes
-      .filter((theme) => theme.animations.includes(currentAnimationId || ''))
+      .filter((theme) => theme.animations.length === 0 || theme.animations.includes(currentAnimationId || ''))
       .map((theme) => ({ value: theme.id, selected: defaultTheme === theme.id }));
 
     const _states = states.map((state) => ({ value: state, selected: activeStateId === state }));