Merged in fix/3697-prettier-configs (pull request #3396)

fix(SW-3691): Setup one prettier config for whole repo

* Setup prettierrc in root and remove other configs


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood

packages/design-system/lib/components/VideoPlayer/index.tsx

@@ -1,24 +1,24 @@
-'use client'
+"use client"
 
-import { cx } from 'class-variance-authority'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { cx } from "class-variance-authority"
+import { useCallback, useEffect, useRef, useState } from "react"
 
-import { languages } from '@scandic-hotels/common/constants/language'
-import { useIntl } from 'react-intl'
-import Image from '../Image'
-import { VideoPlayerButton } from './Button'
-import { VideoPlayerProps } from './types'
-import { useVideoDimensions } from './useVideoDimensions'
-import { getVideoPropsByVariant } from './utils'
-import { variants } from './variants'
-import styles from './videoPlayer.module.css'
+import { languages } from "@scandic-hotels/common/constants/language"
+import { useIntl } from "react-intl"
+import Image from "../Image"
+import { VideoPlayerButton } from "./Button"
+import { VideoPlayerProps } from "./types"
+import { useVideoDimensions } from "./useVideoDimensions"
+import { getVideoPropsByVariant } from "./utils"
+import { variants } from "./variants"
+import styles from "./videoPlayer.module.css"
 
 export function VideoPlayer({
   sources,
   captions,
   focalPoint = { x: 50, y: 50 },
   className,
-  variant = 'inline',
+  variant = "inline",
   poster,
   autoPlay,
   hasOverlay,
@@ -26,7 +26,7 @@ export function VideoPlayer({
   const intl = useIntl()
   const videoRef = useRef<HTMLVideoElement>(null)
   const shouldAutoPlay =
-    (variant === 'hero' && (autoPlay ?? true)) || !!autoPlay
+    (variant === "hero" && (autoPlay ?? true)) || !!autoPlay
   const [hasManuallyPlayed, setHasManuallyPlayed] = useState(false)
   const [hasToggledMute, setHasToggledMute] = useState(false)
   const [isPlaying, setIsPlaying] = useState(shouldAutoPlay)
@@ -51,9 +51,9 @@ export function VideoPlayer({
   })
   const showPlayButton =
     !hasError &&
-    (variant === 'hero' || (variant === 'inline' && !hasManuallyPlayed))
+    (variant === "hero" || (variant === "inline" && !hasManuallyPlayed))
   const showMuteButton =
-    !hasError && variant === 'inline' && hasManuallyPlayed && !hasToggledMute
+    !hasError && variant === "inline" && hasManuallyPlayed && !hasToggledMute
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -71,7 +71,7 @@ export function VideoPlayer({
   function togglePlay() {
     const videoElement = videoRef.current
     if (videoElement) {
-      if (variant === 'hero') {
+      if (variant === "hero") {
         if (videoElement.paused) {
           setUserPaused(false)
           videoElement.play()
@@ -112,7 +112,7 @@ export function VideoPlayer({
   useEffect(() => {
     const videoElement = videoRef.current
 
-    if (!videoElement || variant !== 'hero') {
+    if (!videoElement || variant !== "hero") {
       return
     }
 
@@ -133,8 +133,8 @@ export function VideoPlayer({
 
   // Sort sources to prioritize WebM format for better compression
   const sortedSources = [...sources].sort((a, b) => {
-    const aIsWebM = a.type.includes('webm')
-    const bIsWebM = b.type.includes('webm')
+    const aIsWebM = a.type.includes("webm")
+    const bIsWebM = b.type.includes("webm")
 
     return aIsWebM === bIsWebM ? 0 : aIsWebM ? -1 : 1
   })
@@ -190,7 +190,7 @@ export function VideoPlayer({
           sizes={
             containerWidth
               ? `${containerWidth}px`
-              : `(min-width: 1367px) ${variant === 'inline' ? '700px' : '100vw'}, 100vw`
+              : `(min-width: 1367px) ${variant === "inline" ? "700px" : "100vw"}, 100vw`
           }
         />
       ) : null}
@@ -198,17 +198,17 @@ export function VideoPlayer({
         <VideoPlayerButton
           className={styles.playButton}
           onPress={togglePlay}
-          iconName={isPlaying ? 'pause' : 'play_arrow'}
-          size={variant === 'hero' ? 'sm' : 'lg'}
+          iconName={isPlaying ? "pause" : "play_arrow"}
+          size={variant === "hero" ? "sm" : "lg"}
           aria-label={
             isPlaying
               ? intl.formatMessage({
-                  id: 'videoPlayer.pause',
-                  defaultMessage: 'Pause video',
+                  id: "videoPlayer.pause",
+                  defaultMessage: "Pause video",
                 })
               : intl.formatMessage({
-                  id: 'videoPlayer.play',
-                  defaultMessage: 'Play video',
+                  id: "videoPlayer.play",
+                  defaultMessage: "Play video",
                 })
           }
         />
@@ -217,17 +217,17 @@ export function VideoPlayer({
         <VideoPlayerButton
           className={styles.muteButton}
           onPress={handleMuteToggle}
-          iconName={isMuted ? 'volume_off' : 'volume_up'}
+          iconName={isMuted ? "volume_off" : "volume_up"}
           size="sm"
           aria-label={
             isMuted
               ? intl.formatMessage({
-                  id: 'videoPlayer.mute',
-                  defaultMessage: 'Mute video',
+                  id: "videoPlayer.mute",
+                  defaultMessage: "Mute video",
                 })
               : intl.formatMessage({
-                  id: 'videoPlayer.unmute',
-                  defaultMessage: 'Unmute video',
+                  id: "videoPlayer.unmute",
+                  defaultMessage: "Unmute video",
                 })
           }
         />