- @if (isPaused()) {
-
- 
- } @else {
-
- 
- }
-
+ >
+ @if (isPaused()) {
+
+
- } @else {
-
-
- }
-
+ } @else {
+
+
+ }
+
`,
- styles: [`
+ styles: [
+ `
:host {
- display: inline-flex;
- height: 1px;
- overflow: visible;
- justify-content: center;
- align-items: center;
+ display: inline-flex;
+ height: 1px;
+ overflow: visible;
+ justify-content: center;
+ align-items: center;
}
-
+
.playPauseBtnContainer {
- position: relative;
- width: fit-content;
- margin: -12px 0;
+ position: relative;
+ width: fit-content;
+ margin: -12px 0;
}
.playPauseBtn {
- height: 72px;
- width: 72px;
- border-radius: 2.125rem;
- border: 1px solid var(--Angled-Stroke, rgba(255, 255, 255, 0.20));
- aspect-ratio: 1;
+ height: 72px;
+ width: 72px;
+ border-radius: 2.125rem;
+ border: 1px solid var(--Angled-Stroke, rgba(255, 255, 255, 0.2));
+ aspect-ratio: 1;
- background-color: var(--bg-color);
- color: var(--color);
-
- /* Blur + Shadow Big */
- box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.05), 0px 40px 80px 0px rgba(0, 0, 0, 0.08);
+ background-color: var(--bg-color);
+ color: var(--color);
+
+ /* Blur + Shadow Big */
+ box-shadow:
+ 0px 7px 10px 0px rgba(0, 0, 0, 0.05),
+ 0px 40px 80px 0px rgba(0, 0, 0, 0.08);
}
.playPauseIcon {
- pointer-events: none;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 32px;
- height: 32px;
+ pointer-events: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 32px;
+ height: 32px;
}
- `]
+ `,
+ ],
})
export class PlayPauseBtn {
- metadata = inject(Metadata)
+ metadata = inject(Metadata);
resume = output();
pause = output();
isPaused = input.required
- ![]()
-
+ selector: "app-under-titlebar-macos",
+ template: `
+
+ ![]()
+
+ `,
+ styles: [
+ `
+ .under-titlebar-macos {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ }
+
+ .logo {
+ opacity: 0.5;
+ mix-blend-mode: plus-lighter;
+ }
`,
- styles: [`
- .under-titlebar-macos {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- }
-
- .logo {
- opacity: 0.5;
- mix-blend-mode: plus-lighter;
- }
- `]
+ ],
})
export class UnderTitlebarMacos {
- theme = input<'light' | 'dark'>();
+ theme = input<"light" | "dark">();
}
@Component({
- selector: "app-under-titlebar",
- imports: [UnderTitlebarMacos],
- template: `
- @if (currentPlatform === 'macos') {
-
-
-
-
-
+
+
+
+
+
`,
- styles: [`
+ styles: [
+ `
.album-art-container {
- position: relative;
- width: fit-content;
- --border-size: 10px;
- --art-size: 212px;
- --border-radius: 16px;
- height: var(--art-size);
- width: var(--art-size);
- border-radius: var(--border-radius);
- overflow: hidden;
- box-shadow: 0px -0.5px 1px 0px rgba(255, 255, 255, 0.30) inset, 0px -0.5px 1px 0px rgba(255, 255, 255, 0.25) inset, 0px 1.5px 4px 0px rgba(0, 0, 0, 0.08) inset, 0px 1.5px 4px 0px rgba(0, 0, 0, 0.10) inset;
+ position: relative;
+ width: fit-content;
+ --border-size: 10px;
+ --art-size: 212px;
+ --border-radius: 16px;
+ height: var(--art-size);
+ width: var(--art-size);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ box-shadow:
+ 0px -0.5px 1px 0px rgba(255, 255, 255, 0.3) inset,
+ 0px -0.5px 1px 0px rgba(255, 255, 255, 0.25) inset,
+ 0px 1.5px 4px 0px rgba(0, 0, 0, 0.08) inset,
+ 0px 1.5px 4px 0px rgba(0, 0, 0, 0.1) inset;
}
.album-art-bg {
- background-size: var(--art-size);
- background-repeat: no-repeat;
- background-position: center;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
+ background-size: var(--art-size);
+ background-repeat: no-repeat;
+ background-position: center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
.album-art-border {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0.1) 100%);
- /*background-color: lightblue;*/
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image: linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0.2) 0%,
+ rgba(255, 255, 255, 0) 41%,
+ rgba(255, 255, 255, 0) 57%,
+ rgba(255, 255, 255, 0.1) 100%
+ );
+ /*background-color: lightblue;*/
}
.album-art-fg {
- background-size: var(--art-size);
- background-repeat: no-repeat;
- background-position: center;
- position: absolute;
- top: var(--border-size);
- left: var(--border-size);
- right: var(--border-size);
- bottom: var(--border-size);
- border-radius: calc(var(--border-radius) - var(--border-size));
+ background-size: var(--art-size);
+ background-repeat: no-repeat;
+ background-position: center;
+ position: absolute;
+ top: var(--border-size);
+ left: var(--border-size);
+ right: var(--border-size);
+ bottom: var(--border-size);
+ border-radius: calc(var(--border-radius) - var(--border-size));
}
- `]
+ `,
+ ],
})
export class AlbumArt {
src = input
- @if (!openFileMutation.data()) {
-
- }
+
+
`,
- styles: [`
+ styles: [
+ `
.container {
- padding: 24px;
- display: flex;
- flex-direction: row;
- overflow: hidden;
- justify-content: center;
- align-items: center;
- /* 32 because of top area */
- height: calc(100vh - 32px);
- box-sizing: border-box;
+ padding: 24px;
+ display: flex;
+ flex-direction: row;
+ overflow: hidden;
+ justify-content: center;
+ align-items: center;
+ /* 32 because of top area */
+ height: calc(100vh - 32px);
+ box-sizing: border-box;
}
.infoContainer {
- display: flex;
- flex-direction: column;
- gap: 20px;
- justify-content: center;
- align-items: center;
- padding: 0 32px;
- text-align: center;
- width: 1px;
- flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ justify-content: center;
+ align-items: center;
+ padding: 0 32px;
+ text-align: center;
+ width: 1px;
+ flex-grow: 1;
}
.textContainer {
- display: flex;
- flex-direction: column;
- gap: 8px;
- justify-content: center;
- align-items: center;
- width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
}
.title {
- font-size: 24px;
- font-weight: bold;
- margin: 0;
- color: white;
- width: 100%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
+ font-size: 24px;
+ font-weight: bold;
+ margin: 0;
+ color: white;
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
.artist {
- font-size: 16px;
- margin: 0;
- color: white;
- opacity: 0.8;
+ font-size: 16px;
+ margin: 0;
+ color: white;
+ opacity: 0.8;
}
.album {
- font-size: 16px;
- margin: 0;
- color: white;
- opacity: 0.8;
+ font-size: 16px;
+ margin: 0;
+ color: white;
+ opacity: 0.8;
}
.progressContainer {
- width: 100%;
- padding: 8px 0;
- flex-direction: column;
- gap: 8px;
+ width: 100%;
+ padding: 8px 0;
+ flex-direction: column;
+ gap: 8px;
}
.progressTextContainer {
- display: flex;
- justify-content: space-between;
+ display: flex;
+ justify-content: space-between;
}
.progressText {
- font-size: 14px;
- color: white;
- opacity: 0.5;
- margin: 0;
+ font-size: 14px;
+ color: white;
+ opacity: 0.5;
+ margin: 0;
}
.progressBar {
- border-radius: 1.5rem;
- width: 100%;
- box-shadow: 0px -0.5px 1px 0px rgba(255, 255, 255, 0.30) inset, 0px -0.5px 1px 0px rgba(255, 255, 255, 0.25) inset, 0px 1.5px 4px 0px rgba(0, 0, 0, 0.08) inset, 0px 1.5px 4px 0px rgba(0, 0, 0, 0.10) inset;
- background-blend-mode: plus-darker;
- height: 0.5rem;
- appearance: none;
+ border-radius: 1.5rem;
+ width: 100%;
+ box-shadow:
+ 0px -0.5px 1px 0px rgba(255, 255, 255, 0.3) inset,
+ 0px -0.5px 1px 0px rgba(255, 255, 255, 0.25) inset,
+ 0px 1.5px 4px 0px rgba(0, 0, 0, 0.08) inset,
+ 0px 1.5px 4px 0px rgba(0, 0, 0, 0.1) inset;
+ background-blend-mode: plus-darker;
+ height: 0.5rem;
+ appearance: none;
}
.progressBar::-webkit-progress-bar {
- height: 100%;
- background: rgba(0, 0, 0, 0.12);
- padding: 0;
- margin: 0;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.12);
+ padding: 0;
+ margin: 0;
}
.progressBar::-webkit-progress-value {
- border-radius: 1.25rem;
- background: rgba(255, 255, 255, 0.80);
- mix-blend-mode: plus-lighter;
- height: 100%;
- padding: 0;
- margin: 0;
+ border-radius: 1.25rem;
+ background: rgba(255, 255, 255, 0.8);
+ mix-blend-mode: plus-lighter;
+ height: 100%;
+ padding: 0;
+ margin: 0;
}
- `]
+ `,
+ ],
})
export class CurrentlyPlaying {
playingMetadata = injectSelector((state: RootState) => state.tauri);
@@ -256,20 +305,20 @@ export class CurrentlyPlaying {
controls: ControlType = "play-pause";
openFileMutation = injectMutation(() => ({
- mutationKey: ['openFile'],
+ mutationKey: ["openFile"],
mutationFn: async () => {
const path = await pickSong();
if (!path) {
return;
}
await play(path);
- return true
- }
- }))
+ return true;
+ },
+ }));
totalSecs = computed(() => {
return this.playingMetadata().duration?.secs;
- })
+ });
currentSecs = computed(() => {
return this.playingMetadata().position?.secs;
@@ -282,7 +331,7 @@ export class CurrentlyPlaying {
return {
hours: 0,
minutes: 0,
- seconds: 0
+ seconds: 0,
};
}
// Format
@@ -292,13 +341,13 @@ export class CurrentlyPlaying {
return {
hours,
minutes,
- seconds
- }
- })
+ seconds,
+ };
+ });
totalTimeFormatted = computed(() => {
const duration = this.totalTime();
- return `${duration.hours ? duration.hours + ':' : ''}${zeroPad(duration.minutes, 2)}:${zeroPad(duration.seconds, 2)}`;
+ return `${duration.hours ? duration.hours + ":" : ""}${zeroPad(duration.minutes, 2)}:${zeroPad(duration.seconds, 2)}`;
});
currentTimeFormatted = computed(() => {
@@ -306,7 +355,7 @@ export class CurrentlyPlaying {
const totalDuration = this.totalTime();
const duration = this.playingMetadata().position?.secs;
if (!duration) {
- return '0:00';
+ return "0:00";
}
// Format
const hours = Math.floor(duration / 3600);
@@ -314,15 +363,17 @@ export class CurrentlyPlaying {
const seconds = duration % 60;
const showHours = totalDuration.hours > 0 || hours > 0;
const showMinutes = totalDuration.minutes > 0 || minutes > 0;
- return `${showHours ? hours + ':' : ''}${showMinutes ? zeroPad(minutes, 2) : ''}:${zeroPad(seconds, 2)}`;
- })
+ return `${showHours ? hours + ":" : ""}${showMinutes ? zeroPad(minutes, 2) : ""}:${zeroPad(seconds, 2)}`;
+ });
resume = resume;
pause = pause;
seekFromProgressBar(event: MouseEvent) {
const progressBar = event.target as HTMLProgressElement;
- const value = event.offsetX / progressBar.offsetWidth * parseInt(progressBar.getAttribute('max') || '0');
+ const value =
+ (event.offsetX / progressBar.offsetWidth) *
+ parseInt(progressBar.getAttribute("max") || "0");
seek(value);
}
}
diff --git a/src/index.html b/src/index.html
index fa70f17..49089b6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,37 +1,42 @@
-
-
-
+
+
Tauri + Angular
-
+ @if (!openFileMutation.data()) {
+
+ }
- @if (openFileMutation.data() && stateMetadata.metadata.isSuccess() && openFileMutation.isSuccess()) {
-
+
-
-
+ }
+
-
+ @if (
+ openFileMutation.data() &&
+ stateMetadata.metadata.isSuccess() &&
+ openFileMutation.isSuccess()
+ ) {
+ {{ stateMetadata.metadata.data()?.tags?.TrackTitle ?? "Unknown Title" }}
-{{ stateMetadata.metadata.data()?.tags?.AlbumArtist ?? "Unknown Artist" }}
-{{ stateMetadata.metadata.data()?.tags?.Album ?? "Unknown Album" }}
-
+
- }
+
+
- + {{ + stateMetadata.metadata.data()?.tags?.TrackTitle ?? + "Unknown Title" + }} +
++ {{ + stateMetadata.metadata.data()?.tags?.AlbumArtist ?? + "Unknown Artist" + }} +
++ {{ + stateMetadata.metadata.data()?.tags?.Album ?? "Unknown Album" + }} +
+
-
+
-
-
- {{ currentTimeFormatted() }}
-{{ totalTimeFormatted() }}
-
+
-
+
+
+ {{ currentTimeFormatted() }}
+{{ totalTimeFormatted() }}
+
-
-
+