Skip to content

Commit

Permalink
Nicer player icons
Browse files Browse the repository at this point in the history
sleepyfran committed Sep 20, 2024

Verified

This commit was signed with the committer’s verified signature.
sleepyfran Fran González
1 parent e51cae3 commit 7ef0e3d
Showing 9 changed files with 190 additions and 18 deletions.
2 changes: 1 addition & 1 deletion packages/components/albums/src/albums.ts
Original file line number Diff line number Diff line change
@@ -119,7 +119,7 @@ export class LibraryAlbum extends LitElement {
/>
`}
<button class="play" @click=${this._onPlayClick} title="Play">
<play-icon size="24"></play-icon>
</button>
</div>
<div class="album-info">
6 changes: 5 additions & 1 deletion packages/components/icons/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
export * from "./src/providers";
export * from "./src/done-icon";
export * from "./src/next-icon";
export * from "./src/play-icon";
export * from "./src/prev-icon";
export * from "./src/pause-icon";
export * from "./src/providers";
export * from "./src/sync-icon";
32 changes: 32 additions & 0 deletions packages/components/icons/src/next-icon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";

/**
* Icon that shows a next icon.
*/
@customElement("next-icon")
export class NextIcon extends LitElement {
@property({ type: Number }) size = 24;
@property({ type: String }) color = "currentColor";

render() {
return html`<svg
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 ${this.size} ${this.size}"
height="${this.size}"
width="${this.size}"
>
<path
d="M6 4h2v2h2v2h2v2h2v4h-2v2h-2v2H8v2H6V4zm12 0h-2v16h2V4z"
fill="currentColor"
/>
</svg>`;
}
}

declare global {
interface HTMLElementTagNameMap {
"next-icon": NextIcon;
}
}
29 changes: 29 additions & 0 deletions packages/components/icons/src/pause-icon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";

/**
* Icon that shows a pause icon.
*/
@customElement("pause-icon")
export class PauseIcon extends LitElement {
@property({ type: Number }) size = 24;
@property({ type: String }) color = "currentColor";

render() {
return html`<svg
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 ${this.size} ${this.size}"
height="${this.size}"
width="${this.size}"
>
<path d="M10 4H5v16h5V4zm9 0h-5v16h5V4z" fill="currentColor" />
</svg>`;
}
}

declare global {
interface HTMLElementTagNameMap {
"pause-icon": PauseIcon;
}
}
32 changes: 32 additions & 0 deletions packages/components/icons/src/play-icon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";

/**
* Icon that shows a play icon.
*/
@customElement("play-icon")
export class PlayIcon extends LitElement {
@property({ type: Number }) size = 24;
@property({ type: String }) color = "currentColor";

render() {
return html`<svg
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 ${this.size} ${this.size}"
height="${this.size}"
width="${this.size}"
>
<path
d="M10 20H8V4h2v2h2v3h2v2h2v2h-2v2h-2v3h-2v2z"
fill="currentColor"
/>
</svg>`;
}
}

declare global {
interface HTMLElementTagNameMap {
"play-icon": PlayIcon;
}
}
32 changes: 32 additions & 0 deletions packages/components/icons/src/prev-icon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";

/**
* Icon that shows a prev icon.
*/
@customElement("prev-icon")
export class PrevIcon extends LitElement {
@property({ type: Number }) size = 24;
@property({ type: String }) color = "currentColor";

render() {
return html`<svg
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 ${this.size} ${this.size}"
height="${this.size}"
width="${this.size}"
>
<path
d="M6 4h2v16H6V4zm12 0h-2v2h-2v3h-2v2h-2v2h2v3h2v2h2v2h2V4z"
fill="currentColor"
/>
</svg>`;
}
}

declare global {
interface HTMLElementTagNameMap {
"prev-icon": PrevIcon;
}
}
3 changes: 2 additions & 1 deletion packages/components/player/package.json
Original file line number Diff line number Diff line change
@@ -7,11 +7,12 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@echo/components-icons": "^1.0.0",
"@echo/components-shared-controllers": "^1.0.0",
"@echo/core-types": "^1.0.0",
"@echo/services-bootstrap-runtime": "^1.0.0",
"effect": "^3.6.5",
"lit": "^3.2.0",
"@lit/task": "^1.0.1"
}
}
}
27 changes: 18 additions & 9 deletions packages/components/player/src/player.ts
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ import {
} from "@echo/core-types";
import { Match } from "effect";
import { EffectFn } from "@echo/components-shared-controllers/src/effect-fn.controller";
import { ButtonType } from "@echo/components-ui-atoms";

Check failure on line 11 in packages/components/player/src/player.ts

GitHub Actions / build (20.x)

'@echo/components-ui-atoms' should be listed in the project's dependencies. Run 'npm i -S @echo/components-ui-atoms' to add it

Check failure on line 11 in packages/components/player/src/player.ts

GitHub Actions / build (21.x)

'@echo/components-ui-atoms' should be listed in the project's dependencies. Run 'npm i -S @echo/components-ui-atoms' to add it

Check failure on line 11 in packages/components/player/src/player.ts

GitHub Actions / build (22.x)

'@echo/components-ui-atoms' should be listed in the project's dependencies. Run 'npm i -S @echo/components-ui-atoms' to add it
import "@echo/components-icons";

/**
* Component that displays the current status of the player.
@@ -107,21 +109,28 @@ export class EchoPlayer extends LitElement {
</div>
${player.status._tag !== "Stopped"
? html`
<button
<echo-button
.type=${ButtonType.Icon}
@click=${this._onPreviousTrack}
?disabled=${!player.previouslyPlayedTracks.length}
>
</button>
<button @click=${this._onTogglePlayback}>
${player.status._tag === "Paused" ? "⏵" : "⏸"}
</button>
<button
<prev-icon></prev-icon>
</echo-button>
<echo-button
.type=${ButtonType.Icon}
@click=${this._onTogglePlayback}
>
${player.status._tag === "Paused"
? html` <play-icon></play-icon> `
: html` <pause-icon></pause-icon> `}
</echo-button>
<echo-button
.type=${ButtonType.Icon}
@click=${this._onSkipTrack}
?disabled=${!player.comingUpTracks.length}
>
</button>
<next-icon></next-icon>
</echo-button>
`
: nothing}
</div>
45 changes: 39 additions & 6 deletions packages/components/ui-atoms/src/button.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";

/**
* Defines the types of buttons that can be used.
*/
export enum ButtonType {
Regular = "regular",
Icon = "icon",
}

/**
* Component that encapsulates the default button of the application.
*/
@@ -9,6 +17,9 @@ export class EchoButton extends LitElement {
@property({ type: Boolean })
disabled = false;

@property({ type: String })
type: ButtonType = ButtonType.Regular;

static styles = css`
button {
background-color: var(--button-background-color);
@@ -24,20 +35,42 @@ export class EchoButton extends LitElement {
background-color: var(--button-hover-background-color);
}
button:focus {
outline: none;
border: 2px solid var(--border-prominent-color);
}
button:disabled {
background-color: var(--disabled-background-color);
cursor: not-allowed;
}
button[icon-only] {
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
height: 1.5rem;
padding: 0;
transition: color var(--short-transition-duration);
}
button[icon-only]:hover {
color: var(--accent-color);
}
button[icon-only]:disabled {
color: var(--disabled-background-color);
cursor: not-allowed;
}
button:focus {
outline: none;
border: 2px solid var(--border-prominent-color);
}
`;

render() {
return html`
<button ?disabled=${this.disabled}>
<button
?icon-only=${this.type === ButtonType.Icon}
?disabled=${this.disabled}
>
<slot></slot>
</button>
`;

0 comments on commit 7ef0e3d

Please sign in to comment.