@kvass/widgets 1.2.7 → 1.2.9

package/src/project-portal/styles/components/_card.scss

@@ -1,178 +0,0 @@
-@import '../_variables';
-
-.project-selector-card {
-  position: relative;
-  font-family: var(--kvass-project-selector-secondary-font, inherit);
-  display: flex;
-  flex-direction: column;
-  border-radius: GetVariable('border-radius');
-  background-color: white;
-  text-decoration: none;
-  color: inherit;
-  overflow: hidden;
-
-  $space: GetVariable('card-spacing');
-
-  &__header {
-    min-height: var(--kvass-project-selector-header-min-height, 250px);
-    background-color: GetVariable('dark');
-
-    @media (max-width: $kvass-project-selector-resposive) {
-      min-height: var(
-        --kvass-project-selector-header-min-height-resposive,
-        150px
-      );
-    }
-
-    &-category {
-      position: absolute;
-      background-color: GetVariable('secondary');
-      z-index: 11;
-      color: white;
-      left: var(--kvass-project-selector-card-status-gap, 0.5rem);
-      top: var(--kvass-project-selector-card-status-gap, 0.5rem);
-      border-radius: GetVariable('border-radius');
-      .category {
-        font-size: var(--kvass-project-selector-card-status-font-size, 0.8em);
-        padding: var(--kvass-project-selector-card-status-padding-x, 0.5rem)
-          var(--kvass-project-selector-card-status-padding-x, 1rem);
-      }
-    }
-
-    &-cover {
-      width: 100%;
-      background-repeat: no-repeat;
-      height: 100%;
-      background-size: cover;
-      background-position: center;
-      transition: transform 0.62s cubic-bezier(0.05, 0.2, 0.1, 1);
-
-      &:hover {
-        transform: scale(1.11);
-        -webkit-transform: scale(1.11);
-      }
-    }
-  }
-
-  &__title {
-    font-weight: bold;
-    line-height: 1;
-    margin: 0;
-  }
-
-  &__content {
-    background-color: GetVariable('background-color');
-    border-top: none;
-    text-align: left;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: calc(#{$space} - 0.5rem);
-
-    height: 100%;
-
-    &-name {
-      color: GetVariable('dark');
-      margin: 0 !important;
-    }
-
-    &-url {
-      color: GetVariable('primary');
-      font-size: 1.1em;
-      margin-top: auto;
-      text-decoration: underline;
-      text-decoration-color: GetVariable('primary');
-      text-underline-offset: 0.3em;
-      text-decoration-thickness: 1px;
-
-      &:hover {
-        color: GetVariable('secondary');
-      }
-    }
-
-    &-city {
-      font-size: 1.2rem;
-    }
-
-    &-location {
-      display: flex;
-      align-items: center;
-      align-content: center;
-      gap: 1rem;
-      color: GetVariable('secondary');
-
-      svg {
-        opacity: 0.5;
-        height: 0.9rem;
-        path {
-          color: currentColor;
-        }
-      }
-    }
-
-    @media (max-width: $kvass-project-selector-resposive) {
-      gap: 0.5rem;
-      padding: calc(#{$space} - 0.5rem) calc(#{$space} - 1rem);
-    }
-  }
-}
-
-// tiles theme
-.project-selector--theme-tiles {
-  .project-selector-card {
-    border-radius: var(--kvass-project-selector-border-radius, 0px);
-
-    &:hover {
-      .project-selector-card__content {
-        background: rgba(0, 0, 0, 0.2) !important;
-      }
-    }
-
-    &__header {
-      min-height: var(--kvass-project-selector-header-min-height, 400px);
-
-      @media (max-width: $kvass-project-selector-resposive) {
-        min-height: var(
-          --kvass-project-selector-header-min-height-resposive,
-          250px
-        );
-      }
-    }
-
-    &__content {
-      font-size: 1.5rem;
-      height: unset !important;
-      position: absolute;
-      inset: 0;
-      z-index: 10;
-      pointer-events: none;
-      background: rgba(0, 0, 0, 0.4) !important;
-      transition: background 200ms ease;
-
-      display: grid !important;
-      place-content: center;
-
-      & > * {
-        color: white !important;
-        text-align: center;
-      }
-
-      &-url {
-        text-decoration-color: currentColor;
-        font-size: 0.8em;
-      }
-
-      &-location {
-        justify-content: center;
-        margin-bottom: 1rem;
-
-        svg {
-          display: none;
-        }
-      }
-      &-intro {
-        font-size: 0.8em;
-      }
-    }
-  }
-}

package/src/utils/index.js

@@ -1,40 +0,0 @@
-function ExtractString(str, pattern, options = {}) {
-  let { group = 1 } = options
-  let match = str.match(pattern)
-  if (!match) return
-  return match[group]
-}
-
-function Wait(ms) {
-  return new Promise((resolve, reject) => {
-    setTimeout(resolve, ms)
-  })
-}
-
-async function WaitUntil(func, options = {}) {
-  let { interval = 200, limit = 50 } = options
-
-  let count = 0
-  let result
-
-  while (count < limit) {
-    count++
-    if ((result = func())) break
-    await Wait(interval)
-  }
-
-  if (count >= limit) throw new Error('Could not resolve')
-  return result
-}
-
-function LoadScript(src) {
-  if (document.querySelector(`script[src="${src}"]`)) return
-
-  let script = document.createElement('script')
-  script.type = 'text/javascript'
-  script.src = src
-
-  document.body.appendChild(script)
-}
-
-export { ExtractString, Wait, WaitUntil, LoadScript }

package/src/vimeo/README.md

@@ -1,58 +0,0 @@
-# kvass-vimeo
-
-A simple, embeddable Web Component to play vimeo videos.
-
-## Develop
-
-To run in development mode, first install the neccessary packages.
-
-```
-npm install
-```
-
-Then, run in development mode.
-
-```
-npm run dev
-```
-
-Open `localhost:3000` in the browser of your choice, and you will see the form widget.
-
-## Build
-
-To build the widget for production, run `build` instead of `dev`.
-
-```
-npm run build
-```
-
-To use the widget, use the `<kvass-vimeo />` element as shown here.
-
-```html
-<kvass-vimeo
-  url="https://vimeo.com/833277445"
-  autoplay="true"
-  loop="true"
-></kvass-vimeo>
-
-<script type="module" src="/src/vimeo/main.js"></script>
-```
-
-## Props
-
-The component has several props for easy configuration.
-
-| Name                | Type                                | Description                                  | Enums           | Default                                                |
-| :------------------ | :---------------------------------- | :------------------------------------------- | :-------------- | ------------------------------------------------------ |
-| **url**             | String                              | vimeo embed / share url                      |                 |
-| loop                | String / Boolean                    | Loop video                                   | `false`, `true` | true                                                   |
-| autoplay            | String / Boolean                    | Autoplay video                               | `false`, `true` | false                                                  |
-| controls            | String / Boolean                    | Enable / disable control bar                 | `false`, `true` | true                                                   |
-| mute                | String / Boolean                    | Mute sound                                   | `false`, `true` | false                                                  |
-| displayThumbnail    | String                              | specify if the thumbnail should be displayed | `false`, `true` | true                                                   |
-| ignoreConsent       | Boolean                             | spesify to ignore consent                    | `false`, `true` | false                                                  |
-| hideConsent         | specify to hide the consent warning |                                              | `false`, `true` | false                                                  |
-| thumbnailSource     | String                              | specify the soruce of the thumbnail          |                 | if Kvass defined: /api/media/thumbnail?url=${this.url} |
-| consentBlockMessage | String                              | Block consent message                        |                 | The video is blocked due to lack of consent to cookies |
-| consentButtonLabel  | String                              | Label on consent button                      |                 | Edit consents                                          |
-| aspect-ratio        | String                              | aspect ratio of the video                    |                 | 16/9                                                   |

package/src/vimeo/components/Vimeo.ce.vue

@@ -1,311 +0,0 @@
-<script>
-import { WaitUntil, LoadScript, ExtractString } from '../../utils'
-
-export default {
-  props: {
-    url: {
-      type: String,
-      default: '',
-    },
-    videoState: {
-      type: String,
-      default: 'ready',
-      enums: ['ready ', 'play', 'pause'],
-    },
-    loop: {
-      type: [String, Boolean],
-      default: true,
-    },
-    autoplay: {
-      type: [String, Boolean],
-      default: false,
-    },
-
-    controls: {
-      type: [String, Boolean],
-      default: true,
-    },
-    mute: {
-      type: [String, Boolean],
-      default: false,
-    },
-    displayThumbnail: {
-      type: [String, Boolean],
-      default: true,
-    },
-
-    ignoreConsent: {
-      type: [String, Boolean],
-      default: false,
-    },
-    hideConsent: {
-      type: [String, Boolean],
-      default: false,
-    },
-    thumbnailSource: {
-      type: String,
-      default: '',
-    },
-
-    consentBlockMessage: {
-      type: String,
-      default: 'The video is blocked due to lack of consent to cookies',
-    },
-
-    consentButtonLabel: {
-      type: String,
-      default: 'Edit consents',
-    },
-
-    aspectRatio: {
-      type: String,
-      default: '16/9',
-    },
-  },
-  watch: {
-    videoState: {
-      handler(newValue, oldValue) {
-        if (newValue === oldValue) return
-        switch (newValue) {
-          case 'play':
-            return this.play()
-          case 'pause':
-            return this.pause()
-          default:
-            return
-        }
-      },
-    },
-  },
-  data() {
-    return {
-      ready: false,
-
-      thumbnail: null,
-      consents: [],
-    }
-  },
-
-  computed: {
-    kvassDefined() {
-      return typeof Kvass !== 'undefined'
-    },
-    showConsent() {
-      if (this.hideConsent || !this.kvassDefined) return false
-      return !this.ignoreConsent && !this.consents.includes('statistics')
-    },
-
-    videoId() {
-      if (!this.url) return
-
-      let id = [
-        ExtractString(this.url, /https\:\/\/(w{3}\.)?vimeo\.com\/(.+)\/?/, {
-          group: 2,
-        }),
-        ExtractString(
-          this.url,
-          /https\:\/\/(w{3}\.)?player\.vimeo\.com\/(video\/)?(.+)\/?/,
-          {
-            group: 3,
-          },
-        ),
-      ].find((e) => Boolean(e))
-
-      if (id) return id.split('&')[0]
-    },
-  },
-
-  methods: {
-    openConsent() {
-      if (!this.kvassDefined) return
-      Kvass.emit('consent:show')
-    },
-
-    async play() {
-      try {
-        this.player.setVolume(0)
-        await this.player.play()
-      } catch (e) {
-        console.log(e)
-      }
-    },
-    pause() {
-      this.player.pause()
-    },
-
-    async init() {
-      const mergeOptions = {
-        url: `https://vimeo.com/${this.videoId}`,
-        loop: this.loop,
-        autoplay: this.autoplay,
-        controls: this.controls,
-        muted: this.mute || this.autoplay,
-        playsinline: 1,
-        dnt: 1,
-      }
-
-      function stringToBoolean(value) {
-        if (value === 'false') return false
-        if (value === 'true') return true
-        return value
-      }
-
-      Object.entries(mergeOptions).map(([key, value]) => {
-        return (mergeOptions[key] = stringToBoolean(value))
-      })
-
-      LoadScript('https://player.vimeo.com/api/player.js')
-      const Vimeo = await WaitUntil(() => window.Vimeo, { limit: 100 })
-
-      this.player = new Vimeo.Player(this.$refs.vimeoPlayer, mergeOptions)
-
-      await this.player
-        .ready()
-        .then(() => {
-          this.ready = true
-        })
-        .catch((error) => {
-          console.log(error)
-        })
-    },
-  },
-
-  async mounted() {
-    if (this.displayThumbnail)
-      this.thumbnail = `/api/media/thumbnail?url=${this.url}`
-
-    if (this.ignoreConsent || !this.kvassDefined) return this.init()
-
-    let onChange = (consents) => {
-      this.consents = consents || []
-      if (!this.consents || !this.consents.length) return
-
-      if (this.consents.includes('statistics')) return this.init()
-    }
-
-    if (this.kvassDefined) {
-      Kvass.emit('consent:get', (c) => onChange(c))
-      Kvass.on('consent:change', onChange)
-    }
-  },
-}
-</script>
-
-<template>
-  <div
-    class="widget-kvass-media-render-vimeo"
-    :style="`aspect-ratio: ${aspectRatio};`"
-  >
-    <div
-      v-show="ready"
-      :key="videoId"
-      ref="vimeoPlayer"
-      class="widget-kvass-media-render-vimeo__embed"
-      frameborder="0"
-      allow="autoplay; fullscreen;"
-      webkitallowfullscreen
-      mozallowfullscreen
-    />
-
-    <transition name="fade" mode="in-out">
-      <div
-        v-show="!ready && thumbnail"
-        class="widget-kvass-media-render-vimeo__thumbnail"
-        :style="{ backgroundImage: `url(${thumbnail})` }"
-      />
-    </transition>
-    <div v-if="showConsent" class="widget-kvass-media-render-vimeo__blocked">
-      <div class="widget-kvass-media-render-vimeo__blocked-warning">
-        {{ consentBlockMessage }}
-        <button
-          class="widget-kvass-media-render-vimeo__blocked-warning-button"
-          @click="openConsent"
-        >
-          {{ consentButtonLabel }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.widget-kvass-media-render-vimeo {
-  height: 100%;
-  width: 100%;
-  position: relative;
-
-  iframe {
-    height: 100%;
-    width: 100%;
-  }
-
-  & > * {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  &__thumbnail {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    filter: blur(10px);
-    opacity: 0.7;
-  }
-
-  &__blocked {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    svg {
-      opacity: 0.3;
-    }
-
-    @media (max-width: 992px) {
-      svg {
-        font-size: 2.5em;
-      }
-    }
-    &-warning {
-      pointer-events: initial;
-      position: absolute;
-      bottom: 0;
-      text-align: center;
-      background-color: #f2f2f2;
-      font-size: 0.6em;
-      bottom: 3rem;
-      left: 3rem;
-      max-width: 400px;
-      font-size: 0.8em;
-      padding: 1.5em 2em;
-
-      &-button {
-        padding: 0.5rem;
-        border: 1px solid #818181;
-        backdrop-filter: none;
-        background-color: transparent;
-      }
-
-      @media (max-width: 992px) {
-        left: 0.5rem;
-        bottom: 0.5rem;
-        font-size: 0.6em;
-        max-width: 200px;
-      }
-    }
-  }
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 500ms;
-  }
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0;
-  }
-}
-</style>

package/src/vimeo/main.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from 'vue'
-import Vimeo from './components/vimeo.ce.vue'
-
-customElements.define('kvass-vimeo', defineCustomElement(Vimeo))

package/src/youtube/README.md

@@ -1,58 +0,0 @@
-# kvass-youtube
-
-A simple, embeddable Web Component to play youtube videos.
-
-## Develop
-
-To run in development mode, first install the neccessary packages.
-
-```
-npm install
-```
-
-Then, run in development mode.
-
-```
-npm run dev
-```
-
-Open `localhost:3000` in the browser of your choice, and you will see the form widget.
-
-## Build
-
-To build the widget for production, run `build` instead of `dev`.
-
-```
-npm run build
-```
-
-To use the widget, use the `<kvass-youtube />` element as shown here.
-
-```html
-<kvass-youtube
-  url="https://www.youtube.com/watch?v=oPVte6aMprI"
-  autoplay="true"
-  loop="true"
-></kvass-youtube>
-
-<script type="module" src="/src/youtube/main.js"></script>
-```
-
-## Props
-
-The component has several props for easy configuration.
-
-| Name                | Type                                | Description                                  | Enums           | Default                                                |
-| :------------------ | :---------------------------------- | :------------------------------------------- | :-------------- | ------------------------------------------------------ |
-| **url**             | String                              | youtube embed / share url                    |                 |
-| loop                | String / Boolean                    | Loop video                                   | `false`, `true` | true                                                   |
-| autoplay            | String / Boolean                    | Autoplay video                               | `false`, `true` | false                                                  |
-| controls            | String / Boolean                    | Enable / disable control bar                 | `false`, `true` | true                                                   |
-| mute                | String / Boolean                    | Mute sound                                   | `false`, `true` | false                                                  |
-| displayThumbnail    | String                              | specify if the thumbnail should be displayed | `false`, `true` | true                                                   |
-| ignoreConsent       | Boolean                             | spesify to ignore consent                    | `false`, `true` | false                                                  |
-| hideConsent         | specify to hide the consent warning |                                              | `false`, `true` | false                                                  |
-| thumbnailSource     | String                              | specify the soruce of the thumbnail          |                 | if Kvass defined: /api/media/thumbnail?url=${this.url} |
-| consentBlockMessage | String                              | Block consent message                        |                 | The video is blocked due to lack of consent to cookies |
-| consentButtonLabel  | String                              | Label on consent button                      |                 | Edit consents                                          |
-| aspect-ratio        | String                              | aspect ratio of the video                    |                 | 16/9                                                   |