import { memo, useEffect, useRef } from "react"; export enum Icons { SEARCH = "search", BOOKMARK = "bookmark", BOOKMARK_OUTLINE = "bookmark_outline", CLOCK = "clock", EYE_SLASH = "eyeSlash", ARROW_LEFT = "arrowLeft", ARROW_RIGHT = "arrowRight", CHEVRON_DOWN = "chevronDown", CHEVRON_RIGHT = "chevronRight", CHEVRON_LEFT = "chevronLeft", CLAPPER_BOARD = "clapperBoard", FILM = "film", DRAGON = "dragon", WARNING = "warning", MOVIE_WEB = "movieWeb", DISCORD = "discord", GITHUB = "github", PLAY = "play", PAUSE = "pause", EXPAND = "expand", COMPRESS = "compress", VOLUME = "volume", VOLUME_X = "volume_x", X = "x", EDIT = "edit", AIRPLAY = "airplay", EPISODES = "episodes", SKIP_FORWARD = "skip_forward", SKIP_BACKWARD = "skip_backward", FILE = "file", CAPTIONS = "captions", LINK = "link", CASTING = "casting", DOWNLOAD = "download", } export interface IconProps { icon: Icons; className?: string; } const iconList: Record = { search: ``, bookmark: ``, clock: ``, eyeSlash: ``, arrowLeft: ``, chevronDown: ``, chevronRight: ``, chevronLeft: ``, clapperBoard: ``, film: ``, dragon: ``, warning: ``, arrowRight: ``, movieWeb: ``, discord: ``, github: ``, play: ``, pause: ``, expand: ``, compress: ``, volume: ``, volume_x: ``, x: ``, edit: ``, bookmark_outline: ``, airplay: ``, episodes: ``, skip_forward: ``, skip_backward: ``, file: ``, captions: ``, link: ``, casting: "", download ``, }; function ChromeCastButton() { const ref = useRef(null); useEffect(() => { const tag = document.createElement("google-cast-launcher"); tag.setAttribute("id", "castbutton"); ref.current?.appendChild(tag); }, []); return

; } export const Icon = memo((props: IconProps) => { if (props.icon === Icons.CASTING) { return ; } return ( ); });