tomru/advcal
1
0
Fork 0
mirror of https://github.com/tomru/advcal.git synced 2026-03-03 06:27:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

replace utf-8 chars with SVGs

Browse Source
This commit is contained in:
Thomas Ruoff
2020-11-28 14:31:39 +01:00
parent f6e08255a6
commit c2b331db18
3 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/controls.jsx
View File

@@ -10,22 +10,30 @@ const Controls = ({ playerState, onPause, onPlay, onRestart }) => {
<div className="player-controls"> <div className="player-controls">
{playerState === PLAYING && ( {playerState === PLAYING && (
<a onClick={onPause} title="Pause"> <a onClick={onPause} title="Pause">
⏸ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
</a> </a>
)} )}
{playerState === PAUSED && ( {playerState === PAUSED && (
<a onClick={onPlay} title="Play"> <a onClick={onPlay} title="Play">
▶ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
</svg>
</a> </a>
)} )}
{[PLAYING, PAUSED].includes(playerState) && ( {[PLAYING, PAUSED].includes(playerState) && (
<a onClick={onRestart} title="Von Vorne"> <a onClick={onRestart} title="Von Vorne">
⏮ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
</svg>
</a> </a>
)} )}
{playerState === ENDED && ( {playerState === ENDED && (
<a onClick={onPlay} title="Play"> <a onClick={onPlay} title="Play">
▶ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
</svg>
</a> </a>
)} )}
</div> </div>

8
components/player.jsx
View File

@@ -45,10 +45,14 @@ const Player = ({ hidden }) => {
<div className={hidden ? "hidden" : undefined}> <div className={hidden ? "hidden" : undefined}>
<div id="player" /> <div id="player" />
</div> </div>
{hidden && playerState === -1 && <span>🎶 Titel laden...</span>} {hidden && playerState === -1 && <span>Titel laden...</span>}
{hidden && playerState > -1 && ( {hidden && playerState > -1 && (
<Fragment> <Fragment>
<span>🎶 Titel spielt</span> <span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" fill="currentColor">
<path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
</svg>{' '}
Titel spielt</span>
<Controls <Controls
playerState={playerState} playerState={playerState}
onPause={onPause} onPause={onPause}

6
components/showdoordialog.jsx
View File

@@ -22,8 +22,10 @@ const ShowDoorDialog = () => {
return ( return (
<div className="door-mask" onClick={handleClose}> <div className="door-mask" onClick={handleClose}>
<div className="door" onClick={event => event.stopPropagation()}> <div className="door" onClick={event => event.stopPropagation()}>
<a className="door-close" onClick={handleClose}> <a className="door-close" onClick={handleClose} title="Schließen">
❌ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="25px">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a> </a>
<h1>Türchen {openSongIndex + 1}</h1> <h1>Türchen {openSongIndex + 1}</h1>
<Player hidden={!showSolution} /> <Player hidden={!showSolution} />