diff options
Diffstat (limited to 'examples/js/media-player')
| -rw-r--r-- | examples/js/media-player/README.md | 5 | ||||
| -rw-r--r-- | examples/js/media-player/app.ts | 11 | ||||
| -rw-r--r-- | examples/js/media-player/style.scss | 1 | ||||
| -rw-r--r-- | examples/js/media-player/widget/MediaPlayer.scss | 56 | ||||
| -rw-r--r-- | examples/js/media-player/widget/MediaPlayer.tsx | 94 |
5 files changed, 0 insertions, 167 deletions
diff --git a/examples/js/media-player/README.md b/examples/js/media-player/README.md deleted file mode 100644 index 4e3d237..0000000 --- a/examples/js/media-player/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Media Player - - - -Using [Mpris](https://aylur.github.io/astal/guide/libraries/mpris). diff --git a/examples/js/media-player/app.ts b/examples/js/media-player/app.ts deleted file mode 100644 index 5b7558a..0000000 --- a/examples/js/media-player/app.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App, Widget } from "astal/gtk3" -import style from "./style.scss" -import MprisPlayers from "./widget/MediaPlayer" - -App.start({ - instanceName: "players", - css: style, - main: () => { - new Widget.Window({}, MprisPlayers()) - } -}) diff --git a/examples/js/media-player/style.scss b/examples/js/media-player/style.scss deleted file mode 100644 index 2e2f625..0000000 --- a/examples/js/media-player/style.scss +++ /dev/null @@ -1 +0,0 @@ -@use "./widget/MediaPlayer.scss"; diff --git a/examples/js/media-player/widget/MediaPlayer.scss b/examples/js/media-player/widget/MediaPlayer.scss deleted file mode 100644 index e1597c2..0000000 --- a/examples/js/media-player/widget/MediaPlayer.scss +++ /dev/null @@ -1,56 +0,0 @@ -// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss -$fg-color: #{"@theme_fg_color"}; -$bg-color: #{"@theme_bg_color"}; - -window { - all: unset; -} - -box.MediaPlayer { - padding: .6rem; - background-color: $bg-color; - - box.cover-art { - min-width: 120px; - min-height: 120px; - border-radius: 9px; - margin-right: .6rem; - background-size: contain; - background-position: center; - } - - box.title { - label { - font-weight: bold; - font-size: 1.1em; - } - } - - scale { - padding: 0; - margin: .4rem 0; - - trough { - min-height: 8px; - } - - highlight { - background-color: $fg-color; - } - - slider { - all: unset; - } - } - - centerbox.actions { - min-width: 220px; - - button { - min-width: 0; - min-height: 0; - padding: .4rem; - margin: 0 .2rem; - } - } -} diff --git a/examples/js/media-player/widget/MediaPlayer.tsx b/examples/js/media-player/widget/MediaPlayer.tsx deleted file mode 100644 index 06c7e77..0000000 --- a/examples/js/media-player/widget/MediaPlayer.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { Astal, Gtk } from "astal/gtk3" -import Mpris from "gi://AstalMpris" -import { bind } from "astal" - -function lengthStr(length: number) { - const min = Math.floor(length / 60) - const sec = Math.floor(length % 60) - const sec0 = sec < 10 ? "0" : "" - return `${min}:${sec0}${sec}` -} - - -function MediaPlayer({ player }: { player: Mpris.Player }) { - const { START, END } = Gtk.Align - - const title = bind(player, "title").as(t => - t || "Unknown Track") - - const artist = bind(player, "artist").as(a => - a || "Unknown Artist") - - const coverArt = bind(player, "coverArt").as(c => - `background-image: url('${c}')`) - - const playerIcon = bind(player, "entry").as(e => - Astal.Icon.lookup_icon(e) ? e : "audio-x-generic-symbolic") - - const position = bind(player, "position").as(p => player.length > 0 - ? p / player.length : 0) - - const playIcon = bind(player, "playbackStatus").as(s => - s === Mpris.PlaybackStatus.PLAYING - ? "media-playback-pause-symbolic" - : "media-playback-start-symbolic" - ) - - return <box className="MediaPlayer"> - <box className="cover-art" css={coverArt} /> - <box vertical> - <box className="title"> - <label truncate hexpand halign={START} label={title} /> - <icon icon={playerIcon} /> - </box> - <label halign={START} valign={START} vexpand wrap label={artist} /> - <slider - visible={bind(player, "length").as(l => l > 0)} - onDragged={({ value }) => player.position = value * player.length} - value={position} - /> - <centerbox className="actions"> - <label - hexpand - className="position" - halign={START} - visible={bind(player, "length").as(l => l > 0)} - label={bind(player, "position").as(lengthStr)} - /> - <box> - <button - onClicked={() => player.previous()} - visible={bind(player, "canGoPrevious")}> - <icon icon="media-skip-backward-symbolic" /> - </button> - <button - onClicked={() => player.play_pause()} - visible={bind(player, "canControl")}> - <icon icon={playIcon} /> - </button> - <button - onClicked={() => player.next()} - visible={bind(player, "canGoNext")}> - <icon icon="media-skip-forward-symbolic" /> - </button> - </box> - <label - className="length" - hexpand - halign={END} - visible={bind(player, "length").as(l => l > 0)} - label={bind(player, "length").as(l => l > 0 ? lengthStr(l) : "0:00")} - /> - </centerbox> - </box> - </box> -} - -export default function MprisPlayers() { - const mpris = Mpris.get_default() - return <box vertical> - {bind(mpris, "players").as(arr => arr.map(player => ( - <MediaPlayer player={player} /> - )))} - </box> -} |