ash/WebStudio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

button styling

Browse source
This commit is contained in:
thekingofjibs 2020-03-18 15:26:26 +00:00 committed by Marks Polakovs
parent 2e5fbf3356
commit 2764bb60c8
21 changed files with 65 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/App.css
View file

@ -75,7 +75,7 @@ html, body, #root {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
height: 100vh;
}
.react-contextmenu--visible {
@ -93,6 +93,14 @@ html, body, #root {
cursor: not-allowed;
}
.mediaButtons button{
width: 32%;
height: 95%;
border-radius: 20%;
border-style: none;
margin: .5%;
}
.sp-state-playing {
background-color: #2cdb2c;
}
@ -105,8 +113,6 @@ html, body, #root {
background-color: #db2c2c;
}
.mediaButtons button{
width: 33%;
height: 100%;
button{
background-color: rgb(199, 199, 199);
}

1
src/assets/icons/pause-circle-outline.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="208" y1="192" x2="208" y2="320" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/><line x1="304" y1="192" x2="304" y2="320" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 543 B

1
src/assets/icons/pause-circle-sharp.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48ZM224,336H192V176h32Zm96,0H288V176h32Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 258 B

1
src/assets/icons/pause-circle.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48ZM224,320a16,16,0,0,1-32,0V192a16,16,0,0,1,32,0Zm96,0a16,16,0,0,1-32,0V192a16,16,0,0,1,32,0Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 312 B

1
src/assets/icons/pause-outline.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><rect x="176" y="96" width="16" height="320" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="320" y="96" width="16" height="320" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 395 B

1
src/assets/icons/pause-sharp.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M224,432H144V80h80Z"/><path d="M368,432H288V80h80Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 183 B

1
src/assets/icons/pause.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M208,432H160a16,16,0,0,1-16-16V96a16,16,0,0,1,16-16h48a16,16,0,0,1,16,16V416A16,16,0,0,1,208,432Z"/><path d="M352,432H304a16,16,0,0,1-16-16V96a16,16,0,0,1,16-16h48a16,16,0,0,1,16,16V416A16,16,0,0,1,352,432Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 339 B

1
src/assets/icons/play-circle-outline.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><path d="M216.32,334.44,330.77,265.3a10.89,10.89,0,0,0,0-18.6L216.32,177.56A10.78,10.78,0,0,0,200,186.87V325.13A10.78,10.78,0,0,0,216.32,334.44Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 424 B

1
src/assets/icons/play-circle-sharp.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48ZM200,344V168l144,88Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 241 B

1
src/assets/icons/play-circle.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48Zm74.77,217.3L216.32,334.44A10.78,10.78,0,0,1,200,325.13V186.87a10.78,10.78,0,0,1,16.32-9.31L330.77,246.7A10.89,10.89,0,0,1,330.77,265.3Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 357 B

1
src/assets/icons/play-outline.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M112,111V401c0,17.44,17,28.52,31,20.16l247.9-148.37c12.12-7.25,12.12-26.33,0-33.58L143,90.84C129,82.48,112,93.56,112,111Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 323 B

1
src/assets/icons/play-sharp.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><polygon points="96 448 416 256 96 64 96 448"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 168 B

1
src/assets/icons/play.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M133,440a35.37,35.37,0,0,1-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37,7.46-27.53,19.46-34.33a35.13,35.13,0,0,1,35.77.45L399.12,225.48a36,36,0,0,1,0,61L151.23,434.88A35.5,35.5,0,0,1,133,440Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 330 B

1
src/assets/icons/stop-circle-outline.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><path d="M310.4,336H201.6A25.62,25.62,0,0,1,176,310.4V201.6A25.62,25.62,0,0,1,201.6,176H310.4A25.62,25.62,0,0,1,336,201.6V310.4A25.62,25.62,0,0,1,310.4,336Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 436 B

1
src/assets/icons/stop-circle-sharp.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48Zm80,288H176V176H336Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 241 B

1
src/assets/icons/stop-circle.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48Zm80,262.4A25.62,25.62,0,0,1,310.4,336H201.6A25.62,25.62,0,0,1,176,310.4V201.6A25.62,25.62,0,0,1,201.6,176H310.4A25.62,25.62,0,0,1,336,201.6Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 361 B

1
src/assets/icons/stop-outline.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><rect x="96" y="96" width="320" height="320" rx="24" ry="24" style="fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 253 B

1
src/assets/icons/stop-sharp.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><rect x="80" y="80" width="352" height="352"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 167 B

1
src/assets/icons/stop.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-c</title><path d="M392,432H120a40,40,0,0,1-40-40V120a40,40,0,0,1,40-40H392a40,40,0,0,1,40,40V392A40,40,0,0,1,392,432Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 232 B

16
src/showplanner/index.tsx
View file

@ -33,6 +33,10 @@ import {
import * as PlayerState from "./player/state";
import playLogo from '../assets/icons/play.svg'
import pauseLogo from '../assets/icons/pause.svg'
import stopLogo from '../assets/icons/stop.svg'
const CML_CACHE: { [recordid_trackid: string]: Track } = {};
const TS_ITEM_MENU_ID = "SongMenu";
@ -88,15 +92,21 @@ function Player({ id }: { id: number }) {
<button
onClick={() => dispatch(PlayerState.play(id))}
className={playerState.state === "playing" ? "sp-state-playing" : ""}
>p</button>
>
<img src={playLogo} style={{height:"10vh"}}/>
</button>
<button
onClick={() => dispatch(PlayerState.pause(id))}
className={playerState.state === "paused" ? "sp-state-paused" : ""}
>a</button>
>
<img src={pauseLogo} style={{height:"10vh"}}/>
</button>
<button
onClick={() => dispatch(PlayerState.stop(id))}
className={playerState.state === "stopped" ? "sp-state-stopped" : ""}
>s</button>
>
<img src={stopLogo} style={{height:"10vh"}}/>
</button>
</div>
</div>
);

34
src/showplanner/player/state.ts
View file

@ -92,22 +92,34 @@ export const load = (player: number, item: PlanItem | Track): AppThunk => dispat
}
export const play = (player: number): AppThunk => dispatch => {
playerSources[player].mediaElement.play();
dispatch(playerState.actions.setPlayerState({ player, state: "playing" }));
try{
playerSources[player].mediaElement.play();
dispatch(playerState.actions.setPlayerState({ player, state: "playing" }));
} catch {
console.log("nothing selected/loaded");
}
};
export const pause = (player: number): AppThunk => dispatch => {
if (playerSources[player].mediaElement.paused) {
playerSources[player].mediaElement.play();
dispatch(playerState.actions.setPlayerState({ player, state: "playing" }));
} else {
playerSources[player].mediaElement.pause();
dispatch(playerState.actions.setPlayerState({ player, state: "paused" }));
try{
if (playerSources[player].mediaElement.paused) {
playerSources[player].mediaElement.play();
dispatch(playerState.actions.setPlayerState({ player, state: "playing" }));
} else {
playerSources[player].mediaElement.pause();
dispatch(playerState.actions.setPlayerState({ player, state: "paused" }));
}
} catch {
console.log("nothing selected/loaded");
}
};
export const stop = (player: number): AppThunk => dispatch => {
playerSources[player].mediaElement.pause();
playerSources[player].mediaElement.currentTime = 0;
dispatch(playerState.actions.setPlayerState({ player, state: "stopped" }));
try{
playerSources[player].mediaElement.pause();
playerSources[player].mediaElement.currentTime = 0;
dispatch(playerState.actions.setPlayerState({ player, state: "stopped" }));
} catch {
console.log("nothing selected/loaded");
}
};