fix: switch to lottie-react

This library is better maintained and is vastly more popular
Funnily, this is the reverse of Sofie-Automation@34b59ba

Author: Julusian

packages/webui/package.json

@@ -30,7 +30,6 @@
 		"license-validate": "run -T sofie-licensecheck"
 	},
 	"dependencies": {
-		"@crello/react-lottie": "0.0.9",
 		"@fortawesome/fontawesome-free": "^7.1.0",
 		"@fortawesome/fontawesome-svg-core": "^7.1.0",
 		"@fortawesome/free-solid-svg-icons": "^7.1.0",
@@ -52,6 +51,7 @@
 		"i18next-browser-languagedetector": "^8.2.0",
 		"i18next-http-backend": "^3.0.2",
 		"immutability-helper": "^3.1.1",
+		"lottie-react": "^2.4.1",
 		"moment": "^2.30.1",
 		"motion": "^12.31.0",
 		"promise.allsettled": "^1.0.7",

packages/webui/src/client/lib/LottieButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { Lottie } from '@crello/react-lottie'
+import Lottie, { LottieComponentProps } from 'lottie-react'
 
 interface IProps {
 	inAnimation?: any
@@ -26,8 +26,8 @@ export class LottieButton extends React.Component<React.PropsWithChildren<IProps
 	}
 
 	// Setup in `buildAnimationObjects`
-	overAnimation!: { animationData: object } & object
-	outAnimation!: { animationData: object } & object
+	overAnimation!: LottieComponentProps
+	outAnimation!: LottieComponentProps
 
 	constructor(props: IProps) {
 		super(props)
@@ -77,7 +77,7 @@ export class LottieButton extends React.Component<React.PropsWithChildren<IProps
 				onClick={this.onClick}
 				tabIndex={0}
 			>
-				<Lottie config={this.state.hover ? this.overAnimation : this.outAnimation} />
+				<Lottie {...(this.state.hover ? this.overAnimation : this.outAnimation)} />
 				{this.props.children}
 				<div
 					style={{ position: 'absolute', top: '0', left: '0', right: '0', bottom: '0' }}

packages/webui/src/client/lib/ui/icons/looping.tsx

@@ -1,6 +1,6 @@
 import React, { JSX } from 'react'
-import * as loopAnimation from './icon-loop.json'
-import { Lottie } from '@crello/react-lottie'
+import loopAnimation from './icon-loop.json'
+import Lottie, { LottieComponentProps } from 'lottie-react'
 
 export function LoopingIcon(props?: Readonly<React.SVGProps<SVGSVGElement>>): JSX.Element {
 	return (
@@ -28,12 +28,12 @@ export function LoopingPieceIcon({
 }: Readonly<{ className?: string; playing: boolean }>): JSX.Element {
 	return (
 		<div className={`${className} label-icon label-loop-icon`}>
-			<Lottie config={LOOPING_PIECE_ICON} width="24px" height="24px" playingState={playing ? 'playing' : 'stopped'} />
+			<Lottie {...LOOPING_PIECE_ICON} width="24px" height="24px" autoplay={playing} />
 		</div>
 	)
 }
 
-const LOOPING_PIECE_ICON = {
+const LOOPING_PIECE_ICON: LottieComponentProps = {
 	loop: true,
 	autoplay: false,
 	animationData: loopAnimation,

packages/webui/src/client/ui/RundownView/RundownRightHandControls.tsx

@@ -7,11 +7,11 @@ import {
 } from '@sofie-automation/corelib/dist/dataModel/Studio'
 import { RewindAllSegmentsIcon } from '../../lib/ui/icons/rewindAllSegmentsIcon.js'
 
-import { Lottie } from '@crello/react-lottie'
+import Lottie, { LottieComponentProps } from 'lottie-react'
 import { NotificationCenterPanelToggle } from '../../lib/notifications/NotificationCenterPanel.js'
 
-import * as On_Air_MouseOut from './On_Air_MouseOut.json'
-import * as On_Air_MouseOver from './On_Air_MouseOver.json'
+import On_Air_MouseOut from './On_Air_MouseOut.json'
+import On_Air_MouseOver from './On_Air_MouseOver.json'
 import { SupportPopUpToggle } from '../SupportPopUp.js'
 import classNames from 'classnames'
 import { NoticeLevel } from '../../lib/notifications/notifications.js'
@@ -54,7 +54,7 @@ interface IProps {
 	hideRundownHeader?: boolean
 }
 
-const ANIMATION_TEMPLATE = {
+const ANIMATION_TEMPLATE: LottieComponentProps = {
 	loop: false,
 	autoplay: true,
 	animationData: {},
@@ -63,11 +63,11 @@ const ANIMATION_TEMPLATE = {
 	},
 }
 
-const ONAIR_OUT = {
+const ONAIR_OUT: LottieComponentProps = {
 	...ANIMATION_TEMPLATE,
 	animationData: On_Air_MouseOut,
 }
-const ONAIR_OVER = {
+const ONAIR_OVER: LottieComponentProps = {
 	...ANIMATION_TEMPLATE,
 	animationData: On_Air_MouseOver,
 }
@@ -195,7 +195,7 @@ export function RundownRightHandControls(props: Readonly<IProps>): JSX.Element {
 									tabIndex={0}
 									aria-label={t('Go to On Air Segment')}
 								>
-									{onAirHover ? <Lottie config={ONAIR_OVER} /> : <Lottie config={ONAIR_OUT} />}
+									{onAirHover ? <Lottie {...ONAIR_OVER} /> : <Lottie {...ONAIR_OUT} />}
 								</button>
 							)}
 						</div>

packages/yarn.lock

@@ -2221,18 +2221,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@crello/react-lottie@npm:0.0.9":
-  version: 0.0.9
-  resolution: "@crello/react-lottie@npm:0.0.9"
-  dependencies:
-    lottie-web: "npm:5.5.9"
-  peerDependencies:
-    react: ~16.9.0
-    react-dom: ~16.9.0
-  checksum: 10/13e751a5995184f44bc01fee7ca70354164564e4c37e063d363bd262756cdd60f3032f2c4b6bbb91cd5f8ef5fb8e75cd60086a6d253ca0c2737651fc40a93cd6
-  languageName: node
-  linkType: hard
-
 "@cspotcode/source-map-support@npm:^0.8.0":
   version: 0.8.1
   resolution: "@cspotcode/source-map-support@npm:0.8.1"
@@ -7272,7 +7260,6 @@ __metadata:
   resolution: "@sofie-automation/webui@workspace:webui"
   dependencies:
     "@babel/preset-env": "npm:^7.29.0"
-    "@crello/react-lottie": "npm:0.0.9"
     "@fortawesome/fontawesome-free": "npm:^7.1.0"
     "@fortawesome/fontawesome-svg-core": "npm:^7.1.0"
     "@fortawesome/free-solid-svg-icons": "npm:^7.1.0"
@@ -7312,6 +7299,7 @@ __metadata:
     i18next-browser-languagedetector: "npm:^8.2.0"
     i18next-http-backend: "npm:^3.0.2"
     immutability-helper: "npm:^3.1.1"
+    lottie-react: "npm:^2.4.1"
     moment: "npm:^2.30.1"
     motion: "npm:^12.31.0"
     promise.allsettled: "npm:^1.0.7"
@@ -19888,10 +19876,22 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
-"lottie-web@npm:5.5.9":
-  version: 5.5.9
-  resolution: "lottie-web@npm:5.5.9"
-  checksum: 10/b7d05b58468fdf52a9f25581edc292d0ac47b0508d965c3debf2ee691d2a94593b61f096fe14eaefb8f09e0b869b158131aeea51541a3cff7e2dbfa5da996930
+"lottie-react@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "lottie-react@npm:2.4.1"
+  dependencies:
+    lottie-web: "npm:^5.10.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/d1c54c3d90e322db988ea1dc92900a122e699e1d833368b8a817f4bd2ccc6d5600ab3cd0f34aa6e0bcbab28425f6de514b6d567e13164693cbde2c82af08fa06
+  languageName: node
+  linkType: hard
+
+"lottie-web@npm:^5.10.2":
+  version: 5.13.0
+  resolution: "lottie-web@npm:5.13.0"
+  checksum: 10/ccc65b91ddc569c874de265252ef41cb546798515dd63c5ee366844efd1e10335c080c483ce4305faba0cebd54c4afd6bb918fd0d6f4394dcc284fc0c3944941
   languageName: node
   linkType: hard