Merge pull request #5 from JSON-ms/dev

Support for Youtube videos

Author: dannycoulombe

package.json

@@ -2,7 +2,7 @@
   "name": "@jsonms/demo",
   "private": true,
   "type": "module",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",

src/components/Carousels.vue

@@ -3,8 +3,8 @@
     <v-carousel
       v-model="slide"
       :continuous="false"
-      :show-arrows="false"
-      :hide-delimiters="data.home.presentation.length <= 1"
+      :show-arrows="true"
+      :hide-delimiters="true"
       hide-delimiter-background
       height="100%"
     >
@@ -22,7 +22,17 @@
         v-for="(presentation, presentationIdx) in data.home.presentation"
         :key="presentation.hash"
       >
-        <div style="max-width: 66%; margin: 0 auto" class="d-flex flex-column fill-height justify-center align-center text-center">
+        <div v-if="data.home.presentation[slide].type === 'youtube'" class="youtube-responsive">
+          <iframe
+            :src="getYoutubeUrl(presentation)"
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; web-share"
+            referrerpolicy="strict-origin-when-cross-origin"
+            allowfullscreen
+          />
+        </div>
+        <div v-else-if="presentation.type === 'text'" style="max-width: 66%; margin: 0 auto" class="d-flex flex-column fill-height justify-center align-center text-center">
           <div class="text-h5 text-sm-h4 mt-4">
             {{ presentation.title[locale] || 'Undefined' }}
           </div>
@@ -45,6 +55,7 @@
 
 <script setup lang="ts">
 import {useJsonMs} from "@/plugins/jsonms";
+import type {JmsHomePresentationItems} from "@/jms/typings";
 
 const slide = ref(0);
 const { data, locale } = useJsonMs();
@@ -63,6 +74,25 @@ const slideColor = computed((): string => {
   return data.value.home.presentation[slide.value].color || 'primary';
 })
 
+function getYoutubeUrl(presentation: JmsHomePresentationItems) {
+  if (presentation.youtube) {
+    const code = getYoutubeCode(presentation.youtube);
+    return 'https://www.youtube.com/embed/' + code + '?controls=0';
+  }
+}
+
+const getYoutubeCode = (url: string): string | null => {
+  try {
+    const u = new URL(url)
+    if (u.hostname.includes('youtu.be')) return u.pathname.slice(1) || null
+    if (u.searchParams.has('v')) return u.searchParams.get('v')
+    if (u.pathname.startsWith('/embed/')) return u.pathname.split('/embed/')[1]
+    return null
+  } catch {
+    return null
+  }
+}
+
 watch(() => slide.value, () => {
   if (data.value.home.presentation[slide.value]) {
     window.parent.postMessage({
@@ -73,3 +103,16 @@ watch(() => slide.value, () => {
   }
 })
 </script>
+
+<style lang="scss" scoped>
+.youtube-responsive iframe {
+  position: absolute;
+  inset: 0;
+  min-width: 100vw;
+  height: 100vh;
+  border: 0;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

src/jms/default.ts

@@ -11,34 +11,46 @@ export const defaultData: JmsData = {
   },
   "playground": {
     "text": null,
-    "textWithIcon": "This is a default value",
+    "textWithIcon": null,
+    "textDefault": "A default value",
     "i18nRequired": {
       "en-US": "",
       "es-MX": ""
     },
     "i18nTextarea": {
-      "en-US": "",
-      "es-MX": ""
+      "en-US": null,
+      "es-MX": null
     },
+    "textRules": null,
     "i18nRating": null,
     "conditionalSwitch": null,
-    "hiddenField1": null,
-    "hiddenField2": null,
+    "hiddenField1": 50,
+    "hiddenField2": [
+      25,
+      75
+    ],
     "list": {
       "select": null,
       "radio": null,
       "checkbox": []
     },
     "arrays": {
       "array": [],
-      "i18nArray": []
+      "i18nArray": {
+        "en-US": [],
+        "es-MX": []
+      }
     },
     "files": {
       "file": null,
       "acceptImages": null,
       "multiple": []
     },
     "markdown": null,
-    "date": null
+    "date": null,
+    "schema": {
+      "title": "",
+      "description": null
+    }
   }
 }

src/jms/typings.ts

@@ -2,7 +2,7 @@ export type JmsLocaleKey = 'en-US' | 'es-MX'
 
 export type JmsSectionKey = 'home' | 'playground'
 
-export type JmsEnumColors = 'primary' | 'secondary'
+export type JmsEnumColors = 'primary' | 'secondary' | 'white'
 
 export type JmsEnumGender = 'male' | 'female'
 
@@ -27,17 +27,19 @@ export interface JmsFile {
   meta: JmsFileMeta
 }
 
-export interface JmsHomePresentationItems {
-  title: JmsLocaleSet<string>
-  body: JmsLocaleSet<string | null>
-  cta: JmsLocaleSet<string>
+export interface JmsHomePresentationItem {
+  type: 'text' | 'youtube'
+  title: JmsLocaleSet<string> | null
+  youtube: string | null
+  body: JmsLocaleSet<string | null> | null
+  cta: JmsLocaleSet<string> | null
   color: JmsEnumColors
   commands: ('openDrawer' | 'closeDrawer' | 'openAdvanced' | 'closeAdvanced' | 'showData' | 'showSettings' | 'showDocs' | 'setMobile' | 'setDesktop' | 'hideDevice')[]
   hash: string
 }
 
 export interface JmsHome {
-  presentation: JmsHomePresentationItems[]
+  presentation: JmsHomePresentationItem[]
 }
 
 export interface JmsPlaygroundList {
@@ -46,22 +48,22 @@ export interface JmsPlaygroundList {
   checkbox: JmsEnumGender[]
 }
 
-export interface JmsPlaygroundArraysArrayItems {
+export interface JmsPlaygroundArraysArrayItem {
   firstName: string | null
   lastName: string | null
   gender: JmsEnumGender | null
   picture: JmsFile | null
   hash: string
 }
 
-export interface JmsPlaygroundArraysI18nArrayItems {
+export interface JmsPlaygroundArraysI18nArrayItem {
   title: string | null
   hash: string
 }
 
 export interface JmsPlaygroundArrays {
-  array: JmsPlaygroundArraysArrayItems[]
-  i18nArray: JmsLocaleSet<JmsPlaygroundArraysI18nArrayItems[]>
+  array: JmsPlaygroundArraysArrayItem[]
+  i18nArray: JmsLocaleSet<JmsPlaygroundArraysI18nArrayItem[]>
 }
 
 export interface JmsPlaygroundFiles {
@@ -70,12 +72,19 @@ export interface JmsPlaygroundFiles {
   multiple: JmsFile[]
 }
 
+export interface JmsPlaygroundSchema {
+  title: string
+  description: string | null
+}
+
 export interface JmsPlayground {
   text: string | null
   textWithIcon: string | null
-  i18nRequired: JmsLocaleSet<string>
-  i18nTextarea: JmsLocaleSet<string | null>
-  i18nRating: JmsLocaleSet<number | null>
+  textDefault: string | null
+  i18nRequired: JmsLocaleSet<string> | null
+  i18nTextarea: JmsLocaleSet<string | null> | null
+  textRules: string | null
+  i18nRating: JmsLocaleSet<number | null> | null
   conditionalSwitch: undefined | null
   hiddenField1: number | null
   hiddenField2: [number, number] | null
@@ -84,6 +93,7 @@ export interface JmsPlayground {
   files: JmsPlaygroundFiles
   markdown: string | null
   date: Date | null
+  schema: JmsPlaygroundSchema
 }
 
 export interface JmsData {