@mui/icons-material#PlayArrow TypeScript Examples

The following examples show how to use @mui/icons-material#PlayArrow. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: ResumeFAB.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

6 votes

export default function ResumeFab(props: ResumeFABProps) {
    const { chapter: { index, lastPageRead }, mangaId } = props;
    return (
        <Fab
            sx={{ position: 'fixed', bottom: '2em', right: '3em' }}
            component={Link}
            variant="extended"
            color="primary"
            to={`/manga/${mangaId}/chapter/${index}/page/${lastPageRead}`}
        >
            <PlayArrow />
            {index === 1 ? 'Start' : 'Resume' }
        </Fab>
    );
}

Example #2

Source File: PlayButton.tsx From your_spotify with GNU General Public License v3.0

6 votes

export default function PlayButton({ id, className }: PlayButtonProps) {
  const dispatch = useAppDispatch();

  const play = useCallback(() => {
    dispatch(playTrack(id));
  }, [dispatch, id]);

  return (
    <IconButton size="small" onClick={play} className={clsx(s.root, className)}>
      <PlayArrow />
    </IconButton>
  );
}

Example #3

Source File: Track.tsx From your_spotify with GNU General Public License v3.0

5 votes

export default function Track(props: TrackProps | HeaderTrackProps) {
  const trackId = props.line ? null : props.track.id;
  const play = useCallback(async () => {
    if (!trackId) return;
    try {
      await api.play(trackId);
    } catch (e) {
      console.error(e);
    }
  }, [trackId]);

  const upmd = useMediaQuery('(min-width: 1150px)');

  if (props.line) {
    return (
      <div className={s.root}>
        <div className={clsx(s.name, s.header)}>
          <Text className={s.trackname}>Track name / Artist</Text>
        </div>
        {upmd && <Text className={clsx(s.albumname, s.header)}>Album name</Text>}
        {upmd && <Text className={clsx(s.duration, s.header)}>Duration</Text>}
        <Text className={clsx(s.sumcount, s.header)}>Count</Text>
        <Text className={clsx(s.sumduration, s.header)}>Total duration</Text>
      </div>
    );
  }

  const { track, album, artists, playable, duration, totalDuration, count, totalCount } = props;
  return (
    <div className={s.root}>
      {playable && (
        <IconButton className={s.play} size="small" onClick={play}>
          <PlayArrow />
        </IconButton>
      )}
      <img className={s.albumcover} src={getImage(album)} alt="Album cover" />
      <div className={s.name}>
        <Text className={s.trackname}>{track.name}</Text>
        <Text className={s.artistname}>
          {artists.map((art) => (
            <React.Fragment key={art.id}>
              <InlineArtist key={art.id} artist={art} />{' '}
            </React.Fragment>
          ))}
        </Text>
      </div>
      {upmd && <Text className={s.albumname}>{album.name}</Text>}
      {upmd && <Text className={s.duration}>{msToMinutesAndSeconds(track.duration_ms)}</Text>}
      <Text className={s.sumcount}>
        {count} {upmd && <Text>({Math.floor((count / totalCount) * 10000) / 100})</Text>}
      </Text>
      <Text className={s.sumduration}>
        {msToMinutesAndSeconds(duration)}{' '}
        {upmd && <Text>({Math.floor((duration / totalDuration) * 10000) / 100})</Text>}
      </Text>
    </div>
  );
}

Example #4

Source File: Profiler.tsx From NekoMaid with MIT License

5 votes

Profiler: React.FC = () => {
  const plugin = usePlugin()
  const theme = useTheme()
  const globalData = useGlobalData()
  const [tab, setTab] = useState(0)
  const [key, setTKey] = useState(0)
  const [status, setStatus] = useState(!!globalData.profilerStarted)
  useEffect(() => {
    const off = plugin.on('profiler:status', setStatus)
    return () => { off() }
  }, [])

  const transitionDuration = {
    enter: theme.transitions.duration.enteringScreen,
    exit: theme.transitions.duration.leavingScreen
  }
  const Elm = components[tab]

  const createFab = (onClick: any, children: any, show: boolean) => <Zoom
    in={show}
    timeout={transitionDuration}
    style={{ transitionDelay: (show ? transitionDuration.exit : 0) + 'ms' }}
    unmountOnExit
  >
    <Fab
      color='primary'
      sx={{ position: 'fixed', bottom: { xs: 16, sm: 40 }, right: { xs: 16, sm: 40 }, zIndex: 3 }}
      onClick={onClick}
    >{children}</Fab>
  </Zoom>

  return <Box sx={{ minHeight: status || !tab ? '100%' : undefined }}>
    <Toolbar />
    <Paper square variant='outlined' sx={{ margin: '0 -1px', position: 'fixed', width: 'calc(100% + 1px)', zIndex: 3 }}>
      <Tabs value={tab} onChange={(_, it) => setTab(it)} variant='scrollable' scrollButtons='auto'>
        <Tab label={lang.profiler.summary} />
        <Tab label='Timings' disabled={!globalData.hasTimings} />
        <Tab label={lang.profiler.plugins} />
        <Tab label={lang.profiler.carbageCollection} />
        <Tab label={lang.profiler.entities} />
        <Tab label={lang.profiler.heap} />
        <Tab label={lang.profiler.threads} />
      </Tabs>
    </Paper>
    <Tabs />
    {tab < 4 && !status ? <Box sx={{ textAlign: 'center', marginTop: '40vh' }}>{lang.profiler.notStarted}</Box> : Elm && <Elm key={key} />}
    {createFab(() => plugin.emit('profiler:status', !status), status ? <Stop /> : <PlayArrow />, tab < 4)}
    {createFab(() => setTKey(key + 1), <Refresh />, tab >= 4)}
  </Box>
}