[MIM-1356] Add part for video embed of vimeo and youtube (#2212)

Add part for video embed of vimeo and youtube

src/main/resources/assets/styles/_videoEmbed.scss

@@ -0,0 +1,29 @@
+.xp-part.video-embed {
+  width: 100%;
+  height: 0;
+  padding-bottom: calc(100% / (16 / 9));
+  position: relative;
+
+  h2 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+  }
+
+  // Need a placeholder that can fill space in edit mode if video does not show. 
+  // After ID is added in config a page refresh is needed to see the video in edit mode
+  // Seems CS removes web-components when updating the page in edit mode
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: block;
+    height: 80%;
+    width: 90%;
+    background-color: $ssb-dark-5;
+  }
+}

src/main/resources/assets/styles/main.scss

@@ -82,6 +82,7 @@ $container-max-widths: (
 @import "./employee";
 @import "./employeeList";
 @import "./project";
+@import "./videoEmbed";
 
 body {
   -moz-osx-font-smoothing: grayscale;

src/main/resources/index.d.ts

@@ -66,6 +66,7 @@ declare global {
       export type Table = _PartComponent<"mimir:table">
       export type UpcomingReleases = _PartComponent<"mimir:upcomingReleases">
       export type Variables = _PartComponent<"mimir:variables">
+      export type VideoEmbed = _PartComponent<"mimir:videoEmbed">
     }
 
     namespace LayoutComponent {

src/main/resources/site/i18n/phrases.properties

@@ -486,3 +486,5 @@ project.collaborators = Samarbeidspartnere
 project.publications = Publikasjoner
 project.projectPhrase = Prosjekt
 project.model = Modell
+
+videoEmbed.play = Spill av

src/main/resources/site/i18n/phrases_en.properties

@@ -486,3 +486,5 @@ project.collaborators = Collaborators
 project.publications = Publications
 project.projectPhrase = Project
 project.model = Model
+
+videoEmbed.play = Play video

src/main/resources/site/i18n/phrases_nn.properties

@@ -480,3 +480,5 @@ project.collaborators = Samarbeidspartnarar
 project.publications = Publikasjonar
 project.projectPhrase = Prosjekt
 project.model = Modell
+
+videoEmbed.play = Spel av

src/main/resources/site/parts/videoEmbed/videoEmbed.ts

@@ -0,0 +1,98 @@
+import { getComponent, getContent } from '/lib/xp/portal'
+import { localize } from '/lib/xp/i18n'
+
+export function get(): XP.Response {
+  const currentContent = getContent()
+  if (!currentContent) throw Error('No page found')
+
+  const locale = currentContent.language || 'no'
+
+  const component = getComponent<XP.PartComponent.VideoEmbed>()
+  if (!component) throw Error('No part found')
+
+  const { provider, title } = component.config
+  const selectedProvider = provider._selected
+  if (!selectedProvider) {
+    return missingConfig()
+  }
+
+  if (selectedProvider === 'vimeo') {
+    const value = provider?.vimeo?.value
+    if (!value) return missingConfig()
+
+    return {
+      body: renderVimeo(provider?.vimeo?.value, title, locale),
+      pageContributions: {
+        bodyEnd: [
+          '<script type="module" src="https://cdn.jsdelivr.net/npm/@slightlyoff/[email protected]/lite-vimeo.js"></script>',
+        ],
+      },
+    }
+  } else if (selectedProvider === 'youtube') {
+    const value = provider?.youtube?.value
+    if (!value) return missingConfig()
+
+    return {
+      body: renderYoutube(provider?.youtube?.value, title, locale),
+      pageContributions: {
+        bodyEnd: [
+          '<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/[email protected]/lite-youtube.js"></script>',
+        ],
+      },
+    }
+  }
+  return {
+    body: missingConfig(`Ukjent provider ${selectedProvider}`),
+  }
+}
+
+function renderVimeo(value: string, title: string, locale: string) {
+  const id = extractVimeoId(value)
+
+  if (!id) return missingConfig('Ugyldig Vimeo URL / ID').body
+
+  return wrapInDiv(`
+    <lite-vimeo
+      videoid="${id}"
+      videoplay="${localize({ key: 'videoEmbed.play', locale })}"
+      videotitle="${title}"
+    ></lite-vimeo>`)
+}
+
+function extractVimeoId(value: string) {
+  if (value.match(/^\d+$/)) return value
+
+  const matchFromUrl = value.match(
+    /(?:http:|https:|)\/\/(?:player.|www.)?vimeo\.com\/(?:video\/|embed\/|watch\?\S*v=|v\/)?(\d*)/im
+  )
+  if (!matchFromUrl) return null
+  return matchFromUrl[1]
+}
+
+function renderYoutube(value: string, title: string, locale: string) {
+  const id = extractYoutubeId(value)
+
+  if (!id) return missingConfig('Ugyldig Youtube URL / ID').body
+
+  return wrapInDiv(`
+    <lite-youtube
+      videoid="${id}"
+      videoplay="${localize({ key: 'videoEmbed.play', locale })}"
+      videotitle="${title}"
+    ></lite-vimeo>`)
+}
+
+function extractYoutubeId(value: string) {
+  const matchFromUrl = value.match(/(.*?)(^|\/|v=)([a-z0-9_-]{11})(.*)?/im)
+
+  if (!matchFromUrl) return null
+  return matchFromUrl[3]
+}
+
+function missingConfig(message = 'Mangler konfigurasjon') {
+  return { body: wrapInDiv(`<h2>Videoembed: ${message}</h2>`) }
+}
+
+function wrapInDiv(value: string) {
+  return `<div class="xp-part video-embed">${value}</div>`
+}

src/main/resources/site/parts/videoEmbed/videoEmbed.xml

@@ -0,0 +1,35 @@
+<part>
+    <display-name>Videoembed</display-name>
+    <form>
+        <input name="title" type="TextLine">
+            <label>Tittel på video (UU)</label>
+            <occurrences minimum="1" maximum="1"/>
+        </input>
+        <option-set name="provider">
+            <label>Platform</label>
+            <occurrences minimum="1" maximum="1"/>  
+            <options minimum="1" maximum="1">   
+                <option name="vimeo">  
+                    <label>Vimeo</label>
+                    <items>
+                        <input name="value" type="TextLine">
+                            <label>URL / ID</label>
+                            <occurrences minimum="1" maximum="1"/>
+                            <help-text>URL eller ID til videoen på Vimeo, støttede formater: 389682203, https://www.vimeo.com/389682203, https://player.vimeo.com/video/389682203</help-text>
+                        </input>
+                    </items>
+                </option>
+                <option name="youtube">
+                    <label>Youtube</label>
+                    <items>
+                        <input name="value" type="TextArea">
+                            <label>URL / ID</label>
+                            <occurrences minimum="1" maximum="1"/>
+                            <help-text>URL eller ID til videoen på Youtube, støttede formater: eL28YW-Y06o, https://www.youtube.com/watch?v=eL28YW-Y06o, http://youtube.com/watch?v=eL28YW-Y06o, https://www.youtube.com/embed/eL28YW-Y06o, https://youtu.be/eL28YW-Y06o</help-text>
+                        </input>
+                    </items>
+                </option>
+            </options>
+        </option-set>
+    </form>
+</part>