Merge pull request #6 from HIRO-MicroDataCenters-BV/feature/videos-on…

…-graph

Feature/videos on graph

src/components/AppFlowChart.vue

@@ -3,6 +3,7 @@ import { onBeforeUnmount } from 'vue';
 
 import type { Edge, Node } from '@vue-flow/core';
 import { useVueFlow, VueFlow } from '@vue-flow/core';
+import AppFlowChartVideoNode from '@/components/AppFlowChartVideoNode.vue';
 
 const { fitView } = useVueFlow();
 
@@ -34,19 +35,22 @@ onBeforeUnmount(() => {
     :zoom-on-pinch="false"
     :zoom-on-double-click="false"
     :prevent-scrolling="true"
-  />
+  >
+    <template #node-video="props">
+      <AppFlowChartVideoNode v-bind="props" />
+    </template>
+  </VueFlow>
 </template>
 
 <style>
 /* these are necessary styles for vue flow */
 @import '@vue-flow/core/dist/style.css';
 
 .vue-flow__node {
-  background: url('@/assets/cubes/empty.svg');
   border: 0;
   background-size: cover;
-  width: 50px;
-  height: 57px;
+  min-width: 50px;
+  min-height: 57px;
   z-index: 1 !important;
 }
 

src/components/AppFlowChartVideoNode.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+
+const width = computed(() => {
+  return props.data?.width || 120;
+});
+</script>
+
+<template>
+  <div
+    class="app-flow-chart-video-node"
+    :style="{
+      width: `${width}px`,
+      height: `${width * 0.5625}px`,
+    }"
+  >
+    <div class="app-flow-chart-video-node__video">
+      <a
+        :href="data.videoFullFileUrl || 'https://youtu.be/dQw4w9WgXcQ'"
+        target="_blank"
+      >
+        <video
+          :width="width"
+          class="app-flow-chart-video-node__video-element"
+          :src="data.videoFile || 'https://www.w3schools.com/html/mov_bbb.mp4'"
+          autoplay
+          loop
+          muted
+          playsinline
+        >
+          Your browser does not support the video tag.
+        </video>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app-flow-chart-video-node {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/constants/agriculture-page/agriculture-videos.ts

@@ -0,0 +1,23 @@
+import agriculture1 from '@/assets/videos/agriculture/agriculture_1.mp4';
+import agriculture2 from '@/assets/videos/agriculture/agriculture_2.mp4';
+import agriculture3 from '@/assets/videos/agriculture/agriculture_3.mp4';
+import agriculture4 from '@/assets/videos/agriculture/agriculture_4.mp4';
+
+export const agricultureVideos = {
+  agriculture1: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: agriculture1,
+  },
+  agriculture2: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: agriculture2,
+  },
+  agriculture3: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: agriculture3,
+  },
+  agriculture4: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: agriculture4,
+  },
+};

src/constants/city-page/city-videos.ts

@@ -0,0 +1,28 @@
+import city1 from '@/assets/videos/city/city_1.mp4';
+import city2 from '@/assets/videos/city/city_2.mp4';
+import city3 from '@/assets/videos/city/city_3.mp4';
+import city4 from '@/assets/videos/city/city_4.mp4';
+import city5 from '@/assets/videos/city/city_5.mp4';
+
+export const cityVideos = {
+  city1: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: city1,
+  },
+  city2: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: city2,
+  },
+  city3: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: city3,
+  },
+  city4: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: city4,
+  },
+  city5: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: city5,
+  },
+};

src/constants/energy-grid-page/energy-grid-videos.ts

@@ -0,0 +1,33 @@
+import energyGrid1 from '@/assets/videos/energy-grid/energy-grid-1.mp4';
+import energyGrid2 from '@/assets/videos/energy-grid/energy-grid-2.mp4';
+import energyGrid3 from '@/assets/videos/energy-grid/energy-grid-3.mp4';
+import energyGrid4 from '@/assets/videos/energy-grid/energy-grid-4.mp4';
+import energyGrid5 from '@/assets/videos/energy-grid/energy-grid-5.mp4';
+import energyGrid6 from '@/assets/videos/energy-grid/energy-grid-6.mp4';
+
+export const energyGridVideos = {
+  energyGrid1: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: energyGrid1,
+  },
+  energyGrid2: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: energyGrid2,
+  },
+  energyGrid3: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: energyGrid3,
+  },
+  energyGrid4: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: energyGrid4,
+  },
+  energyGrid5: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: energyGrid5,
+  },
+  energyGrid6: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: energyGrid6,
+  },
+};

src/constants/health-page/health-videos.ts

@@ -0,0 +1,28 @@
+import health1 from '@/assets/health-videos/health1.mp4';
+import health2 from '@/assets/health-videos/health2.mp4';
+import health3 from '@/assets/health-videos/health3.mp4';
+import health4 from '@/assets/health-videos/health4.mp4';
+import health5 from '@/assets/health-videos/health5.mp4';
+
+export const healthVideos = {
+  health1: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: health1,
+  },
+  health2: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: health2,
+  },
+  health3: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: health3,
+  },
+  health4: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: health4,
+  },
+  health5: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: health5,
+  },
+};

src/constants/industry-page.ts → src/constants/industry-page/industry-page.ts

@@ -2,6 +2,8 @@ import { cubeParts } from '@/constants/cube-parts';
 import type { Edge, Node } from '@vue-flow/core';
 import { Position } from '@vue-flow/core';
 
