Add fullscreen player view (#27)

* Add store controls for fullscreen player

* Normalize styles for playback config

* Add fullscreen player component

* Add option component

* Update player controls to use option/popover components

* Add esc hotkey to close player

* Add usePlayerData hook
This commit is contained in:
Jeff 2023-03-28 14:19:23 -07:00 committed by GitHub
parent 6cfdb8ff84
commit e47fcfc62e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 780 additions and 62 deletions

View file

@ -48,21 +48,21 @@
--btn-primary-fg: #ffffff;
--btn-primary-fg-hover: #ffffff;
--btn-primary-border: none;
--btn-primary-radius: 0;
--btn-primary-radius: 4px;
--btn-default-bg: rgb(31, 31, 32);
--btn-default-bg-hover: rgb(63, 63, 63);
--btn-default-fg: rgb(193, 193, 193);
--btn-default-fg-hover: rgb(193, 193, 193);
--btn-default-border: none;
--btn-default-radius: 0;
--btn-default-radius: 2px;
--btn-subtle-bg: transparent;
--btn-subtle-bg-hover: transparent;
--btn-subtle-fg: rgb(220, 220, 220);
--btn-subtle-fg-hover: rgb(255, 255, 255);
--btn-subtle-border: none;
--btn-subtle-radius: 0;
--btn-subtle-radius: 4px;
--btn-outline-bg: transparent;
--btn-outline-bg-hover: transparent;
@ -77,13 +77,13 @@
--input-active-fg: rgb(193, 193, 193);
--input-active-bg: rgba(255, 255, 255, 0.1);
--dropdown-menu-bg: rgb(45, 45, 45);
--dropdown-menu-bg: rgb(32, 32, 32);
--dropdown-menu-fg: rgb(235, 235, 235);
--dropdown-menu-item-padding: 0.8rem;
--dropdown-menu-item-font-size: 1rem;
--dropdown-menu-bg-hover: rgb(62, 62, 62);
--dropdown-menu-border: 1px var(--generic-border-color) solid;
--dropdown-menu-border-radius: 0;
--dropdown-menu-border-radius: 4px;
--switch-track-bg: rgb(50, 50, 50);
--switch-track-enabled-bg: var(--primary-color);
@ -106,7 +106,7 @@
--paper-bg: rgb(20, 20, 20);
--placeholder-bg: rgba(53, 53, 53, 0.5);
--placeholder-bg: rgba(53, 53, 53, 1);
--placeholder-fg: rgba(126, 126, 126);
--card-default-bg: rgb(32, 32, 32);

View file

@ -52,6 +52,13 @@ body[data-theme='defaultLight'] {
--btn-subtle-fg: rgb(80, 80, 80);
--btn-subtle-fg-hover: rgb(0, 0, 0);
--btn-outline-bg: transparent;
--btn-outline-bg-hover: transparent;
--btn-outline-fg: rgb(60, 60, 60);
--btn-outline-fg-hover: rgb(0, 0, 0);
--btn-outline-border: 1px rgba(140, 140, 140, 0.5) solid;
--btn-outline-radius: 1px;
--input-bg: rgb(240, 241, 242);
--input-fg: rgb(0, 0, 0);
--input-placeholder-fg: rgb(119, 126, 139);