@erst-vg/vg-design-wrapper 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.0.2 (December 2025)
+
+- Benytter @types/node så tredjepartsapplikationer ikke selv skal gøre det.
+
 ### 2.0.1 (December 2025)
 
 - Mindre designjusteringer til accordions.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@erst-vg/vg-design-wrapper",
   "private": false,
-  "version": "2.0.1",
+  "version": "2.0.2",
   "type": "module",
   "repository": {
     "type": "git",
@@ -43,6 +43,7 @@
     "prettiercheck": "prettier --check \"**/*.{vue,ts}\" "
   },
   "dependencies": {
+    "@types/node": "24.9.2",
     "axios": "1.12.2",
     "dkfds": "npm:@erst-vg/dkfds-vite@8.0.1",
     "lodash": "4.17.21",
@@ -56,7 +57,6 @@
   "devDependencies": {
     "@stylistic/eslint-plugin": "2.6.2",
     "@types/lodash": "4.17.7",
-    "@types/node": "24.9.2",
     "@typescript-eslint/eslint-plugin": "8.45.0",
     "@vitejs/plugin-vue": "5.2.3",
     "@vitest/coverage-v8": "3.2.4",

package/src/components/VgKalturaVideo.vue

@@ -1,70 +0,0 @@
-<template>
-  <div>
-    <iframe
-      v-if="playVideo && videoUrl"
-      :src="videoUrl"
-      :alt="alt"
-      class="video-frame"
-      title="Kaltura afspiller"
-      allow="autoplay"
-      allowfullscreen
-      webkitallowfullscreen
-      mozAllowFullScreen
-      data-testid="video-frame"
-    />
-    <slot name="preview" :thumbnail-url="thumbnailUrl" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true
-  },
-  alt: {
-    type: String,
-    required: true
-  },
-  playVideo: {
-    type: Boolean,
-    required: true
-  }
-});
-
-const videoUrl = computed(() => {
-  let link = props.src;
-  const autoPlay = 'flashvars[autoPlay]';
-  if (!link.includes(autoPlay)) {
-    link = addQuerystring(link, `${autoPlay}=true`);
-  }
-  return link;
-});
-
-const thumbnailUrl = computed<string>(() => {
-  let url = '';
-  const groups = props.src.match(/https:\/\/(.*)\/p\/(\d*)\/.*?.*entry_id=([a-zA-Z0-9_]+)(?=&|$)/); // NOSONAR
-  if (groups?.length === 4) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [_, domain, partnerId, entryId] = groups;
-    url = `https://${domain}/p/${partnerId}/thumbnail/entry_id/${entryId}/width/800/quality/100`;
-  }
-  return url;
-});
-
-function addQuerystring(url: string, query: string): string {
-  const firstParamPrefix = '?';
-  const subsequentParamPrefix = '&';
-  if (query.indexOf(firstParamPrefix) === 0 || query.indexOf(subsequentParamPrefix) === 0) {
-    query = query.substring(1);
-  }
-  const qsPrefix = url.indexOf(firstParamPrefix) > 0 ? subsequentParamPrefix : firstParamPrefix;
-  return url + qsPrefix + query;
-}
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/custom/_vgVideoFrame.scss';
-</style>

package/src/components/VgVideo.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="video">
-    <component :is="videoudbyder" :src="src" :alt="alt" :play-video="playVideo" class="video-player">
-      <template #preview="{ thumbnailUrl }">
-        <div v-if="!playVideo">
-          <button class="button-wrapper" aria-label="Afspil video" title="Afspil video" type="button" @click="playVideo = true">
-            <VgIcon icon="playVideo" />
-            <div class="video-frame" :style="thumbnailUrl && { 'background-image': 'url(' + thumbnailUrl + ')' }" />
-          </button>
-        </div>
-      </template>
-    </component>
-    <div class="cookie-banner">
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <div v-html="cookiebanner" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import VgIcon from '@/components/VgIcon.vue';
-import VgKalturaVideo from '@/components/VgKalturaVideo.vue';
-import VgVideoToolVideo from '@/components/VgVideoToolVideo.vue';
-import VgVimeoVideo from '@/components/VgVimeoVideo.vue';
-import { computed, ref } from 'vue';
-
-const components = {
-  VgVimeoVideo,
-  VgVideoToolVideo,
-  VgKalturaVideo
-};
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true
-  },
-  alt: {
-    type: String,
-    required: true
-  },
-  cookiebanner: {
-    type: String,
-    required: true
-  }
-});
-
-const playVideo = ref(false);
-
-const videoudbyder = computed(() => {
-  if (props.src.includes('vimeo')) {
-    return components.VgVimeoVideo;
-  } else if (props.src.includes('videotool')) {
-    return components.VgVideoToolVideo;
-  } else if (props.src.includes('kaltura')) {
-    return components.VgKalturaVideo;
-  }
-  return '';
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/custom/_vgVideo.scss';
-@use '@/styles/custom/_vgVideoFrame.scss';
-</style>

package/src/components/VgVideoToolVideo.vue

@@ -1,70 +0,0 @@
-<template>
-  <div>
-    <iframe
-      v-if="playVideo"
-      class="video-frame"
-      title="Videotool player"
-      type="text/html"
-      :alt="alt"
-      :src="src"
-      webkitallowfullscreen
-      mozallowfullscreen
-      allowfullscreen
-      allow="autoplay; fullscreen"
-      data-testid="iframe"
-    ></iframe>
-    <slot name="preview" :thumbnail-url="thumbnailUrl" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import axios, { AxiosRequestConfig } from 'axios';
-import { onMounted, ref } from 'vue';
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true
-  },
-  alt: {
-    type: String,
-    required: true
-  },
-  playVideo: {
-    type: Boolean,
-    required: true
-  }
-});
-
-const thumbnailUrl = ref<string>('');
-
-onMounted(async () => {
-  getThumbnailUrl(props.src).then(url => (thumbnailUrl.value = url));
-});
-
-async function getThumbnailUrl(pageUrl: string): Promise<string> {
-  let url = '';
-  const options: AxiosRequestConfig = {
-    method: 'GET',
-    headers: { 'content-type': 'text/html' },
-    url: pageUrl
-  };
-  try {
-    const xhr = await axios(options);
-    if (xhr) {
-      const groups = xhr.data?.match(/<meta property="og:image" content="https:(.*?)">/);
-      if (groups?.length > 0) {
-        url = groups[1];
-      }
-    }
-  } catch {
-    // eslint-disable-next-line no-console
-    console.log(`Error resolving thumbnail url from "${pageUrl}"`);
-  }
-  return url;
-}
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/custom/_vgVideoFrame.scss';
-</style>

package/src/components/VgVimeoVideo.vue

@@ -1,64 +0,0 @@
-<template>
-  <div>
-    <iframe
-      v-if="playVideo && videoUrl"
-      class="video-frame"
-      title="Vimeo afspiller"
-      :alt="alt"
-      :src="videoUrl"
-      webkitallowfullscreen
-      mozallowfullscreen
-      allowfullscreen
-      allow="autoplay"
-    ></iframe>
-    <slot name="preview" :thumbnail-url="thumbnailUrl" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import axios, { AxiosPromise } from 'axios';
-import { onMounted, ref } from 'vue';
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true
-  },
-  alt: {
-    type: String,
-    required: true
-  },
-  playVideo: {
-    type: Boolean,
-    required: true
-  }
-});
-
-const videoUrl = ref('');
-const thumbnailUrl = ref('');
-const baseOembedVimeoUrl = 'https://vimeo.com/api/oembed.json';
-
-const getVimeoVideo = (link: string, params: { [key: string]: string } = {}): AxiosPromise => {
-  const urlParams = new URLSearchParams(params).toString();
-  const qs = urlParams ? `&${urlParams}` : '';
-  return axios.get(`${baseOembedVimeoUrl}?url=${encodeURIComponent(link)}${qs}`);
-};
-
-onMounted((): void => {
-  getVimeoVideo(props.src, { dnt: '1', autoplay: '1' }).then(response => {
-    const thumbnailUrlResponse: string = response.data.thumbnail_url;
-    if (thumbnailUrlResponse) {
-      // Fjerner angivelse af billedeopløsning, for at få billede i fuld størrelse. Linket slutter på fx -d_123x123
-      const index = thumbnailUrlResponse.indexOf('-d_');
-      thumbnailUrl.value = index !== -1 ? thumbnailUrlResponse.slice(0, index + 2) : thumbnailUrlResponse;
-    }
-    const { html } = response.data;
-    // extract the src attribute from the iframe
-    videoUrl.value = html.match(/src="(.*?)"/)![1];
-  });
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/custom/_vgVideoFrame.scss';
-</style>

package/src/styles/custom/_vgVideo.scss

@@ -1,86 +0,0 @@
-@use '@/styles/utility' as *;
-
-.video {
-  .video-player {
-    position: relative;
-    overflow: hidden;
-    padding-top: 56.25%;
-    width: 100%;
-    background-color: $color-very-dark-gray;
-
-    .button-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      width: 100%;
-      position: absolute;
-      top: 0;
-      border: none;
-      left: 0;
-
-      &:focus {
-        .icon-svg {
-          outline: 2px solid $color-black !important;
-          border-radius: 50%;
-        }
-      }
-
-      .icon-svg {
-        color: var(--site-primary);
-        width: 72px;
-        height: 72px;
-        position: relative;
-        z-index: 3;
-
-        @include media-breakpoint-down-em(sm) {
-          width: 1.5em;
-          height: 1.5em;
-        }
-
-        &:hover {
-          cursor: pointer;
-        }
-
-        :deep(*) {
-          color: var(--site-primary);
-        }
-      }
-    }
-
-    .video-frame {
-      position: absolute;
-      background-size: cover;
-      background-repeat: no-repeat;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: $background-alternative;
-      cursor: pointer;
-      width: 100%;
-
-      &:before {
-        content: '';
-        position: absolute;
-        background-color: rgba($color-very-dark-blue, 0.25);
-        height: 100%;
-        width: 100%;
-        top: 0;
-        left: 0;
-        z-index: 2;
-      }
-    }
-  }
-
-  .cookie-banner {
-    width: 100%;
-    font-size: 0.875em;
-    font-style: italic;
-    color: $color-grey-1;
-    padding-top: 16px;
-
-    :deep(a) {
-      color: $color-grey-1 !important;
-    }
-  }
-}

package/src/styles/custom/_vgVideoFrame.scss

@@ -1,9 +0,0 @@
-.video-frame {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border: 0;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}