Meeting recorder

src/components/canvas-handlers/meeting-recorder/AttachBottom.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+  >
+    <path
+      d="M5.714 21C5.20883 21 4.78125 20.825 4.43125 20.475C4.08125 20.125 3.90625 19.6974 3.90625 19.1923V5.80775C3.90625 5.30258 4.08125 4.875 4.43125 4.525C4.78125 4.175 5.20883 4 5.714 4H19.0985C19.6037 4 20.0312 4.175 20.3813 4.525C20.7313 4.875 20.9062 5.30258 20.9062 5.80775V19.1923C20.9062 19.6974 20.7313 20.125 20.3813 20.475C20.0312 20.825 19.6037 21 19.0985 21H5.714ZM5.40625 15.6923H19.4062V5.80775C19.4062 5.73075 19.3742 5.66025 19.31 5.59625C19.246 5.53208 19.1755 5.5 19.0985 5.5H5.714C5.637 5.5 5.5665 5.53208 5.5025 5.59625C5.43833 5.66025 5.40625 5.73075 5.40625 5.80775V15.6923ZM5.40625 17.1923V19.1923C5.40625 19.2692 5.43833 19.3398 5.5025 19.4038C5.5665 19.4679 5.637 19.5 5.714 19.5H19.0985C19.1755 19.5 19.246 19.4679 19.31 19.4038C19.3742 19.3398 19.4062 19.2692 19.4062 19.1923V17.1923H5.40625Z"
+      :fill="fill"
+    />
+  </svg>
+</template>
+<script setup>
+defineProps({
+  className: {
+    type: String,
+    default: "",
+  },
+
+  fill: {
+    type: String,
+    default: "currentColor",
+  },
+});
+</script>
+<style scoped></style>

src/components/canvas-handlers/meeting-recorder/AttachLeft.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+  >
+    <path
+      d="M5.714 21C5.21533 21 4.78933 20.8234 4.436 20.4703C4.08283 20.1169 3.90625 19.6909 3.90625 19.1923V5.80775C3.90625 5.30908 4.08283 4.88308 4.436 4.52975C4.78933 4.17658 5.21533 4 5.714 4H19.0985C19.5972 4 20.0232 4.17658 20.3765 4.52975C20.7297 4.88308 20.9062 5.30908 20.9062 5.80775V19.1923C20.9062 19.6909 20.7297 20.1169 20.3765 20.4703C20.0232 20.8234 19.5972 21 19.0985 21H5.714ZM8.40625 19.5V5.5H5.714C5.637 5.5 5.5665 5.53208 5.5025 5.59625C5.43833 5.66025 5.40625 5.73075 5.40625 5.80775V19.1923C5.40625 19.2692 5.43833 19.3398 5.5025 19.4038C5.5665 19.4679 5.637 19.5 5.714 19.5H8.40625ZM9.90625 19.5H19.0985C19.1755 19.5 19.246 19.4679 19.31 19.4038C19.3742 19.3398 19.4062 19.2692 19.4062 19.1923V5.80775C19.4062 5.73075 19.3742 5.66025 19.31 5.59625C19.246 5.53208 19.1755 5.5 19.0985 5.5H9.90625V19.5Z"
+      :fill="fill"
+    />
+  </svg>
+</template>
+<script setup>
+defineProps({
+  className: {
+    type: String,
+    default: "",
+  },
+  fill: {
+    type: String,
+    default: "currentColor",
+  },
+});
+</script>

src/components/canvas-handlers/meeting-recorder/AttachTop.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+  >
+    <path
+      d="M5.714 4C5.20883 4 4.78125 4.175 4.43125 4.525C4.08125 4.875 3.90625 5.30258 3.90625 5.80775V19.1923C3.90625 19.6974 4.08125 20.125 4.43125 20.475C4.78125 20.825 5.20883 21 5.714 21H19.0985C19.6037 21 20.0312 20.825 20.3813 20.475C20.7313 20.125 20.9062 19.6974 20.9062 19.1923V5.80775C20.9062 5.30258 20.7313 4.875 20.3813 4.525C20.0312 4.175 19.6037 4 19.0985 4H5.714ZM5.40625 9.30775H19.4062V19.1923C19.4062 19.2693 19.3742 19.3398 19.31 19.4038C19.246 19.4679 19.1755 19.5 19.0985 19.5H5.714C5.637 19.5 5.5665 19.4679 5.5025 19.4038C5.43833 19.3398 5.40625 19.2693 5.40625 19.1923V9.30775ZM5.40625 7.80775V5.80775C5.40625 5.73075 5.43833 5.66025 5.5025 5.59625C5.5665 5.53208 5.637 5.5 5.714 5.5H19.0985C19.1755 5.5 19.246 5.53208 19.31 5.59625C19.3742 5.66025 19.4062 5.73075 19.4062 5.80775V7.80775H5.40625Z"
+      :fill="fill"
+    />
+  </svg>
+</template>
+<script setup>
+defineProps({
+  className: {
+    type: String,
+    default: "",
+  },
+  fill: {
+    type: String,
+    default: "currentColor",
+  },
+});
+</script>
+<style scoped></style>