+import { industryVideos } from '@/constants/industry-page/industry-videos';
+
 export const industryCards = [
   {
     title: 'Edge Cloud Services',
@@ -72,16 +74,63 @@ export const industryGraph = {
     },
     {
       id: '4',
-      position: { x: 150, y: 50 },
+      position: { x: 200, y: 50 },
       targetPosition: Position.Bottom,
       class: 'vue-flow__node--ecs-gov',
     },
     {
       id: '5',
-      position: { x: 120, y: 200 },
+      position: { x: 220, y: 220 },
       targetPosition: Position.Left,
       class: 'vue-flow__node--ecs-ds',
     },
+    {
+      id: '6',
+      position: { x: 60, y: 0 },
+      type: 'video',
+      data: {
+        videoFullFileUrl: industryVideos.industry1.videoFullFileUrl,
+        videoFile: industryVideos.industry1.videoFile,
+      },
+    },
+    {
+      id: '7',
+      position: { x: 250, y: 15 },
+      type: 'video',
+      data: {
+        videoFullFileUrl: industryVideos.industry2.videoFullFileUrl,
+        videoFile: industryVideos.industry2.videoFile,
+      },
+    },
+    {
+      id: '8',
+      position: { x: 250, y: 280 },
+      type: 'video',
+      data: {
+        videoFullFileUrl: industryVideos.industry3.videoFullFileUrl,
+        videoFile: industryVideos.industry3.videoFile,
+      },
+    },
+    {
+      id: '9',
+      position: { x: 130, y: 120 },
+      type: 'video',
+      data: {
+        videoFullFileUrl: industryVideos.industry4.videoFullFileUrl,
+        videoFile: industryVideos.industry4.videoFile,
+        width: 160,
+      },
+    },
+    {
+      id: '10',
+      position: { x: 0, y: 300 },
+      type: 'video',
+      data: {
+        videoFullFileUrl: industryVideos.industry5.videoFullFileUrl,
+        videoFile: industryVideos.industry5.videoFile,
+        width: 140,
+      },
+    },
   ],
   edges: <Edge[]>[
     {

src/constants/industry-page/industry-videos.ts

@@ -0,0 +1,28 @@
+import industry1 from '@/assets/videos/industry/industry_1.mp4';
+import industry2 from '@/assets/videos/industry/industry_2.mp4';
+import industry3 from '@/assets/videos/industry/industry_3.mp4';
+import industry4 from '@/assets/videos/industry/industry_4.mp4';
+import industry5 from '@/assets/videos/industry/industry_5.mp4';
+
+export const industryVideos = {
+  industry1: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: industry1,
+  },
+  industry2: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: industry2,
+  },
+  industry3: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: industry3,
+  },
+  industry4: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: industry4,
+  },
+  industry5: {
+    videoFullFileUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+    videoFile: industry5,
+  },
+};

src/views/AgricultureView.vue

@@ -3,7 +3,7 @@ import AppCard from '@/components/AppCard.vue';
 import {
   agricultureCards,
   agricultureGraph,
-} from '@/constants/agriculture-page';
+} from '@/constants/agriculture-page/agriculture-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
 import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>

src/views/CityView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import AppCard from '@/components/AppCard.vue';
-import { cityCards, cityGraph } from '@/constants/city-page';
+import { cityCards, cityGraph } from '@/constants/city-page/city-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
 import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>

src/views/EnergyGridView.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import AppCard from '@/components/AppCard.vue';
-import { energyGridCards, energyGridGraph } from '@/constants/energy-grid-page';
+import {
+  energyGridCards,
+  energyGridGraph,
+} from '@/constants/energy-grid-page/energy-grid-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
 import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>

src/views/HealthView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import AppCard from '@/components/AppCard.vue';
-import { healthCards, healthGraph } from '@/constants/health-page';
+import { healthCards, healthGraph } from '@/constants/health-page/health-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
 import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>

src/views/IndustryView.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import AppCard from '@/components/AppCard.vue';
-import { industryCards, industryGraph } from '@/constants/industry-page';
+import {
+  industryCards,
+  industryGraph,
+} from '@/constants/industry-page/industry-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
 import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>

tools/convert_videos.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# Check if the input directory is provided
+if [ -z "$1" ]; then
+  echo "Usage: $0 <input_directory>"
+  exit 1
+fi
+
+# Input directory
+input_directory="$1"
+
+# Output directory
+output_directory="${input_directory}_converted"
+
+# Ensure the output directory exists
+mkdir -p "$output_directory"
+
+# Extract folder name
+folder_name=$(basename "$input_directory")
+
+# Counter for numbering files
+counter=1
+
+# Loop over all video files in the input directory
+for input_file in "$input_directory"/*; do
+  if [[ -f "$input_file" ]]; then
+    # Set the output file name and path
+    output_file="$output_directory/${folder_name}_$counter.mp4"
+
+    # Convert the video to 240p H.264 format, mute it, and use 6 CPU threads
+    ffmpeg -i "$input_file" -vf "scale=trunc(oh*a/2)*2:240" -threads 6 -c:v libx264 -crf 30 -preset slow -an "$output_file"
+
+    # Increment the counter
+    counter=$((counter + 1))
+  fi
+done
+
+echo "Conversion completed!"
+