podverse-web-adblock/src/components/Player/options/PlayerOptionButton.tsx at main · statusquont/podverse-web-adblock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
  faPlus,
  faCut,
  faShare,
  faExpandAlt,
  faVolumeMute,
  faVolumeUp,
  faCompressAlt,
  faForward
} from '@fortawesome/free-solid-svg-icons'
import classnames from 'classnames'
import { PVLink } from '~/components'

type Props = {
  ariaDescription?: string
  ariaLabel?: string
  ariaPressed?: boolean
  className?: string
  linkUrl?: string
  onClick?: any
  size: 'small' | 'medium' | 'large'
  type:
    | 'speed'
    | 'add'
    | 'make-clip'
    | 'share'
    | 'fullscreen-hide'
    | 'fullscreen-show'
    | 'mute'
    | 'unmute'
    | 'value-enabled'
    | 'skip-ads'
  children?: any
}

export const PlayerOptionButton = ({
  ariaDescription,
  ariaLabel,
  ariaPressed,
  className,
  linkUrl,
  onClick,
  size,
  type,
  children
}: Props) => {
  const wrapperClass = classnames(className, 'player-option-button', size)
  let icon = null
  switch (type) {
    case 'speed':
      icon = null
      break
    case 'add':
      icon = faPlus
      break
    case 'make-clip':
      icon = faCut
      break
    case 'share':
      icon = faShare
      break
    case 'fullscreen-hide':
      icon = faCompressAlt
      break
    case 'fullscreen-show':
      icon = faExpandAlt
      break
    case 'mute':
      icon = faVolumeMute
      break
    case 'unmute':
      icon = faVolumeUp
      break
    case 'skip-ads':
      icon = faForward
      break
    default:
      break
  }

  return (
    <button
      aria-description={ariaDescription}
      aria-label={ariaLabel}
      aria-pressed={ariaPressed}
      className={wrapperClass}
      onClick={onClick}
      {...(type === 'value-enabled' ? { tabIndex: -1 } : {})}
    >
      {icon && <FontAwesomeIcon icon={icon} />}
      {type === 'value-enabled' && (
        <PVLink href={linkUrl} target='_blank'>
          ⚡️
        </PVLink>
      )}
      {children}
    </button>
  )
}