@abraca/nuxt 0.1.1 → 0.3.0

package/dist/runtime/components/renderers/ACallRenderer.vue

@@ -0,0 +1,169 @@
+<script setup>
+import { computed, onMounted } from "vue";
+import { DEFAULT_LOCALE } from "../../locale";
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: false },
+  docLabel: { type: String, required: true },
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.call,
+  ...config.public?.abracadabra?.locale?.renderers?.call ?? {},
+  ...props.labels ?? {}
+}));
+const { userName, userColor } = useAbracadabra();
+const {
+  voiceStatus,
+  isMuted,
+  isVideoEnabled,
+  isScreenEnabled,
+  canScreenShare,
+  localVideoStream,
+  localScreenStream,
+  peerVideoStreams,
+  peerList,
+  joinRoom,
+  leaveRoom,
+  toggleMute,
+  toggleVideo,
+  toggleScreen
+} = useVoice();
+const isConnected = computed(() => voiceStatus.value === "connected");
+onMounted(async () => {
+  if (!props.editable) return;
+  if (voiceStatus.value !== "connected" && voiceStatus.value !== "connecting") {
+    await joinRoom(props.docId);
+  }
+});
+const streams = computed(() => {
+  const result = [];
+  if (localVideoStream.value) {
+    result.push({
+      key: "self-camera",
+      stream: localVideoStream.value,
+      name: `${userName.value} (You)`,
+      color: userColor.value,
+      kind: "camera"
+    });
+  }
+  if (localScreenStream.value) {
+    result.push({
+      key: "self-screen",
+      stream: localScreenStream.value,
+      name: `${userName.value} (You)`,
+      color: userColor.value,
+      kind: "screen"
+    });
+  }
+  for (const peer of peerList.value) {
+    const vs = peerVideoStreams.value.get(peer.id);
+    if (vs?.camera) {
+      result.push({
+        key: `${peer.id}-camera`,
+        stream: vs.camera,
+        name: peer.displayName || peer.userId.slice(0, 6),
+        color: peer.color,
+        kind: "camera"
+      });
+    }
+    if (vs?.screen) {
+      result.push({
+        key: `${peer.id}-screen`,
+        stream: vs.screen,
+        name: peer.displayName || peer.userId.slice(0, 6),
+        color: peer.color,
+        kind: "screen"
+      });
+    }
+  }
+  return result;
+});
+const gridCols = computed(() => {
+  const n = streams.value.length;
+  if (n <= 1) return "grid-cols-1";
+  if (n <= 4) return "grid-cols-2";
+  return "grid-cols-3";
+});
+</script>
+
+<template>
+  <div class="flex flex-col flex-1 min-h-0">
+    <!-- Stream grid -->
+    <div class="flex-1 p-4 overflow-auto">
+      <div
+        v-if="streams.length"
+        class="grid gap-4 h-full auto-rows-fr"
+        :class="gridCols"
+      >
+        <AVoiceTile
+          v-for="entry in streams"
+          :key="entry.key"
+          :stream="entry.stream"
+          :name="entry.name"
+          :color="entry.color"
+          :kind="entry.kind"
+        />
+      </div>
+      <div
+        v-else
+        class="flex items-center justify-center h-full"
+      >
+        <div class="text-center">
+          <UIcon
+            name="i-lucide-video-off"
+            class="size-12 mb-3 text-(--ui-text-dimmed)"
+          />
+          <p class="text-sm text-(--ui-text-muted)">
+            {{ locale.noStreams }}
+          </p>
+          <p class="text-xs mt-1 text-(--ui-text-dimmed)">
+            {{ locale.turnOnCamera }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom controls bar -->
+    <div
+      v-if="isConnected && editable"
+      class="flex items-center justify-center gap-3 p-4 border-t border-(--ui-border) bg-(--ui-bg-elevated)/50"
+    >
+      <UButton
+        :icon="isMuted ? 'i-lucide-mic-off' : 'i-lucide-mic'"
+        size="lg"
+        :color="isMuted ? 'error' : 'neutral'"
+        :variant="isMuted ? 'subtle' : 'outline'"
+        class="rounded-full"
+        @click="toggleMute"
+      />
+      <UButton
+        :icon="isVideoEnabled ? 'i-lucide-video' : 'i-lucide-video-off'"
+        size="lg"
+        :color="isVideoEnabled ? 'primary' : 'neutral'"
+        :variant="isVideoEnabled ? 'subtle' : 'outline'"
+        class="rounded-full"
+        @click="toggleVideo"
+      />
+      <UButton
+        v-if="canScreenShare"
+        :icon="isScreenEnabled ? 'i-lucide-monitor-up' : 'i-lucide-monitor'"
+        size="lg"
+        :color="isScreenEnabled ? 'primary' : 'neutral'"
+        :variant="isScreenEnabled ? 'subtle' : 'outline'"
+        class="rounded-full"
+        @click="toggleScreen"
+      />
+      <UButton
+        icon="i-lucide-phone-off"
+        size="lg"
+        color="error"
+        variant="solid"
+        class="rounded-full"
+        @click="leaveRoom"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/renderers/ACallRenderer.vue.d.ts

@@ -0,0 +1,13 @@
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = {
+    docId: string;
+    childProvider?: any;
+    docLabel: string;
+    labels?: Partial<AbracadabraLocale['renderers']['call']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/AChecklistRenderer.d.vue.ts

@@ -0,0 +1,19 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['checklist']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;