01_NEW_ListItem.svelte

<svelte:options
	immutable={true}
	accessors={true}
/>

<script
	context="module"
	lang="ts"
>
	import { currentTrack, queuePosition } from "$lib/stores/list";

	const buildMenu = ({
		item,
		idx,
		SITE_ORIGIN_URL,
		dispatch,
		page,
	}: {
		item: Item;
		dispatch: (...args: any) => void;
		page: string;
		idx: number;
		SITE_ORIGIN_URL: string;
	}) =>
		buildDropdown()
			.add("View Artist", async () => {
				goto(`/artist/${item?.artistInfo ? item.artistInfo.artist[0].browseId : item?.subtitle[0].browseId}`);
				await tick();
				window.scrollTo({
					behavior: "smooth",
					top: 0,
					left: 0,
				});
			})
			.add("Play Song Radio", async () => {
				console.log(item);
				list.initAutoMixSession({ videoId: item.videoId, loggingContext: item?.loggingContext });
			})
			.add("Add to Playlist", async () => {
				if (item.endpoint?.pageType.match(/PLAYLIST|ALBUM|SINGLE/)) {
					const response = await fetch("/api/v1/get_queue.json?playlistId=" + item.playlistId);
					const data = await response.json();
					const items: Item[] = data;
					showAddToPlaylistPopper.set({ state: true, item: [...items] });
				} else {
					showAddToPlaylistPopper.set({ state: true, item: item });
				}
				dispatch("change");
			})
			.add("Favorite", () => {
				IDBService.sendMessage("create", "favorite", item);
			})
			.add(
				page === "queue" ? "Remove from Queue" : null,
				page === "queue"
					? () => {
							list.removeTrack(idx);
					  }
					: null,
			)
			.add("Share", async () => {
				let shareData: {
					title: string;
					url: string;
					text?: string;
				} = {
					title: item.title,
					url: `${SITE_ORIGIN_URL}/listen?id=${item.videoId}`,
				};
				if (item.endpoint?.pageType?.includes("MUSIC_PAGE_TYPE_PLAYLIST")) {
					shareData = {
						title: item.title,

						url: `${SITE_ORIGIN_URL}/playlist/${item.endpoint?.browseId}`,
					};
				}
				if (item.endpoint?.pageType?.includes("MUSIC_PAGE_TYPE_ALBUM")) {
					shareData = {
						title: item.title,

						url: `${SITE_ORIGIN_URL}/release?id=${item.endpoint?.browseId}`,
					};
				}
				if (item.endpoint?.pageType?.includes("MUSIC_PAGE_TYPE_ARTIST")) {
					shareData = {
						title: item.title,
						text: `${item.title} on Beatbump`,
						url: `${SITE_ORIGIN_URL}/artist/${item.endpoint?.browseId}`,
					};
				}
				try {
					if (!navigator.canShare) {
						await navigator.clipboard.writeText(shareData.url);
						notify("Link copied successfully", "success");
					} else {
						await navigator.share(shareData);
						notify("Shared successfully", "success");
					}
				} catch (error) {
					notify("Error: " + error, "error");
				}
			})
			.build();
</script>

<script lang="ts">
	import { groupSession, isMobileMQ, isPagePlaying, queue, showAddToPlaylistPopper } from "$lib/stores";
	import { page as PageStore } from "$app/stores";
	import type { Item } from "$lib/types";
	import { Logger, notify } from "$lib/utils";

	import { createEventDispatcher, tick } from "svelte";
	import Icon from "../Icon/Icon.svelte";
	import { fullscreenStore } from "../Player/channel";
	import PopperButton from "../Popper/PopperButton.svelte";
	import { goto } from "$app/navigation";
	import { IDBService } from "$lib/workers/db/service";
	import list from "$lib/stores/list";
	import { AudioPlayer, updateGroupPosition } from "$lib/player";
	import { CTX_ListItem } from "$lib/contexts";
	import { SITE_ORIGIN_URL } from "$stores/url";
	import { buildDropdown } from "$lib/configs/dropdowns.config";

	export let item: Item;
	export let idx: number;
	interface $$Events {
		setPageIsPlaying: { id: string };
		initLocalPlaylist: { idx: number };
		change: undefined;
	}
	const dispatch = createEventDispatcher<$$Events>();

	const { page, parentPlaylistId = null, visitorData } = CTX_ListItem.get();

	let isHovering = false;

	$: isPlaying =
		(page !== "queue" && page !== "release" ? $isPagePlaying.has($PageStore.params.slug) : true) &&
		$queue.length > 0 &&
		$queuePosition === idx &&
		$currentTrack.videoId === item.videoId;

	const DropdownItems = buildMenu({ item, idx, SITE_ORIGIN_URL: $SITE_ORIGIN_URL, dispatch, page });

</script>

02_OLD_ListItem.svelte

<svelte:options
	immutable={true}
	accessors={true}
/>

<script lang="ts">
	import { groupSession, isMobileMQ, isPagePlaying, queue, showAddToPlaylistPopper } from "$lib/stores";
	import { page as PageStore } from "$app/stores";
	import type { Item } from "$lib/types";
	import { notify } from "$lib/utils";

	import { createEventDispatcher, tick } from "svelte";
	import Icon from "../Icon/Icon.svelte";
	import { fullscreenStore } from "../Player/channel";
	import PopperButton from "../Popper/PopperButton.svelte";
	import { goto } from "$app/navigation";
	import { IDBService } from "$lib/workers/db/service";
	import SessionListService from "$lib/stores/list";
	import list from "$lib/stores/list";
	import { AudioPlayer, updateGroupPosition } from "$lib/player";
	import { CTX_ListItem } from "$lib/contexts";
	import { SITE_ORIGIN_URL } from "$stores/url";
	export let item: Item;
	export let idx: number;
	interface $$Events {
		setPageIsPlaying: { id: string };
		initLocalPlaylist: { idx: number };
		change: undefined;
	}
	const dispatch = createEventDispatcher<$$Events>();

	const { page, parentPlaylistId = null, visitorData } = CTX_ListItem.get();

	let isHovering = false;

	$: isPlaying =
		(page !== "queue" && page !== "release" ? $isPagePlaying.has($PageStore.params.slug) : true) &&
		$SessionListService.mix.length > 0 &&
		$SessionListService.position === idx &&
		$SessionListService.mix[idx]?.videoId === item.videoId;
	let DropdownItems;
	DropdownItems = [
		{
			text: "View Artist",
			icon: "artist",
			action: async () => {
				goto(`/artist/${item?.artistInfo ? item.artistInfo.artist[0].browseId : item?.subtitle[0].browseId}`);
				await tick();
				window.scrollTo({
					behavior: "smooth",
					top: 0,
					left: 0,
				});
			},
		},
		{
			text: "Play Song Radio",
			icon: "radio",
			action: async () => {
				list.initAutoMixSession({ videoId: item.videoId });
			},
		},
		{
			text: "Add to Playlist",
			icon: "list-plus",
			action: async () => {
				if (item.endpoint?.pageType.match(/PLAYLIST|ALBUM|SINGLE/)) {
					const response = await fetch("/api/v1/get_queue.json?playlistId=" + item.playlistId);
					const data = await response.json();
					const items: Item[] = data;
					showAddToPlaylistPopper.set({ state: true, item: [...items] });
				} else {
					showAddToPlaylistPopper.set({ state: true, item: item });
				}
				dispatch("change");
			},
		},
		{
			text: "Favorite",
			icon: "heart",
			action: () => {
				IDBService.sendMessage("create", "favorite", item);
			},
		},
		{
			text: "Share",
			icon: "share",
			action: async () => {
				let shareData: {
					title: string;
					url: string;
					text?: string;
				} = {
					title: item.title,
					url: `${$SITE_ORIGIN_URL}/listen?id=${item.videoId}`,
				};
				if (item.endpoint?.pageType?.includes("MUSIC_PAGE_TYPE_PLAYLIST")) {
					shareData = {
						title: item.title,

						url: `${$SITE_ORIGIN_URL}/playlist/${item.endpoint?.browseId}`,
					};
				}
				if (item.endpoint?.pageType?.includes("MUSIC_PAGE_TYPE_ALBUM")) {
					shareData = {
						title: item.title,

						url: `${$SITE_ORIGIN_URL}/release?id=${item.endpoint?.browseId}`,
					};
				}
				if (item.endpoint?.pageType?.includes("MUSIC_PAGE_TYPE_ARTIST")) {
					shareData = {
						title: item.title,
						text: `${item.title} on Beatbump`,
						url: `${$SITE_ORIGIN_URL}/artist/${item.endpoint?.browseId}`,
					};
				}
				try {
					if (!navigator.canShare) {
						await navigator.clipboard.writeText(shareData.url);
						notify("Link copied successfully", "success");
					} else {
						await navigator.share(shareData);
						notify("Shared successfully", "success");
					}
				} catch (error) {
					notify("Error: " + error, "error");
				}
			},
		},
	];
</script>