From 2764bb60c8f5c5496e824830c467af0830fcd76a Mon Sep 17 00:00:00 2001 From: thekingofjibs Date: Wed, 18 Mar 2020 15:26:26 +0000 Subject: [PATCH] button styling --- src/App.css | 16 +++++++---- src/assets/icons/pause-circle-outline.svg | 1 + src/assets/icons/pause-circle-sharp.svg | 1 + src/assets/icons/pause-circle.svg | 1 + src/assets/icons/pause-outline.svg | 1 + src/assets/icons/pause-sharp.svg | 1 + src/assets/icons/pause.svg | 1 + src/assets/icons/play-circle-outline.svg | 1 + src/assets/icons/play-circle-sharp.svg | 1 + src/assets/icons/play-circle.svg | 1 + src/assets/icons/play-outline.svg | 1 + src/assets/icons/play-sharp.svg | 1 + src/assets/icons/play.svg | 1 + src/assets/icons/stop-circle-outline.svg | 1 + src/assets/icons/stop-circle-sharp.svg | 1 + src/assets/icons/stop-circle.svg | 1 + src/assets/icons/stop-outline.svg | 1 + src/assets/icons/stop-sharp.svg | 1 + src/assets/icons/stop.svg | 1 + src/showplanner/index.tsx | 16 +++++++++-- src/showplanner/player/state.ts | 34 +++++++++++++++-------- 21 files changed, 65 insertions(+), 19 deletions(-) create mode 100644 src/assets/icons/pause-circle-outline.svg create mode 100644 src/assets/icons/pause-circle-sharp.svg create mode 100644 src/assets/icons/pause-circle.svg create mode 100644 src/assets/icons/pause-outline.svg create mode 100644 src/assets/icons/pause-sharp.svg create mode 100644 src/assets/icons/pause.svg create mode 100644 src/assets/icons/play-circle-outline.svg create mode 100644 src/assets/icons/play-circle-sharp.svg create mode 100644 src/assets/icons/play-circle.svg create mode 100644 src/assets/icons/play-outline.svg create mode 100644 src/assets/icons/play-sharp.svg create mode 100644 src/assets/icons/play.svg create mode 100644 src/assets/icons/stop-circle-outline.svg create mode 100644 src/assets/icons/stop-circle-sharp.svg create mode 100644 src/assets/icons/stop-circle.svg create mode 100644 src/assets/icons/stop-outline.svg create mode 100644 src/assets/icons/stop-sharp.svg create mode 100644 src/assets/icons/stop.svg diff --git a/src/App.css b/src/App.css index f67802e..e354c5a 100644 --- a/src/App.css +++ b/src/App.css @@ -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); } - diff --git a/src/assets/icons/pause-circle-outline.svg b/src/assets/icons/pause-circle-outline.svg new file mode 100644 index 0000000..79f02ea --- /dev/null +++ b/src/assets/icons/pause-circle-outline.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/pause-circle-sharp.svg b/src/assets/icons/pause-circle-sharp.svg new file mode 100644 index 0000000..456f5cd --- /dev/null +++ b/src/assets/icons/pause-circle-sharp.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/pause-circle.svg b/src/assets/icons/pause-circle.svg new file mode 100644 index 0000000..7db385c --- /dev/null +++ b/src/assets/icons/pause-circle.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/pause-outline.svg b/src/assets/icons/pause-outline.svg new file mode 100644 index 0000000..83f4e94 --- /dev/null +++ b/src/assets/icons/pause-outline.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/pause-sharp.svg b/src/assets/icons/pause-sharp.svg new file mode 100644 index 0000000..6d084cc --- /dev/null +++ b/src/assets/icons/pause-sharp.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg new file mode 100644 index 0000000..9ae208d --- /dev/null +++ b/src/assets/icons/pause.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/play-circle-outline.svg b/src/assets/icons/play-circle-outline.svg new file mode 100644 index 0000000..ef02d64 --- /dev/null +++ b/src/assets/icons/play-circle-outline.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/play-circle-sharp.svg b/src/assets/icons/play-circle-sharp.svg new file mode 100644 index 0000000..76ef731 --- /dev/null +++ b/src/assets/icons/play-circle-sharp.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/play-circle.svg b/src/assets/icons/play-circle.svg new file mode 100644 index 0000000..2fcd4f8 --- /dev/null +++ b/src/assets/icons/play-circle.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/play-outline.svg b/src/assets/icons/play-outline.svg new file mode 100644 index 0000000..a9bb95b --- /dev/null +++ b/src/assets/icons/play-outline.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/play-sharp.svg b/src/assets/icons/play-sharp.svg new file mode 100644 index 0000000..3fcc324 --- /dev/null +++ b/src/assets/icons/play-sharp.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg new file mode 100644 index 0000000..b65be2d --- /dev/null +++ b/src/assets/icons/play.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/stop-circle-outline.svg b/src/assets/icons/stop-circle-outline.svg new file mode 100644 index 0000000..a30a61c --- /dev/null +++ b/src/assets/icons/stop-circle-outline.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/stop-circle-sharp.svg b/src/assets/icons/stop-circle-sharp.svg new file mode 100644 index 0000000..1ae1ba7 --- /dev/null +++ b/src/assets/icons/stop-circle-sharp.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/stop-circle.svg b/src/assets/icons/stop-circle.svg new file mode 100644 index 0000000..dacfa1c --- /dev/null +++ b/src/assets/icons/stop-circle.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/stop-outline.svg b/src/assets/icons/stop-outline.svg new file mode 100644 index 0000000..9eca411 --- /dev/null +++ b/src/assets/icons/stop-outline.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/stop-sharp.svg b/src/assets/icons/stop-sharp.svg new file mode 100644 index 0000000..2cec405 --- /dev/null +++ b/src/assets/icons/stop-sharp.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/assets/icons/stop.svg b/src/assets/icons/stop.svg new file mode 100644 index 0000000..7c7a2fb --- /dev/null +++ b/src/assets/icons/stop.svg @@ -0,0 +1 @@ +ionicons-v5-c \ No newline at end of file diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx index fb90134..18f5475 100644 --- a/src/showplanner/index.tsx +++ b/src/showplanner/index.tsx @@ -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 }) { + > + + + > + + + > + + ); diff --git a/src/showplanner/player/state.ts b/src/showplanner/player/state.ts index a2bf554..e7e401b 100644 --- a/src/showplanner/player/state.ts +++ b/src/showplanner/player/state.ts @@ -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"); + } }; \ No newline at end of file