:bug Fix video small bugs #2393 (#2394)

* 🎨 add play and pause icons and swithc with unicode

* 🐛 fix spacing bug

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>
       )}

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

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

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'

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']: