Merge pull request #1288 from CodeCrowCorp/dev

Feat: added vod visibility toggle

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.3.0",
+	"version": "0.3.01",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
@@ -43,8 +43,6 @@
 		"vite": "^5.0.10"
 	},
 	"dependencies": {
-		"@baselime/node-opentelemetry": "^0.5.8",
-		"@baselime/sveltekit-opentelemetry-middleware": "^0.1.6",
 		"@event-calendar/core": "^3.0.0",
 		"@event-calendar/time-grid": "^3.0.0",
 		"@jill64/sentry-sveltekit-cloudflare": "^1.7.11",

src/lib/components/Channel/Chat/DialogSponsor.svelte

@@ -17,7 +17,7 @@
 		clientSecret: string = ''
 
 	onMount(async () => {
-		stripe = await loadStripe(env.PUBLIC_STRIPE_KEY || '')
+		stripe = env.PUBLIC_STRIPE_KEY ? await loadStripe(env.PUBLIC_STRIPE_KEY || '') : null
 	})
 
 	const showCheckoutDialog = async () => {
@@ -53,7 +53,7 @@
 						{duration === 1 ? `${duration} month` : `${duration} months`}
 					</button>
 				{/each}
-			{:else if step === 2}
+			{:else if step === 2 && stripe}
 				<div class="mb-3">
 					Selected duration:
 					<button class="btn btn-accent">

src/lib/components/Channel/Stream/DialogVod.svelte

@@ -1,8 +1,22 @@
 <script lang="ts">
+	import { patch } from '$lib/api'
+	import IconMore from '$lib/assets/icons/IconMore.svelte'
 	import { is_vod_modal_open } from '$lib/stores/channelStore'
-	import { getTimeFormat, timeSince } from '$lib/utils'
+	import { timeSince } from '$lib/utils'
 
 	export let vod: any
+
+	$: vodIsVisible = vod?.isVisible
+
+	const toggleVodVisibility = async () => {
+		const updatedVod = await patch(`vod`, {
+			channelId: vod.channelId,
+			uid: vod.uid,
+			inputId: vod.inputId,
+			isVisible: !vod.isVisible
+		})
+		vod.isVisible = updatedVod.isVisible
+	}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -19,12 +33,32 @@
 			e.stopPropagation()
 		}}>
 		<form method="dialog">
-			<button
-				class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-				on:click={() => {
-					$is_vod_modal_open = false
-					vod = null
-				}}>✕</button>
+			<div class="flex absolute right-2 top-2">
+				<div class="dropdown-menu dropdown dropdown-end" tabindex="1">
+					<button class="btn btn-sm btn-circle btn-ghost">
+						<IconMore />
+					</button>
+					<ul
+						tabindex="1"
+						class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52 z-10">
+						<li>
+							<a on:click={toggleVodVisibility}
+								><input
+									type="checkbox"
+									class="toggle toggle-primary toggle-xs"
+									bind:checked={vodIsVisible} />
+								Visible to viewers</a>
+						</li>
+						<!-- <li><a>Download</a></li> -->
+					</ul>
+				</div>
+				<button
+					class="btn btn-sm btn-circle btn-ghost"
+					on:click={() => {
+						$is_vod_modal_open = false
+						vod = null
+					}}>✕</button>
+			</div>
 		</form>
 		<h3 class="font-bold text-lg">@{vod?.username}</h3>
 		{timeSince(vod?.createdAt)}

src/lib/components/Channel/Stream/StreamContainer.svelte

@@ -160,7 +160,7 @@
 					</div>
 					{#if channel && nextchannel?._id === parseInt($page.params.channelId)}
 						<VideoGrid bind:channel />
-						<VodList channelId={channel._id} />
+						<VodList hostUserId={channel.userId} channelId={channel._id} />
 					{/if}
 				</div>
 			</div>

src/lib/components/Channel/Stream/StreamControls.svelte

@@ -288,14 +288,14 @@
 		</div>
 	</div>
 </div>
-<input
+<!-- <input
 	type="checkbox"
 	class="toggle toggle-primary toggle-xs tooltip absolute right-20 hidden sm:block"
 	data-tip="Lock scroll"
 	bind:checked={isScrollable}
 	on:click={() => {
 		isScrollable = !isScrollable
-	}} />
+	}} /> -->
 
 <dialog bind:this={rtmps_modal} class="modal">
 	<form method="dialog" class="modal-box overflow-x-hidden">

src/lib/components/Channel/Stream/VodList.svelte

@@ -4,18 +4,25 @@
 	import { onMount } from 'svelte'
 	import DialogVod from './DialogVod.svelte'
 	import { is_vod_modal_open } from '$lib/stores/channelStore'
+	import { page } from '$app/stores'
+
+	export let channelId: number, hostUserId: number
 
-	export let channelId: number
 	let vods: any = [],
 		selectedVod: any
 
-	onMount(async () => {
-		await getVods()
-	})
+	$: {
+		if (selectedVod) {
+			vods = vods.map((vod: any) => (vod.id === selectedVod.id ? selectedVod : vod))
+		}
+	}
 
-	const getVods = async () => {
+	onMount(async () => {
 		vods = await get(`vods?channelId=${channelId}`)
-	}
+		if (hostUserId !== $page.data.user?.userId) {
+			vods = vods.filter((vod: any) => !vod.isVisible)
+		}
+	})
 </script>
 
 {#if vods?.length}
@@ -28,7 +35,12 @@
 					selectedVod = vod
 				}}>
 				<!-- <iframe src={vod.url} class="rounded-box"></iframe> -->
-				<img loading="lazy" src={vod.thumbnail} class="rounded-md" alt="vod thumbnail" />
+				<img
+					loading="eager"
+					src={vod.thumbnail}
+					class="rounded-md"
+					alt="vod thumbnail"
+					style={vod?.isVisible ? '' : 'filter: grayscale(100%)'} />
 				<span
 					class="badge badge-md text-ghost rounded-md font-semibold border-none absolute m-1 bottom-0"
 					>{timeSince(vod.createdAt)}</span>
@@ -41,5 +53,5 @@
 			</div>
 		{/each}
 	</div>
-	<DialogVod vod={selectedVod} />
+	<DialogVod bind:vod={selectedVod} />
 {/if}