Skip to content

Commit

Permalink
Remote UI cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@iBicha
iBicha committed Nov 15, 2023
1 parent ed56721 commit 27b307c
Show file tree
Hide file tree
Showing 17 changed files with 266 additions and 143 deletions.
18 changes: 18 additions & 0 deletions playlet-web/src/assets/remote-control/arrow-back.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<svg
name="arrow-back"
class="ret-icon arrow-back remote-arrow-back"
width="14px"
height="14px"
viewBox="0 0 17 14"
><g
><g fill="#FFF" transform="translate(-183 -616)"
><g transform="translate(111 553)"
><g transform="translate(15 49)"
><path
d="M72.115 19.39l.025.006H61.433l3.366-3.374a.876.876 0 00.255-.622.874.874 0 00-.255-.62l-.524-.524a.868.868 0 00-.618-.256.868.868 0 00-.618.255l-5.77 5.77a.867.867 0 00-.255.619c0 .235.09.456.255.62l5.77 5.77a.868.868 0 00.618.255c.234 0 .454-.09.618-.255l.524-.524a.867.867 0 00.255-.618.84.84 0 00-.255-.606l-3.404-3.392h10.732a.907.907 0 00.887-.898v-.74c0-.483-.417-.866-.9-.866z"
/></g
></g
></g
></g
>
</svg>
12 changes: 12 additions & 0 deletions playlet-web/src/assets/remote-control/arrow-down.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<svg
name="arrow_down"
class="ret-icon arrow_down remote-arrow-down"
width="14px"
height="14px"
viewBox="0 0 18 12"
><polygon
fill="#FFF"
transform="translate(-68.000000, -1097.000000) translate(68.000000, 1097.000000) translate(9.000000, 5.928571) rotate(90.000000) translate(-9.000000, -5.928571) "
points="5.58223573 -3.07142857 3.5 -0.969991371 10.3355285 5.92857143 3.5 12.8252596 5.58223573 14.9285714 14.5 5.92857143"
/></svg
>
12 changes: 12 additions & 0 deletions playlet-web/src/assets/remote-control/arrow-left.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<svg
name="arrow_left"
class="ret-icon arrow_left remote-arrow-down"
width="14px"
height="14px"
viewBox="0 0 13 18"
><polygon
fill="#FFF"
transform="translate(-426.000000, -1322.000000) translate(427.000000, 1322.000000) translate(5.500000, 9.000000) scale(-1, 1) translate(-5.500000, -9.000000) "
points="2.08223573 0 0 2.1014372 6.83552854 9 0 15.8966882 2.08223573 18 11 9"
/></svg
>
12 changes: 12 additions & 0 deletions playlet-web/src/assets/remote-control/arrow-right.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<svg
name="arrow_right"
class="ret-icon arrow_right remote-arrow-down"
width="14px"
height="14px"
viewBox="0 0 13 18"
><polygon
fill="#FFF"
points="2.08223573 0 0 2.1014372 6.83552854 9 0 15.8966882 2.08223573 18 11 9"
transform="translate(-360.000000, -809.000000) translate(361.000000, 809.000000)"
/></svg
>
12 changes: 12 additions & 0 deletions playlet-web/src/assets/remote-control/arrow-up.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<svg
name="arrow_up"
class="ret-icon arrow_up remote-arrow-down"
width="14px"
height="14px"
viewBox="0 0 18 12"
><polygon
fill="#FFF"
transform="translate(-423.000000, -1139.000000) translate(423.000000, 1139.000000) translate(9.000000, 6.071429) scale(1, -1) rotate(90.000000) translate(-9.000000, -6.071429) "
points="5.58223573 -2.92857143 3.5 -0.827134228 10.3355285 6.07142857 3.5 12.9681168 5.58223573 15.0714286 14.5 6.07142857"
/></svg
>
16 changes: 16 additions & 0 deletions playlet-web/src/assets/remote-control/fast-backward.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<svg name="fast-forward-left" width="14px" height="14px" viewBox="0 0 21 15"
><g
><g fill="#FFF" transform="translate(-158 -886)"
><g transform="translate(111 553)"
><g transform="translate(15 49)"
><g transform="translate(0 270)"
><path
d="M51.919 20.73l-9.474-6.666a.35.35 0 00-.552.287v6.237l-9.272-6.52a.352.352 0 00-.553.287V27.68a.351.351 0 00.553.287l9.272-6.52v6.237a.351.351 0 00.552.287l9.474-6.667a.35.35 0 000-.573z"
transform="matrix(-1 0 0 1 84.136 0)"
/></g
></g
></g
></g
></g
></svg
>
15 changes: 15 additions & 0 deletions playlet-web/src/assets/remote-control/fast-forward.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<svg name="fast-forward-right" width="14px" height="14px" viewBox="0 0 21 15"
><g
><g fill="#FFF" transform="translate(-344 -886)"
><g transform="translate(111 553)"
><g transform="translate(15 49)"
><g transform="translate(185.1 270)"
><path
d="M53.449 20.73l-9.474-6.666a.35.35 0 00-.553.287v6.237l-9.272-6.52a.352.352 0 00-.552.287V27.68a.351.351 0 00.552.287l9.272-6.52v6.237a.351.351 0 00.553.287l9.474-6.667a.35.35 0 000-.573z"
/></g
></g
></g
></g
></g
></svg
>
20 changes: 20 additions & 0 deletions playlet-web/src/assets/remote-control/home.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<svg
name="home"
class="ret-icon home remote-home"
width="14px"
height="14px"
viewBox="0 0 16 14"
><g
><g fill="#FFF" transform="translate(-323 -615)"
><g transform="translate(111 553)"
><g transform="translate(15 49)"
><g transform="translate(139.972)"
><path
d="M59.0141643 27L64.013762 27 64.013762 23 66.0141643 23 66.0141643 27 71.0143655 27 71.0143655 21 73.0141643 21 65.0143655 13 57.0141643 21 59.0141643 21z"
/></g
></g
></g
></g
></g
></svg
>
15 changes: 15 additions & 0 deletions playlet-web/src/assets/remote-control/instant-replay.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<svg name="repeat" width="14px" height="14px" viewBox="0 0 16 17"
><g
><g fill="#FFF" transform="translate(-183 -830)"
><g transform="translate(111 553)"
><g transform="translate(15 49)"
><g transform="translate(0 216)"
><path
d="M65.397 28.555c-4.136 0-7.5-3.367-7.5-7.502s3.364-7.502 7.5-7.502c.275 0 .552.016.828.047v-1.212c0-.156.096-.298.238-.358a.393.393 0 01.423.087l2.658 2.663a.385.385 0 010 .546l-2.656 2.669a.392.392 0 01-.425.084.392.392 0 01-.238-.357v-1.345a4.757 4.757 0 00-5.58 4.678 4.759 4.759 0 004.752 4.752c2.62 0 4.75-2.134 4.75-4.752 0-.213.174-.387.389-.387h1.973c.214 0 .388.174.388.387 0 4.135-3.367 7.502-7.5 7.502z"
/></g
></g
></g
></g
></g
></svg
>
1 change: 1 addition & 0 deletions playlet-web/src/assets/remote-control/ok.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<span class="font-semibold text-sm">OK</span>
15 changes: 15 additions & 0 deletions playlet-web/src/assets/remote-control/options.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<svg name="asterisc" width="14px" height="14px" viewBox="0 0 16 17"
><g
><g fill="#FFF" transform="translate(-323 -830)"
><g transform="translate(111 553)"
><g transform="translate(15 49)"
><g transform="translate(139.972 216)"
><path
d="M72.132 17.016c0 .738-.864 1.46-2.59 2.166-1.743.707-2.63 1.123-2.661 1.248-.032.173.8.55 2.496 1.13 1.68.597 2.52 1.327 2.52 2.19 0 .22-.048.448-.142.683-.267.707-.683 1.06-1.248 1.06-.33 0-.726-.134-1.19-.4-.462-.267-1.016-.66-1.66-1.178-1.145-.957-1.789-1.381-1.93-1.271-.063.047-.094.164-.094.353 0 .157.07.69.211 1.601.142.926.212 1.64.212 2.143 0 1.444-.51 2.19-1.53 2.237-1.1.016-1.649-.714-1.649-2.19 0-.251.02-.557.06-.918.039-.361.097-.77.176-1.225.173-.957.259-1.523.259-1.695 0-.22-.055-.37-.165-.448-.173-.125-.761.306-1.766 1.295-1.115 1.1-2.033 1.649-2.755 1.649-.361 0-.707-.118-1.036-.353-.346-.267-.518-.55-.518-.848 0-.644.832-1.42 2.496-2.331 1.648-.91 2.457-1.452 2.425-1.625-.015-.283-.824-.683-2.425-1.201s-2.402-1.209-2.402-2.072c0-.267.086-.589.259-.966.204-.518.542-.777 1.013-.777.627 0 1.593.55 2.896 1.649 1.224 1.004 1.915 1.452 2.072 1.342a.67.67 0 00.094-.377c0-.204-.11-.816-.33-1.837a33.535 33.535 0 01-.223-1.318 6.849 6.849 0 01-.082-.966c0-1.177.502-1.766 1.507-1.766.957 0 1.436.644 1.436 1.93 0 .44-.07 1.092-.212 1.955-.141.848-.212 1.413-.212 1.696 0 .392.094.62.283.683.188.063.855-.408 2.001-1.413 1.146-1.02 2.057-1.53 2.732-1.53.408 0 .793.18 1.154.54.345.346.518.73.518 1.155z"
/></g
></g
></g
></g
></g
></svg
>
15 changes: 15 additions & 0 deletions playlet-web/src/assets/remote-control/play.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<svg name="play" width="14px" height="14px" viewBox="0 0 11 14"
><g
><g fill="#FFF" transform="translate(-258 -886)"
><g transform="translate(111 553)"
><g transform="translate(15 49)"
><g transform="translate(92.55 270)"
><path
d="M50.278 20.725L40.61 14.06a.335.335 0 00-.523.274v13.334a.334.334 0 00.523.274l9.667-6.667a.333.333 0 000-.549z"
/></g
></g
></g
></g
></g
></svg
>
12 changes: 12 additions & 0 deletions playlet-web/src/assets/remote-control/volume-down.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="currentColor"
class="bi bi-volume-down-fill"
viewBox="0 0 16 16"
>
<path
d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zm3.025 4a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z"
/>
</svg>
12 changes: 12 additions & 0 deletions playlet-web/src/assets/remote-control/volume-mute.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="currentColor"
class="bi bi-volume-mute-fill"
viewBox="0 0 16 16"
>
<path
d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z"
/>
</svg>
18 changes: 18 additions & 0 deletions playlet-web/src/assets/remote-control/volume-up.svg.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="currentColor"
class="bi bi-volume-up-fill"
viewBox="0 0 16 16"
>
<path
d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
/>
<path
d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
/>
<path
d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"
/>
</svg>
18 changes: 18 additions & 0 deletions playlet-web/src/lib/Screens/RemoteControl/RemoteButton.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script lang="ts">
import { ExternalControlProtocol } from "lib/Api/ExternalControlProtocol";
export let key: string;
export let icon;
function pressKey() {
console.log(`Sending key: ${key}`);
ExternalControlProtocol.pressKey(key);
}
</script>

<button
on:click={pressKey}
class="w-28 h-11 btn-primary rounded-xl flex items-center justify-center"
>
<svelte:component this={icon} />
</button>
Loading

0 comments on commit 27b307c

Please sign in to comment.