From e50e569dfaec9d28e5b107aa65c2c99dbf6d85d5 Mon Sep 17 00:00:00 2001
From: otaree <deep.yen.ur.hash@gmail.com>
Date: Sat, 26 Aug 2023 00:30:46 +0530
Subject: [PATCH 1/2] Initial implementation of baseline MediaVideo component
 with required link prop and styling

---
 frontend/components/icon/IconCameraVideo.vue | 28 +++++++++++++++++
 frontend/components/media/MediaVideo.vue     | 32 ++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 frontend/components/icon/IconCameraVideo.vue
 create mode 100644 frontend/components/media/MediaVideo.vue

diff --git a/frontend/components/icon/IconCameraVideo.vue b/frontend/components/icon/IconCameraVideo.vue
new file mode 100644
index 000000000..e4dea2b71
--- /dev/null
+++ b/frontend/components/icon/IconCameraVideo.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 100 100"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 31.25C0 27.9348 1.31696 24.7554 3.66117 22.4112C6.00537 20.067 9.18479 18.75 12.5 18.75H59.375C62.4068 18.7496 65.3355 19.8512 67.6155 21.8495C69.8955 23.8479 71.3716 26.6068 71.7687 29.6125L91.2063 20.975C92.1577 20.5511 93.1999 20.3716 94.2383 20.453C95.2768 20.5344 96.2784 20.874 97.1521 21.441C98.0259 22.008 98.7441 22.7844 99.2414 23.6995C99.7388 24.6147 99.9996 25.6397 100 26.6813V73.3187C99.9991 74.3595 99.7383 75.3836 99.2413 76.298C98.7442 77.2125 98.0267 77.9883 97.1538 78.5551C96.2809 79.1219 95.2803 79.4618 94.2428 79.5438C93.2052 79.6259 92.1636 79.4476 91.2125 79.025L71.7687 70.3875C71.3716 73.3932 69.8955 76.1521 67.6155 78.1505C65.3355 80.1488 62.4068 81.2504 59.375 81.25H12.5C9.18479 81.25 6.00537 79.933 3.66117 77.5888C1.31696 75.2446 0 72.0652 0 68.75V31.25ZM71.875 63.5938L93.75 73.3187V26.6813L71.875 36.4062V63.5938ZM12.5 25C10.8424 25 9.25268 25.6585 8.08058 26.8306C6.90848 28.0027 6.25 29.5924 6.25 31.25V68.75C6.25 70.4076 6.90848 71.9973 8.08058 73.1694C9.25268 74.3415 10.8424 75 12.5 75H59.375C61.0326 75 62.6223 74.3415 63.7944 73.1694C64.9665 71.9973 65.625 70.4076 65.625 68.75V31.25C65.625 29.5924 64.9665 28.0027 63.7944 26.8306C62.6223 25.6585 61.0326 25 59.375 25H12.5Z"
+      :fill="fill"
+      fill-opacity="0.8"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{ width?: string; height?: string; fill?: string }>(),
+  {
+    width: "100px",
+    height: "100px",
+    fill: "white",
+  }
+);
+</script>
diff --git a/frontend/components/media/MediaVideo.vue b/frontend/components/media/MediaVideo.vue
new file mode 100644
index 000000000..4f0c4b828
--- /dev/null
+++ b/frontend/components/media/MediaVideo.vue
@@ -0,0 +1,32 @@
+<template>
+  <!-- Note: mobile view -->
+  <div
+    class="md:hidden w-full h-full card-style bg-light-placeholder dark:bg-dark-placeholder flex justify-center items-center"
+  >
+    <div
+      class="p-6 bg-light-special-text dark:bg-dark-menu-selection rounded-full"
+    >
+      <IconCameraVideo
+        width="75px"
+        height="75px"
+        :fill="$colorMode.preference === 'dark' ? 'white' : 'black'"
+      />
+    </div>
+  </div>
+  <!-- Note: desktop view -->
+  <div
+    class="hidden md:flex w-full h-full card-style bg-light-placeholder dark:bg-dark-placeholder justify-center items-center"
+  >
+    <div
+      class="p-8 bg-light-special-text dark:bg-dark-menu-selection rounded-full"
+    >
+      <IconCameraVideo
+        :fill="$colorMode.preference === 'dark' ? 'white' : 'black'"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ link: string }>();
+</script>

From 0a0532cdba43608b5f2bb0d5776e25fb658be9b9 Mon Sep 17 00:00:00 2001
From: otaree <deep.yen.ur.hash@gmail.com>
Date: Sat, 26 Aug 2023 22:56:40 +0530
Subject: [PATCH 2/2] Update custom icon component to standard icon component

