+
+ {msToHuman(position)}
+
+
+ {msToHuman(songDuration * 1000)}
+
+
+ );
+}
+
+function AlbumContextMenu({ track }: { track: Song; }) {
+ const [volume, muted] = useStateFromStores([YoutubeMusicStore], () => [YoutubeMusicStore.volume, YoutubeMusicStore.muted]);
+
+ return (
+
+ {i}
+
+ );
+
+ return (
+
+ {i}
+
+ );
+}
+
+export function YtmPlayer() {
+ const track = useStateFromStores(
+ [YoutubeMusicStore],
+ () => YoutubeMusicStore.song,
+ null,
+ (prev, next) => prev?.videoId ? (prev.videoId === next?.videoId) : prev?.title === next?.title
+ );
+
+ const isPlaying = useStateFromStores([YoutubeMusicStore], () => YoutubeMusicStore.isPlaying);
+ const [shouldHide, setShouldHide] = useState(false);
+
+
+ React.useEffect(() => {
+ setShouldHide(false);
+ if (!isPlaying) {
+ const timeout = setTimeout(() => setShouldHide(true), 1000 * 60 * 5);
+ return () => clearTimeout(timeout);
+ }
+ }, [isPlaying]);
+
+ if (!track || shouldHide) return;
+
+ const exportTrackImageStyle = {
+ "--vc-ytm-track-image": `url(${track?.imageSrc || ""})`,
+ } as React.CSSProperties;
+
+ return (
+
+
+ {track?.title}
+
+ {track.artist && (
+
+ by
+
+ {track.artist}
+
+
+ )}
+ {track.album && (
+
+ on
+
+ {track.album}
+
+
+ )}
+
+
+
+ );
+}
+
diff --git a/src/equicordplugins/musicControls/youtubeMusic/YtmStore.ts b/src/equicordplugins/musicControls/youtubeMusic/YtmStore.ts
new file mode 100644
index 000000000..39572267c
--- /dev/null
+++ b/src/equicordplugins/musicControls/youtubeMusic/YtmStore.ts
@@ -0,0 +1,299 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Logger } from "@utils/Logger";
+import { proxyLazyWebpack } from "@webpack";
+import { Flux, FluxDispatcher } from "@webpack/common";
+import { Settings } from "Vencord";
+
+enum MediaType {
+ /**
+ * Audio uploaded by the original artist
+ */
+ Audio = "AUDIO",
+ /**
+ * Official music video uploaded by the original artist
+ */
+ OriginalMusicVideo = "ORIGINAL_MUSIC_VIDEO",
+ /**
+ * Normal YouTube video uploaded by a user
+ */
+ UserGeneratedContent = "USER_GENERATED_CONTENT",
+ /**
+ * Podcast episode
+ */
+ PodcastEpisode = "PODCAST_EPISODE",
+ OtherVideo = "OTHER_VIDEO",
+}
+
+export type RepeatMode = 'NONE' | 'ONE' | 'ALL';
+
+
+export interface Song {
+ title: string;
+ artist: string;
+ views: number;
+ uploadDate?: string;
+ imageSrc?: string | null;
+ isPaused?: boolean;
+ songDuration: number;
+ elapsedSeconds?: number;
+ url?: string;
+ album?: string | null;
+ videoId: string;
+ playlistId?: string;
+ mediaType: MediaType;
+}
+
+enum DataTypes {
+ PlayerInfo = 'PLAYER_INFO',
+ VideoChanged = 'VIDEO_CHANGED',
+ PlayerStateChanged = 'PLAYER_STATE_CHANGED',
+ PositionChanged = 'POSITION_CHANGED',
+ VolumeChanged = 'VOLUME_CHANGED',
+ RepeatChanged = 'REPEAT_CHANGED',
+ ShuffleChanged = 'SHUFFLE_CHANGED',
+}
+
+type PlayerInfo = {
+ type: DataTypes.PlayerInfo;
+ song: Song | undefined;
+ volume: number,
+ muted: boolean;
+ repeat: RepeatMode;
+ position: number;
+ isPlaying: boolean;
+ shuffle: boolean;
+};
+
+type VideoChanged = {
+ type: DataTypes.VideoChanged;
+ song: Song;
+ position: number;
+};
+
+type PlayerStateChanged = {
+ type: DataTypes.PlayerStateChanged;
+ isPlaying: boolean,
+ position: number;
+};
+
+type PositionChanged = {
+ type: DataTypes.PositionChanged,
+ position: number;
+};
+
+type VolumeChanged = {
+ type: DataTypes.VolumeChanged;
+ volume: number;
+ muted: boolean;
+};
+
+type RepeatChanged = {
+ type: DataTypes.RepeatChanged;
+ repeat: RepeatMode;
+};
+
+type ShuffleChanged = {
+ type: DataTypes.ShuffleChanged;
+ shuffle: boolean;
+};
+
+export type Repeat = "NONE" | "ONE" | "ALL";
+
+export const logger = new Logger("MusicControls-Ytm");
+
+type Message = PlayerInfo | VideoChanged | PlayerStateChanged | PositionChanged | VolumeChanged | RepeatChanged | ShuffleChanged;
+
+type PlayerState = Partial