Merge pull request #41 from dev-protocol/update

0.1.4: support for Start, End Time & Gating Option
dev-protocol · Apr 11, 2024 · 8053c19 · 8053c19
2 parents 4173423 + c66c7d3
commit 8053c19
Show file tree

Hide file tree

Showing 9 changed files with 277 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@devprotocol/huddle01-clubs-plugin",
-	"version": "0.1.4",
+	"version": "0.1.5",
 	"type": "module",
 	"description": "Repository for using Clubs-Huddle01 Plugin",
 	"main": "dist/index.js",

diff --git a/src/ApiHandler.ts b/src/ApiHandler.ts
@@ -6,6 +6,9 @@ export type MeetingRequestJson = Readonly<{
 	description: string
 	muteOnEntry: boolean
 	videoOnEntry: boolean
+	startTime: string
+	expiryTime: string
+	tokenGated: boolean
 }>
 
 const API_KEY = process.env.HUDDLE_API_KEY
@@ -14,23 +17,55 @@ export const meetingHandler = async ({
 	request,
 }: Readonly<{ request: Request }>) => {
 	// eslint-disable-next-line functional/no-expression-statements
-	const { hostWallets, roomType, description, muteOnEntry, videoOnEntry } =
-		(await request.json()) as MeetingRequestJson
+	const {
+		hostWallets,
+		roomType,
+		description,
+		muteOnEntry,
+		videoOnEntry,
+		startTime,
+		expiryTime,
+		tokenGated,
+	} = (await request.json()) as MeetingRequestJson
 	// eslint-disable-next-line functional/no-expression-statements
-	console.log(hostWallets, roomType, description, muteOnEntry, videoOnEntry)
+	console.log(
+		hostWallets,
+		roomType,
+		description,
+		muteOnEntry,
+		videoOnEntry,
+		startTime,
+		expiryTime,
+		tokenGated,
+	)
+	const requestBody = tokenGated
+		? {
+				title: 'Club-Huddle-Plugin:Token Gated Meeting Room',
+				tokenType: 'ERC721',
+				chain: 'POLYGON',
+				contractAddress: ['0x89904De861CDEd2567695271A511B3556659FfA2'],
+				roomType,
+				description,
+				muteOnEntry,
+				videoOnEntry,
+				hostWallets,
+				startTime,
+				expiryTime,
+			}
+		: {
+				title: 'Club-Huddle-Plugin:Meeting Room',
+				roomType,
+				description,
+				muteOnEntry,
+				videoOnEntry,
+				hostWallets,
+				startTime,
+				expiryTime,
+			}
+
 	const response = await axios.post(
 		'https://api.huddle01.com/api/v1/create-iframe-room',
-		{
-			title: 'Token Gated',
-			tokenType: 'ERC721',
-			chain: 'POLYGON',
-			contractAddress: ['0x89904De861CDEd2567695271A511B3556659FfA2'],
-			roomType: roomType,
-			description: description,
-			muteOnEntry: muteOnEntry,
-			videoOnEntry: videoOnEntry,
-			hostWallets: hostWallets,
-		},
+		requestBody,
 		{
 			headers: {
 				'Content-Type': 'application/json',

diff --git a/src/components/Button.vue b/src/components/Button.vue
@@ -30,6 +30,6 @@ onClickToolbar('onRemoveMeetEvent', () => {
 		type="button"
 		@click="onClickImage"
 	>
-		<VideoCamera stroke-width="2" class="w-7 h-7" />
+		<VideoCamera stroke-width="2" class="w-7 h-7" iconType="VIDEO" />
 	</button>
 </template>
diff --git a/src/components/Icons/VideoCamera.vue b/src/components/Icons/VideoCamera.vue
@@ -1,13 +1,16 @@
 <script lang="ts" setup>
+import type { prop } from 'ramda'
+
 const props = defineProps<{
 	class?: string
 	strokeWidth?: number | string
 	solid?: boolean
+	iconType?: string | undefined
 }>()
 </script>
 <template>
 	<svg
-		v-if="!props.solid"
+		v-if="!props.solid && props.iconType === 'VIDEO'"
 		xmlns="http://www.w3.org/2000/svg"
 		fill="none"
 		viewBox="0 0 24 24"
@@ -22,7 +25,7 @@ const props = defineProps<{
 		/>
 	</svg>
 	<svg
-		v-if="props.solid"
+		v-if="props.solid && props.iconType === 'VIDEO'"
 		xmlns="http://www.w3.org/2000/svg"
 		viewBox="0 0 24 24"
 		fill="currentColor"
@@ -32,4 +35,16 @@ const props = defineProps<{
 			d="M4.5 4.5a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h8.25a3 3 0 0 0 3-3v-9a3 3 0 0 0-3-3H4.5ZM19.94 18.75l-2.69-2.69V7.94l2.69-2.69c.944-.945 2.56-.276 2.56 1.06v11.38c0 1.336-1.616 2.005-2.56 1.06Z"
 		/>
 	</svg>
+	<svg
+		v-if="props.solid && props.iconType === 'AUDIO'"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 350 517"
+		fill="currentColor"
+		:class="props.class ?? 'w-7 h-7'"
+	>
+		<path
+			fill="white"
+			d="M275.983 102.712V232.254C277.001 274.415 232.025 309.217 175.5 310C118.975 309.217 73.9944 274.415 75.0171 232.254V102.712C74.0212 60.5648 118.993 25.7841 175.5 25C232.007 25.7841 276.979 60.5648 275.983 102.712Z M40.4121 320.112C29.5404 311.602 13.8271 313.516 5.31607 324.389C-3.19526 335.259 -1.28159 350.972 9.59007 359.486L40.4121 320.112Z M340.411 359.486C351.284 350.972 353.198 335.259 344.688 324.389C336.174 313.516 320.461 311.602 309.591 320.112L340.411 359.486Z M200.001 391.666C200.001 377.859 188.808 366.666 175.001 366.666C161.194 366.666 150.001 377.859 150.001 391.666H200.001Z M150.001 491.666C150.001 505.472 161.194 516.666 175.001 516.666C188.808 516.666 200.001 505.472 200.001 491.666H150.001Z M9.59007 359.486C106.748 435.546 243.254 435.546 340.411 359.486L309.591 320.112C230.538 382.002 119.464 382.002 40.4121 320.112L9.59007 359.486Z M150.001 391.666V491.666H200.001V391.666H150.001Z"
+		/>
+	</svg>
 </template>
diff --git a/src/components/Meeting/Form.vue b/src/components/Meeting/Form.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import axios from 'axios'
 import {
 	onPostCreated,
@@ -10,6 +10,8 @@ import {
 	emitClickToolbar,
 } from '@devprotocol/clubs-plugin-posts/plugin-helper'
 import { connection } from '@devprotocol/clubs-core/connection'
+import { formatUnixTimestampToISO } from '../../fixtures'
+import { whenDefined, type UndefinedOr } from '@devprotocol/util-ts'
 import type { Meet } from '../../types.ts'
 
 onSetup(async (post) => {
@@ -29,6 +31,9 @@ onSetup(async (post) => {
 			description: description.value,
 			muteOnEntry: muteOnEntry.value,
 			videoOnEntry: videoOnEntry.value,
+			startTime: startTime.value,
+			expiryTime: expiryTime.value,
+			tokenGated: tokenGated.value,
 		})
 		.then((res) => res.data.data.meetingLink)
 
@@ -44,6 +49,8 @@ onSetup(async (post) => {
 		muteOnEntry: muteOnEntry.value,
 		videoOnEntry: videoOnEntry.value,
 		meetingLink: meetingLink,
+		startTime: startTime.value,
+		expiryTime: expiryTime.value,
 	}
 
 	console.log({ meet })
@@ -69,6 +76,28 @@ const roomType = ref<'AUDIO' | 'VIDEO'>('VIDEO')
 const description = ref<string | undefined>(undefined)
 const muteOnEntry = ref<boolean>(true)
 const videoOnEntry = ref<boolean>(true)
+const tokenGated = ref<boolean>(true)
+
+const minimumStartTime = ref<string>(
+	formatUnixTimestampToISO(Date.now() / 1000),
+)
+const startTimeLocal = ref<string>(minimumStartTime.value)
+const startTime = computed(() => {
+	if (startTimeLocal === undefined) {
+		return undefined
+	}
+	const start = new Date(startTimeLocal.value)
+	return start.toISOString()
+})
+
+const expiryTimeLocal = ref<string>('')
+const expiryTime = computed(() => {
+	if (expiryTimeLocal.value === '') {
+		return undefined
+	}
+	const expiry = new Date(expiryTimeLocal.value)
+	return expiry.toISOString()
+})
 
 const MAX_OPTIONS = 4
 
@@ -103,6 +132,12 @@ onPostCreated((post: any) => {
 	muteOnEntry.value = true
 	videoOnEntry.value = true
 	hostWallets.value = [{ id: 1, address: '' }]
+	startTimeLocal.value = minimumStartTime.value
+	expiryTimeLocal.value = ''
+	connection().account.subscribe((_account: string) => {
+		address.value = _account
+		hostWallets.value[0].address = _account
+	})
 })
 
 const handleClickRemovePoll = () => {
@@ -128,6 +163,14 @@ watch(isMeetOpen, (isOpen) => {
 		})
 	}
 })
+
+watch(startTime, (newValue) => {
+	console.log('Start Time changed:', newValue)
+})
+
+watch(expiryTime, (newValue) => {
+	console.log('Expiry Time changed:', newValue)
+})
 </script>
 <template>
 	<div
@@ -201,23 +244,74 @@ watch(isMeetOpen, (isOpen) => {
 				AUDIO
 			</label>
 		</div>
+		<div class="flex flex-row gap-4 py-4 px-4">
+			<div class="flex flex-col">
+				<label
+					class="block mb-2 uppercase tracking-wide text-gray-400 text-xs font-bold"
+					for="start-time"
+				>
+					Start Time
+				</label>
+				<input
+					id="start-time"
+					v-model="startTimeLocal"
+					type="datetime-local"
+					class="appearance-none block py-3 px-4 w-full text-gray-700 border border-gray-200 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+					:min="minimumStartTime"
+				/>
+			</div>
+			<div class="flex flex-col">
+				<label
+					class="block mb-2 uppercase tracking-wide text-gray-400 text-xs font-bold"
+					for="expiry-time"
+				>
+					Expiry Time
+				</label>
+				<input
+					id="expiry-time"
+					v-model="expiryTimeLocal"
+					type="datetime-local"
+					class="appearance-none block py-3 px-4 w-full text-gray-700 border border-gray-200 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+				/>
+			</div>
+		</div>
 		<div class="py-4 px-4 border-t border-gray-400">
-			<p class="mb-2 mr-4 text-gray-400 font-bold">Entry Settings</p>
-			<p class="uppercase mb-2 mr-4 text-gray-400 font-bold">Camera</p>
-			<label class="relative inline-flex items-center cursor-pointer">
-				<input v-model="videoOnEntry" type="checkbox" class="sr-only peer" />
-				<span
-					class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
-				></span>
-			</label>
-			<p class="uppercase mb-2 mr-4 text-gray-400 font-bold">Mute</p>
-			<label class="relative inline-flex items-center cursor-pointer">
-				<input v-model="muteOnEntry" type="checkbox" class="sr-only peer" />
-				<span
-					class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
-				></span>
-			</label>
+			<p class="mb-2 text-gray-400 font-bold">Entry Settings</p>
+			<div class="flex flex-wrap justify-between items-end">
+				<div class="flex-1 min-w-[33%]">
+					<p class="uppercase text-gray-400 font-bold">Camera</p>
+					<label class="relative inline-flex items-center cursor-pointer">
+						<input
+							v-model="videoOnEntry"
+							type="checkbox"
+							class="sr-only peer"
+						/>
+						<span
+							class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+						></span>
+					</label>
+				</div>
+				<div class="flex-1 min-w-[33%]">
+					<p class="uppercase text-gray-400 font-bold">Mute</p>
+					<label class="relative inline-flex items-center cursor-pointer">
+						<input v-model="muteOnEntry" type="checkbox" class="sr-only peer" />
+						<span
+							class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+						></span>
+					</label>
+				</div>
+				<div class="flex-1 min-w-[33%]">
+					<p class="uppercase text-gray-400 font-bold">Gated</p>
+					<label class="relative inline-flex items-center cursor-pointer">
+						<input v-model="tokenGated" type="checkbox" class="sr-only peer" />
+						<span
+							class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+						></span>
+					</label>
+				</div>
+			</div>
 		</div>
+
 		<div class="border-t border-gray-400">
 			<button
 				class="py-4 w-full border text-red-500"