---
 frontend/components/icon/IconCameraVideo.vue | 28 --------------------
 frontend/components/media/MediaVideo.vue     | 25 +++++------------
 2 files changed, 6 insertions(+), 47 deletions(-)
 delete mode 100644 frontend/components/icon/IconCameraVideo.vue

diff --git a/frontend/components/icon/IconCameraVideo.vue b/frontend/components/icon/IconCameraVideo.vue
deleted file mode 100644
index e4dea2b71..000000000
--- a/frontend/components/icon/IconCameraVideo.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <svg
-    :width="width"
-    :height="height"
-    viewBox="0 0 100 100"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M0 31.25C0 27.9348 1.31696 24.7554 3.66117 22.4112C6.00537 20.067 9.18479 18.75 12.5 18.75H59.375C62.4068 18.7496 65.3355 19.8512 67.6155 21.8495C69.8955 23.8479 71.3716 26.6068 71.7687 29.6125L91.2063 20.975C92.1577 20.5511 93.1999 20.3716 94.2383 20.453C95.2768 20.5344 96.2784 20.874 97.1521 21.441C98.0259 22.008 98.7441 22.7844 99.2414 23.6995C99.7388 24.6147 99.9996 25.6397 100 26.6813V73.3187C99.9991 74.3595 99.7383 75.3836 99.2413 76.298C98.7442 77.2125 98.0267 77.9883 97.1538 78.5551C96.2809 79.1219 95.2803 79.4618 94.2428 79.5438C93.2052 79.6259 92.1636 79.4476 91.2125 79.025L71.7687 70.3875C71.3716 73.3932 69.8955 76.1521 67.6155 78.1505C65.3355 80.1488 62.4068 81.2504 59.375 81.25H12.5C9.18479 81.25 6.00537 79.933 3.66117 77.5888C1.31696 75.2446 0 72.0652 0 68.75V31.25ZM71.875 63.5938L93.75 73.3187V26.6813L71.875 36.4062V63.5938ZM12.5 25C10.8424 25 9.25268 25.6585 8.08058 26.8306C6.90848 28.0027 6.25 29.5924 6.25 31.25V68.75C6.25 70.4076 6.90848 71.9973 8.08058 73.1694C9.25268 74.3415 10.8424 75 12.5 75H59.375C61.0326 75 62.6223 74.3415 63.7944 73.1694C64.9665 71.9973 65.625 70.4076 65.625 68.75V31.25C65.625 29.5924 64.9665 28.0027 63.7944 26.8306C62.6223 25.6585 61.0326 25 59.375 25H12.5Z"
-      :fill="fill"
-      fill-opacity="0.8"
-    />
-  </svg>
-</template>
-
-<script setup lang="ts">
-withDefaults(
-  defineProps<{ width?: string; height?: string; fill?: string }>(),
-  {
-    width: "100px",
-    height: "100px",
-    fill: "white",
-  }
-);
-</script>
diff --git a/frontend/components/media/MediaVideo.vue b/frontend/components/media/MediaVideo.vue
index 4f0c4b828..36d193686 100644
--- a/frontend/components/media/MediaVideo.vue
+++ b/frontend/components/media/MediaVideo.vue
@@ -1,27 +1,14 @@
 <template>
-  <!-- Note: mobile view -->
   <div
-    class="md:hidden w-full h-full card-style bg-light-placeholder dark:bg-dark-placeholder flex justify-center items-center"
+    class="w-full h-full card-style bg-light-placeholder dark:bg-dark-placeholder flex justify-center items-center"
   >
     <div
-      class="p-6 bg-light-special-text dark:bg-dark-menu-selection rounded-full"
+      class="p-6 md:p-8 bg-light-special-text dark:bg-dark-menu-selection rounded-full"
     >
-      <IconCameraVideo
-        width="75px"
-        height="75px"
-        :fill="$colorMode.preference === 'dark' ? 'white' : 'black'"
-      />
-    </div>
-  </div>
-  <!-- Note: desktop view -->
-  <div
-    class="hidden md:flex w-full h-full card-style bg-light-placeholder dark:bg-dark-placeholder justify-center items-center"
-  >
-    <div
-      class="p-8 bg-light-special-text dark:bg-dark-menu-selection rounded-full"
-    >
-      <IconCameraVideo
-        :fill="$colorMode.preference === 'dark' ? 'white' : 'black'"
+      <Icon
+        name="bi:camera-video"
+        :color="$colorMode.preference === 'dark' ? 'white' : 'black'"
+        size="75px"
       />
     </div>
   </div>