src/components/canvas-handlers/meeting-recorder/Button.vue

@@ -0,0 +1,81 @@
+<template>
+  <button
+    :class="['meeting-recorder-btn', { active: isActive }]"
+    @click="onClick"
+    v-bind="rest"
+    type="button"
+  >
+    <component :is="icon" class="icon" />
+    <span class="label">{{ label }}</span>
+  </button>
+</template>
+
+<script setup>
+import { computed, useAttrs } from "vue";
+
+const props = defineProps({
+  icon: {
+    type: [Object, Function, String],
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const attrs = useAttrs();
+const rest = computed(() => {
+  // Remove props we handle explicitly
+  const { icon, label, isActive, onClick, ...other } = attrs;
+  return other;
+});
+</script>
+
+<style scoped>
+.meeting-recorder-btn {
+  display: inline-flex;
+  padding: 16px 20px 16px 16px;
+  align-items: center;
+  gap: 12px;
+  border-radius: 40px;
+  background: var(--Ota, #2d2d2d);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.15s;
+  font: inherit;
+  outline: none;
+}
+
+.meeting-recorder-btn:hover {
+  background: var(--Pam, #464646);
+}
+
+.meeting-recorder-btn.active,
+.meeting-recorder-btn:active {
+  background: var(--Orange-VDB, #ec5b16);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  user-select: none;
+}
+</style>

src/components/canvas-handlers/meeting-recorder/Cross.vue

@@ -0,0 +1,42 @@
+<template>
+  <svg
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    :class="className"
+  >
+    <g clip-path="url(#clip0_4190_33272)">
+      <path
+        d="M19.0838 7.00332L17.6977 5.61719L12.2023 11.1126L6.70693 5.61719L5.3208 7.00332L10.8162 12.4987L5.3208 17.9941L6.70693 19.3802L12.2023 13.8848L17.6977 19.3802L19.0838 17.9941L13.5884 12.4987L19.0838 7.00332Z"
+        :fill="fill"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4190_33272">
+        <rect
+          width="23.5938"
+          height="23.5938"
+          fill="white"
+          transform="translate(0.40625 0.703125)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script setup>
+defineProps({
+  className: {
+    type: String,
+    default: "",
+  },
+  fill: {
+    type: String,
+    default: "currentColor",
+  },
+});
+</script>
+
+<style scoped></style>

src/components/canvas-handlers/meeting-recorder/Live.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M6.2885 15.7115H14.2115V14.2115H6.2885V15.7115ZM16.2115 15.7115H17.7115V14.2115H16.2115V15.7115ZM6.2885 11.923H7.7885V10.423H6.2885V11.923ZM9.7885 11.923H17.7115V10.423H9.7885V11.923ZM4.30775 19.5C3.80258 19.5 3.375 19.325 3.025 18.975C2.675 18.625 2.5 18.1974 2.5 17.6923V6.30775C2.5 5.80258 2.675 5.375 3.025 5.025C3.375 4.675 3.80258 4.5 4.30775 4.5H19.6923C20.1974 4.5 20.625 4.675 20.975 5.025C21.325 5.375 21.5 5.80258 21.5 6.30775V17.6923C21.5 18.1974 21.325 18.625 20.975 18.975C20.625 19.325 20.1974 19.5 19.6923 19.5H4.30775ZM4.30775 18H19.6923C19.7693 18 19.8398 17.9679 19.9038 17.9038C19.9679 17.8398 20 17.7692 20 17.6923V6.30775C20 6.23075 19.9679 6.16025 19.9038 6.09625C19.8398 6.03208 19.7693 6 19.6923 6H4.30775C4.23075 6 4.16025 6.03208 4.09625 6.09625C4.03208 6.16025 4 6.23075 4 6.30775V17.6923C4 17.7692 4.03208 17.8398 4.09625 17.9038C4.16025 17.9679 4.23075 18 4.30775 18Z"
+      fill="white"
+    />
+  </svg>
+</template>
+<script setup>
+defineProps({
+  className: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style scoped></style>