fix: update react lottie library (Sofie-Automation#1659)

* fix: downgrade lottie

* 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.11",
 		"@fortawesome/fontawesome-free": "^7.1.0",
 		"@fortawesome/fontawesome-svg-core": "^7.1.0",
 		"@fortawesome/free-solid-svg-icons": "^7.1.0",
@@ -52,7 +51,7 @@
 		"i18next-browser-languagedetector": "^8.2.0",
 		"i18next-http-backend": "^3.0.2",
 		"immutability-helper": "^3.1.1",
-		"lottie-web": "^5.13.0",
+		"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 React, { JSX, useEffect, useRef } from 'react'
+import loopAnimation from './icon-loop.json'
+import Lottie, { LottieComponentProps, LottieRefCurrentProps } from 'lottie-react'
 
 export function LoopingIcon(props?: Readonly<React.SVGProps<SVGSVGElement>>): JSX.Element {
 	return (
@@ -25,19 +25,34 @@ export function LoopingIcon(props?: Readonly<React.SVGProps<SVGSVGElement>>): JS
 export function LoopingPieceIcon({
 	className,
 	playing,
-}: Readonly<{ className?: string; playing: boolean }>): JSX.Element {
+}: Readonly<{ className?: string; playing?: boolean }>): JSX.Element {
+	const lottieRef = useRef<LottieRefCurrentProps>(null)
+
+	useEffect(() => {
+		if (!lottieRef.current) return
+		if (playing) {
+			lottieRef.current.play()
+		} else {
+			lottieRef.current.stop()
+		}
+	}, [playing])
+
 	return (
 		<div className={`${className} label-icon label-loop-icon`}>
-			<Lottie config={LOOPING_PIECE_ICON} width="24px" height="24px" playingState={playing ? 'playing' : 'stopped'} />
+			<Lottie lottieRef={lottieRef} {...LOOPING_PIECE_ICON} autoplay={playing} />
 		</div>
 	)
 }
 
-const LOOPING_PIECE_ICON = {
+const LOOPING_PIECE_ICON: LottieComponentProps = {
 	loop: true,
 	autoplay: false,
 	animationData: loopAnimation,
 	rendererSettings: {
 		preserveAspectRatio: 'xMidYMid slice',
 	},
+	style: {
+		width: '24px',
+		height: '24px',
+	},
 }

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.11":
-  version: 0.0.11
-  resolution: "@crello/react-lottie@npm:0.0.11"
-  dependencies:
-    lottie-web: "npm:^5.7.3"
-  peerDependencies:
-    react: ~16.9.0
-    react-dom: ~16.9.0
-  checksum: 10/23629b6cdd5b703f936ef4263696feecaadf3b642d6442afae94043c4bc0e4c4a98e249257a277812c9214ebca4363c37466fba1c9c7dee951ade50c31e02737
-  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.11"
     "@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,7 +7299,7 @@ __metadata:
     i18next-browser-languagedetector: "npm:^8.2.0"
     i18next-http-backend: "npm:^3.0.2"
     immutability-helper: "npm:^3.1.1"
-    lottie-web: "npm:^5.13.0"
+    lottie-react: "npm:^2.4.1"
     moment: "npm:^2.30.1"
     motion: "npm:^12.31.0"
     promise.allsettled: "npm:^1.0.7"
@@ -19899,7 +19886,19 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
-"lottie-web@npm:^5.13.0, lottie-web@npm:^5.7.3":
+"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