From 7102209f92354f707eee57d9918dddcfd108abaa Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Mon, 24 Jun 2024 13:17:17 +0200
Subject: [PATCH] :bug Fix video small bugs #2393 (#2394)

* :art: add play and pause icons and swithc with unicode

* :bug: fix spacing bug
---
 web/components/src/VideoJsPlayer/index.tsx |  3 +-
 web/icons/Pause.tsx                        | 34 ++++++++++++++++++++++
 web/icons/Play.tsx                         | 29 ++++++++++++++++++
 web/icons/index.ts                         |  2 ++
 web/pageComponents/shared/VideoPlayer.tsx  |  2 +-
 5 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 web/icons/Pause.tsx
 create mode 100644 web/icons/Play.tsx

diff --git a/web/components/src/VideoJsPlayer/index.tsx b/web/components/src/VideoJsPlayer/index.tsx
index 1842a33d6..ea26016a1 100644
--- a/web/components/src/VideoJsPlayer/index.tsx
+++ b/web/components/src/VideoJsPlayer/index.tsx
@@ -5,6 +5,7 @@ import Player from 'video.js/dist/types/player'
 //import 'video.js/dist/video-js.css'
 import MediaError from 'video.js/dist/types/media-error'
 import useVideojsAnalytics from '../../../lib/hooks/useVideojsAnalytics'
+import { Play, Pause } from '../../../icons'
 
 type VideoJSProps = Omit<HTMLProps<HTMLVideoElement>, 'src'> & {
   src: string
@@ -152,7 +153,7 @@ export const VideoJS: React.FC<VideoJSProps> = ({
           hover:bg-black-100 
           `}
           >
-            <div className="text-md leading-none mt-1 text-white-100">{isPlaying ? '⏸' : '⏵'}</div>
+            <div className=" text-white-100">{isPlaying ? <Pause /> : <Play />}</div>
           </div>
         </button>
       )}
diff --git a/web/icons/Pause.tsx b/web/icons/Pause.tsx
new file mode 100644
index 000000000..1d37fec51
--- /dev/null
+++ b/web/icons/Pause.tsx
@@ -0,0 +1,34 @@
+import { forwardRef, Ref, SVGProps } from 'react'
+
+export type PauseProps = {
+  /** Size, use if you need large icon resolutions
+   * @default 1em
+   */
+  size?: string | number
+  /** @ignore */
+  ref?: Ref<SVGSVGElement>
+} & SVGProps<SVGSVGElement>
+
+export const Pause = forwardRef<SVGSVGElement, PauseProps>(function Pause(
+  { size = '1em', className = '', ...rest },
+  ref,
+) {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox={`0 0 512 512`}
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth={0}
+      aria-hidden
+      className={className}
+      {...rest}
+    >
+      <path d="M120.16 45A20.162 20.162 0 0 0 100 65.16v381.68A20.162 20.162 0 0 0 120.16 467h65.68A20.162 20.162 0 0 0 206 446.84V65.16A20.162 20.162 0 0 0 185.84 45h-65.68zm206 0A20.162 20.162 0 0 0 306 65.16v381.68A20.162 20.162 0 0 0 326.16 467h65.68A20.162 20.162 0 0 0 412 446.84V65.16A20.162 20.162 0 0 0 391.84 45h-65.68z"></path>
+    </svg>
+  )
+})
+export default Pause
diff --git a/web/icons/Play.tsx b/web/icons/Play.tsx
new file mode 100644
index 000000000..ac2e67671
--- /dev/null
+++ b/web/icons/Play.tsx
@@ -0,0 +1,29 @@
+import { forwardRef, Ref, SVGProps } from 'react'
+
+export type PlayProps = {
+  /** Size, use if you need large icon resolutions
+   * @default 24
+   */
+  size?: string | number
+  /** @ignore */
+  ref?: Ref<SVGSVGElement>
+} & SVGProps<SVGSVGElement>
+
+export const Play = forwardRef<SVGSVGElement, PlayProps>(function Play({ size = 24, className = '', ...rest }, ref) {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox={`0 0 24 24`}
+      fill="currentColor"
+      aria-hidden
+      className={className}
+      {...rest}
+    >
+      <path d="M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.0658V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.59871 4.43433 8.69522 4.46355 8.77735 4.5183L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z"></path>
+    </svg>
+  )
+})
+export default Play
diff --git a/web/icons/index.ts b/web/icons/index.ts
index 381b38768..2c2b71206 100644
--- a/web/icons/index.ts
+++ b/web/icons/index.ts
@@ -4,3 +4,5 @@ export { default as Linkedin } from './Linkedin'
 export { default as Twitter } from './Twitter'
 export { default as Youtube } from './Youtube'
 export { default as ArrowRight } from './ArrowRight'
+export { default as Play } from './Play'
+export { default as Pause } from './Pause'
diff --git a/web/pageComponents/shared/VideoPlayer.tsx b/web/pageComponents/shared/VideoPlayer.tsx
index 11c1b85d7..9fe356c9e 100644
--- a/web/pageComponents/shared/VideoPlayer.tsx
+++ b/web/pageComponents/shared/VideoPlayer.tsx
@@ -27,7 +27,7 @@ const getHeightWidth = (aspectRatio: string, height?: number | string) => {
   if (!height) {
     switch (aspectRatio) {
       case VideoPlayerRatios['1:1']:
-        return 'h-[320px] sm: h-[320px] sm: w-[320px] md: h-[487px] md: w-[487px] lg: h-[600px] lg: w-[600px]'
+        return 'h-[320px] sm:h-[320px] sm:w-[320px] md:h-[487px] md:w-[487px] lg:h-[600px] lg:w-[600px]'
       case VideoPlayerRatios['16:9']:
         return 'h-[56.25%] w-full'
       case VideoPlayerRatios['9:16']: