@sigmaott/base-next 1.0.6

package/src/utils/validator.ts

@@ -0,0 +1,185 @@
+import isStrongPassword from 'validator/es/lib/isStrongPassword'
+import { upperFirst } from 'lodash-unified'
+import isEmail from 'validator/es/lib/isEmail'
+import isIP from 'validator/lib/isIP'
+import { isInt } from 'validator'
+import { isAllowedCharacters } from './utils'
+
+export function tagValidator(itemLength: number = 35) {
+  return (rule, value: string[], callback) => {
+    const isTagLengthValid = value?.some(tag => tag.trim().split(' ').join('').length > itemLength)
+    const isTagContainSpecialCharacter = value?.some(tag => /[`!@#$%^&*()+=[\]{};':"\\|,.<>/?~]/.test(tag))
+    const isTagContainAccentedCharacters = value?.some(tag => !new RegExp(`^[\\w-]{1,${itemLength}}$`).test(tag))
+    if (value?.length > 0 && (value?.length !== new Set(value).size))
+      callback(new Error(window.$t('validate.duplicate')))
+    else if (isTagLengthValid)
+      callback(new Error(window.$t('validate.itemLength', [itemLength])))
+    else if (isTagContainSpecialCharacter)
+      callback(new Error(window.$t('validate.specialCharacters')))
+    else if (isTagContainAccentedCharacters)
+      callback(new Error(window.$t('validate.accentedCharacters')))
+    else
+      callback()
+  }
+}
+
+export function passwordValidation(t, callbackFn: any) {
+  return (rule, value: string, callback) => {
+    if (value === '' || value.trim().length === 0) {
+      callback(new Error(t('login.password_required')))
+    }
+    else if (isAllowedCharacters(value)) {
+      callback(new Error(t('login.password_use_only')))
+    }
+    else if (!/^.{8,64}$/.test(value)) {
+      callback(new Error(t('login.password_length')))
+    }
+    else if (!isStrongPassword(value, { minSymbols: 0 })) {
+      callback(new Error(t('login.password_invalid')))
+    }
+
+    else {
+      callbackFn(rule, value, callback)
+      callback()
+    }
+  }
+}
+
+export function requiredValidator(_name: string) {
+  return (_rule, value: string, callback) => {
+    const name = _name || window.$t('general.name')
+    if (!value || value.trim().length === 0)
+      callback(new Error(window.$t('base.please_input_name', { name })))
+    else
+      callback()
+  }
+}
+
+export function nameValidator(_name: string) {
+  return (_rule, value: string, callback) => {
+    const name = _name || window.$t('general.name')
+    if (!value || value.trim().length === 0)
+      callback(window.$t('base.please_input_name', { name }))
+    else if (SPECIAL_CHARACTERS_NAME.test(value))
+      callback(window.$t('base.name_can_not_contain_special_characters', { name: upperFirst(name) }))
+    else if (!WORD_NO_CONTAINT_ACCENTED_CHARACTERS.test(value))
+      callback(window.$t('base.name_cannot_contain_accented_characters', { name: upperFirst(name) }))
+    else if (!/^.{1,50}$/.test(value))
+      callback(window.$t('base.the_name_should_not_exceed_50_characters', { name: upperFirst(name) }))
+    else
+      callback()
+  }
+}
+export const SPECIAL_CHARACTERS_NAME_WITH_S = /[`!@#$%^&*()+=[\]{};':"\\|,.<>/?~]/
+export const WORD_NO_CONTAINT_ACCENTED_CHARACTERS_S = /^[\w-\s]*$/
+
+export function nameValidatorWithSpace(_name: string) {
+  return (_rule, value: string, callback) => {
+    const name = _name || window.$t('general.name')
+    if (!value || value.trim().length === 0)
+      callback(new Error(window.$t('base.please_input_name', { name })))
+    else if (SPECIAL_CHARACTERS_NAME_WITH_S.test(value))
+      callback(new Error(window.$t('base.name_can_not_contain_special_characters_with_s', { name: upperFirst(name) })))
+    else if (!WORD_NO_CONTAINT_ACCENTED_CHARACTERS_S.test(value))
+      callback(new Error(window.$t('base.name_cannot_contain_accented_characters', { name: upperFirst(name) })))
+    else if (!/^.{1,50}$/.test(value))
+      callback(new Error(window.$t('base.the_name_should_not_exceed_50_characters', { name: upperFirst(name) })))
+    else
+      callback()
+  }
+}
+
+// NO_DASH
+export function nameValidatorLow(_name: string) {
+  return (_rule, value: string, callback: any) => {
+    const name = _name || window.$t('general.name')
+    const stringValue = typeof value === 'string' ? value.trim() : ''
+    if (!value || stringValue.length === 0)
+      callback(new Error(window.$t('base.please_input_name', { name })))
+    else if (SPECIAL_CHARACTERS_NAME_NO_DASH_UNDERLINE.test(value))
+      callback(new Error(window.$t('base.name_can_not_contain_special_characters', { name: upperFirst(name) })))
+    else if (!WORD_NO_CONTAINT_ACCENTED_CHARACTERS.test(value))
+      callback(new Error(window.$t('base.name_cannot_contain_accented_characters', { name: upperFirst(name) })))
+    else if (!/^.{1,50}$/.test(value))
+      callback(new Error(window.$t('base.the_name_should_not_exceed_50_characters', { name: upperFirst(name) })))
+    else
+      callback()
+  }
+}
+
+export function emailValidator() {
+  return (rule, value: string, callback: any) => {
+    if (value === '' || value.trim().length === 0)
+      callback(new Error(window.$t('login.email_required')))
+    else if (!/^[\w.\-@]{5,128}$/.test(value) || !isEmail(value))
+      callback(new Error(window.$t('login.email_invalid')))
+    else
+      callback()
+  }
+}
+
+export function arrayValidator(_name: string, callbackFn?: any) {
+  return (rule, value, callback) => {
+    const name = _name || window.$t('general.name')
+    if (value && !value.length) {
+      callback(new Error(window.$t('base.please_add_a_name', { name: upperFirst(name) })))
+    }
+    else {
+      if (callbackFn)
+        callbackFn(rule, value, callback)
+      else
+        callback()
+    }
+  }
+}
+
+export function bucketNameValidator() {
+  const $t = window.$t
+  return (rule, value, callback) => {
+    if (value.length < 3 || value.length > 63)
+      callback(new Error($t('bucket_name.valid_length')))
+    if (!value.match(/^[a-z0-9]/) || !value.match(/[a-z0-9]$/))
+      callback(new Error($t('bucket_name.bucket_names_must_begin_and_end_with_a_letter_or_number')))
+    if (!value.match(/^[a-z0-9][a-z0-9.-]{1,61}[a-z0-9]$/))
+      callback(new Error($t('bucket_name.bucket_names_can_consist_only_of_lowercase_letters_numbers_dots_and_hyphens_-')))
+    if (!value.match(/^(?!.*\.(\.))/))
+      callback(new Error($t('bucket_name.bucket_names_must_not_contain_two_adjacent_periods')))
+    if (isIP(value))
+      callback(new Error($t('bucket_name.bucket_names_must_not_be_formatted_as_an_ip_address')))
+    if (!value.match(/^(?!xn--)(?!sthree-)(?!sthree-configurator-)/))
+      callback(new Error($t('bucket_name.bucket_names_must_not_start_with_the_prefix_xn--_and_sthree-_and_the_prefix_sthree-configurator')))
+    if (!value.match(/^(?!.*--ol-s3$)/))
+      callback(new Error($t('bucket_name.bucket_names_must_not_end_with_the_suffix_--ol-s3')))
+    else
+      callback()
+  }
+}
+
+const rgbaRegex = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(0|1|0?\.\d+|1\.0*)\s*\)$/i
+export function validateRGBA(color) {
+  if (rgbaRegex.test(color)) {
+    const matches = color.match(rgbaRegex)
+    const red = Number.parseInt(matches[1], 10)
+    const green = Number.parseInt(matches[2], 10)
+    const blue = Number.parseInt(matches[3], 10)
+    const alpha = Number.parseFloat(matches[4])
+
+    if (red >= 0 && red <= 255
+      && green >= 0 && green <= 255
+      && blue >= 0 && blue <= 255
+      && alpha >= 0 && alpha <= 1) {
+      return true
+    }
+  }
+
+  return false
+}
+
+export function numberValidator(payload: { min: number, max: number }) {
+  return (rule, value: number, callback: any) => {
+    if (value > payload.max || value < payload.min || !Number.isInteger(value))
+      callback(new Error(window.$t('base.validate.min-max', { min: payload.min, max: payload.max })))
+    else
+      callback()
+  }
+}

package/src/utils/videojs.ts

@@ -0,0 +1,490 @@
+import videojs from 'video.js'
+
+// import request from 'request';
+
+// Default options for the plugin.
+const defaults = {}
+
+// Cache for image elements
+const cache = {}
+
+// Cross-compatibility for Video.js 5 and 6.
+const registerPlugin = videojs.registerPlugin || videojs.plugin
+// const dom = videojs.dom || videojs;
+
+/**
+ * Function to invoke when the player is ready.
+ *
+ * This is a great place for your plugin to initialize itself. When this
+ * function is called, the player will have its DOM and child components
+ * in place.
+ *
+ * @function onPlayerReady
+ * @param    {Player} player
+ *           A Video.js player object.
+ *
+ * @param    {Object} [options={}]
+ *           A plain object containing options for the plugin.
+ */
+function onPlayerReady(player, options) {
+  player.addClass('vjs-vtt-thumbnails')
+  // eslint-disable-next-line new-cap
+  player.vttThumbnails = new vttThumbnailsPlugin(player, options)
+}
+
+/**
+ * A video.js plugin.
+ *
+ * In the plugin function, the value of `this` is a video.js `Player`
+ * instance. You cannot rely on the player being in a "ready" state here,
+ * depending on how the plugin is invoked. This may or may not be important
+ * to you; if not, remove the wait for "ready"!
+ *
+ * @function vttThumbnails
+ * @param    {Object} [options={}]
+ *           An object of options left to the plugin author to define.
+ */
+const vttThumbnails = function (options) {
+  this.ready(() => {
+    onPlayerReady(this, videojs.mergeOptions(defaults, options))
+  })
+}
+
+/**
+ * VTT Thumbnails class.
+ *
+ * This class performs all functions related to displaying the vtt
+ * thumbnails.
+ */
+class vttThumbnailsPlugin {
+  /**
+   * Plugin class constructor, called by videojs on
+   * ready event.
+   *
+   * @function  constructor
+   * @param    {Player} player
+   *           A Video.js player object.
+   *
+   * @param    {Object} [options={}]
+   *           A plain object containing options for the plugin.
+   */
+  constructor(player, options) {
+    this.player = player
+    this.options = options
+    this.listenForDurationChange()
+    this.initializeThumbnails()
+    this.registeredEvents = {}
+    return this
+  }
+
+  src(source) {
+    this.resetPlugin()
+    this.options.src = source
+    this.initializeThumbnails()
+  }
+
+  detach() {
+    this.resetPlugin()
+  }
+
+  resetPlugin() {
+    if (this.thumbnailHolder)
+      this.thumbnailHolder.parentNode.removeChild(this.thumbnailHolder)
+
+    if (this.progressBar) {
+      this.progressBar.removeEventListener('mouseenter', this.registeredEvents.progressBarMouseEnter)
+      this.progressBar.removeEventListener('mouseleave', this.registeredEvents.progressBarMouseLeave)
+      this.progressBar.removeEventListener('mousemove', this.registeredEvents.progressBarMouseMove)
+    }
+
+    delete this.registeredEvents.progressBarMouseEnter
+    delete this.registeredEvents.progressBarMouseLeave
+    delete this.registeredEvents.progressBarMouseMove
+    delete this.progressBar
+    delete this.vttData
+    delete this.thumbnailHolder
+    delete this.lastStyle
+  }
+
+  listenForDurationChange() {
+    this.player.on('durationchange', () => {
+
+    })
+  }
+
+  /**
+   * Bootstrap the plugin.
+   */
+  initializeThumbnails() {
+    if (!this.options.src)
+      return
+
+    const baseUrl = this.getBaseUrl()
+    const url = this.getFullyQualifiedUrl(this.options.src, baseUrl)
+
+    this.getVttFile(url)
+      .then((data) => {
+        this.vttData = this.processVtt(data)
+        this.setupThumbnailElement()
+      })
+  }
+
+  /**
+   * Builds a base URL should we require one.
+   *
+   * @return {string}
+   */
+  getBaseUrl() {
+    return [
+
+      window.location.protocol,
+      '//',
+
+      window.location.hostname,
+
+      (window.location.port ? `:${window.location.port}` : ''),
+
+      window.location.pathname,
+    ].join('').split(/([^\/]*)$/gi).shift()
+  }
+
+  /**
+   * Grabs the contents of the VTT file.
+   *
+   * @param url
+   * @return {Promise}
+   */
+  getVttFile(url) {
+    return new Promise((resolve, reject) => {
+      const req = new XMLHttpRequest()
+
+      req.data = {
+        resolve,
+      }
+
+      req.addEventListener('load', this.vttFileLoaded)
+      req.open('GET', url)
+      req.overrideMimeType('text/plain; charset=utf-8')
+      req.send()
+    })
+  }
+
+  /**
+   * Callback for loaded VTT file.
+   */
+  vttFileLoaded() {
+    this.data.resolve(this.responseText)
+  }
+
+  setupThumbnailElement(data) {
+    let mouseDisplay = null
+
+    if (!this.options.showTimestamp)
+      mouseDisplay = this.player.$('.vjs-mouse-display')
+
+    const thumbHolder = document.createElement('div')
+
+    thumbHolder.setAttribute('class', 'vjs-vtt-thumbnail-display')
+    this.progressBar = this.player.$('.vjs-progress-control')
+    this.progressBar.appendChild(thumbHolder)
+    this.thumbnailHolder = thumbHolder
+
+    if (mouseDisplay && !this.options.showTimestamp)
+      mouseDisplay.classList.add('vjs-hidden')
+
+    this.registeredEvents.progressBarMouseEnter = () => {
+      return this.onBarMouseenter()
+    }
+
+    this.registeredEvents.progressBarMouseLeave = () => {
+      return this.onBarMouseleave()
+    }
+
+    this.progressBar.addEventListener('mouseenter', this.registeredEvents.progressBarMouseEnter)
+    this.progressBar.addEventListener('mouseleave', this.registeredEvents.progressBarMouseLeave)
+  }
+
+  onBarMouseenter() {
+    this.mouseMoveCallback = (e) => {
+      this.onBarMousemove(e)
+    }
+
+    this.registeredEvents.progressBarMouseMove = this.mouseMoveCallback
+    this.progressBar.addEventListener('mousemove', this.registeredEvents.progressBarMouseMove)
+    this.showThumbnailHolder()
+  }
+
+  onBarMouseleave() {
+    if (this.registeredEvents.progressBarMouseMove)
+      this.progressBar.removeEventListener('mousemove', this.registeredEvents.progressBarMouseMove)
+
+    this.hideThumbnailHolder()
+  }
+
+  getXCoord(bar, mouseX) {
+    const rect = bar.getBoundingClientRect()
+
+    const docEl = document.documentElement
+
+    return mouseX - (rect.left + (window.pageXOffset || docEl.scrollLeft || 0))
+  }
+
+  onBarMousemove(event) {
+    this.updateThumbnailStyle(
+      videojs.dom.getPointerPosition(this.progressBar, event).x,
+      this.progressBar.offsetWidth,
+    )
+  }
+
+  getStyleForTime(time) {
+    for (let i = 0; i < this.vttData.length; ++i) {
+      const item = this.vttData[i]
+
+      if (time >= item.start && time < item.end) {
+        // Cache miss
+        if (item.css.url && !cache[item.css.url]) {
+          const image = new Image()
+
+          image.src = item.css.url
+          cache[item.css.url] = image
+        }
+
+        return item.css
+      }
+    }
+  }
+
+  showThumbnailHolder() {
+    this.thumbnailHolder.style.opacity = '1'
+  }
+
+  hideThumbnailHolder() {
+    this.thumbnailHolder.style.opacity = '0'
+  }
+
+  updateThumbnailStyle(percent, width) {
+    const duration = this.player.duration()
+    const time = percent * duration
+    const currentStyle = this.getStyleForTime(time)
+
+    if (!currentStyle)
+      return this.hideThumbnailHolder()
+
+    const xPos = percent * width
+    const thumbnailWidth = parseInt(currentStyle.width, 10)
+    const halfthumbnailWidth = thumbnailWidth >> 1
+    const marginRight = width - (xPos + halfthumbnailWidth)
+    const marginLeft = xPos - halfthumbnailWidth
+
+    if (marginLeft > 0 && marginRight > 0)
+      this.thumbnailHolder.style.transform = `translateX(${xPos - halfthumbnailWidth}px)`
+
+    else if (marginLeft <= 0)
+      this.thumbnailHolder.style.transform = `translateX(${0}px)`
+
+    else if (marginRight <= 0)
+      this.thumbnailHolder.style.transform = `translateX(${width - thumbnailWidth}px)`
+
+    if (this.lastStyle && this.lastStyle === currentStyle)
+      return
+
+    this.lastStyle = currentStyle
+
+    for (const style in currentStyle) {
+      if (currentStyle.hasOwnProperty(style))
+        this.thumbnailHolder.style[style] = currentStyle[style]
+    }
+  }
+
+  processVtt(data) {
+    const processedVtts = []
+    const vttDefinitions = data.split(/[\r\n][\r\n]/i)
+
+    vttDefinitions.forEach((vttDef) => {
+      if (vttDef.match(/([0-9]{2}:)?([0-9]{2}:)?[0-9]{2}(.[0-9]{3})?( ?--> ?)([0-9]{2}:)?([0-9]{2}:)?[0-9]{2}(.[0-9]{3})?[\r\n]{1}.*/gi)) {
+        const vttDefSplit = vttDef.split(/[\r\n]/i)
+        const vttTiming = vttDefSplit[0]
+        const vttTimingSplit = vttTiming.split(/ ?--> ?/i)
+        const vttTimeStart = vttTimingSplit[0]
+        const vttTimeEnd = vttTimingSplit[1]
+        const vttImageDef = vttDefSplit[1]
+        const vttCssDef = this.getVttCss(vttImageDef)
+
+        processedVtts.push({
+          start: this.getSecondsFromTimestamp(vttTimeStart),
+          end: this.getSecondsFromTimestamp(vttTimeEnd),
+          css: vttCssDef,
+        })
+      }
+    })
+
+    return processedVtts
+  }
+
+  getFullyQualifiedUrl(path, base) {
+    if (path.includes('//')) {
+      // We have a fully qualified path.
+      return path
+    }
+
+    if (base.indexOf('//') === 0) {
+      // We don't have a fully qualified path, but need to
+      // be careful with trimming.
+      return [
+        base.replace(/\/$/gi, ''),
+        this.trim(path, '/'),
+      ].join('/')
+    }
+
+    if (base.indexOf('//') > 0) {
+      // We don't have a fully qualified path, and should
+      // trim both sides of base and path.
+      return [
+        this.trim(base, '/'),
+        this.trim(path, '/'),
+      ].join('/')
+    }
+
+    // If all else fails.
+    return path
+  }
+
+  getPropsFromDef(def) {
+    const imageDefSplit = def.split(/#xywh=/i)
+    const imageUrl = imageDefSplit[0]
+    const imageCoords = imageDefSplit[1]
+    const splitCoords = imageCoords.match(/[0-9]+/gi)
+
+    return {
+      x: splitCoords[0],
+      y: splitCoords[1],
+      w: splitCoords[2],
+      h: splitCoords[3],
+      image: imageUrl,
+    }
+  }
+
+  getVttCss(vttImageDef) {
+    const cssObj = {}
+
+    // If there isn't a protocol, use the VTT source URL.
+    let baseSplit
+
+    if (this.options.src.includes('//'))
+      baseSplit = this.options.src.split(/([^\/]*)$/gi).shift()
+
+    else
+      baseSplit = this.getBaseUrl() + this.options.src.split(/([^\/]*)$/gi).shift()
+
+    vttImageDef = this.getFullyQualifiedUrl(vttImageDef, baseSplit)
+
+    if (!vttImageDef.match(/#xywh=/i)) {
+      cssObj.background = `url("${vttImageDef}")`
+      return cssObj
+    }
+
+    const imageProps = this.getPropsFromDef(vttImageDef)
+
+    cssObj.background = `url("${imageProps.image}") no-repeat -${imageProps.x}px -${imageProps.y}px`
+    cssObj.width = `${imageProps.w}px`
+    cssObj.height = `${imageProps.h}px`
+    cssObj.url = imageProps.image
+
+    return cssObj
+  }
+
+  /**
+   * deconstructTimestamp deconstructs a VTT timestamp
+   *
+   * @param  {string} timestamp VTT timestamp
+   * @return {Object}           deconstructed timestamp
+   */
+  deconstructTimestamp(timestamp) {
+    const splitStampMilliseconds = timestamp.split('.')
+    const timeParts = splitStampMilliseconds[0]
+    const timePartsSplit = timeParts.split(':')
+
+    return {
+      milliseconds: parseInt(splitStampMilliseconds[1], 10) || 0,
+      seconds: parseInt(timePartsSplit.pop(), 10) || 0,
+      minutes: parseInt(timePartsSplit.pop(), 10) || 0,
+      hours: parseInt(timePartsSplit.pop(), 10) || 0,
+    }
+  }
+
+  /**
+   * getSecondsFromTimestamp
+   *
+   * @param  {string} timestamp VTT timestamp
+   * @return {number}           timestamp in seconds
+   */
+  getSecondsFromTimestamp(timestamp) {
+    const timestampParts = this.deconstructTimestamp(timestamp)
+
+    return parseInt((timestampParts.hours * (60 * 60))
+      + (timestampParts.minutes * 60)
+      + timestampParts.seconds
+      + (timestampParts.milliseconds / 1000), 10)
+  }
+
+  /**
+   * trim
+   *
+   * @param  {string} str      source string
+   * @param  {string} charlist characters to trim from text
+   * @return {string}          trimmed string
+   */
+  trim(str, charlist) {
+    let whitespace = [
+      ' ',
+      '\n',
+      '\r',
+      '\t',
+      '\f',
+      '\x0B',
+      '\xA0',
+      '\u2000',
+      '\u2001',
+      '\u2002',
+      '\u2003',
+      '\u2004',
+      '\u2005',
+      '\u2006',
+      '\u2007',
+      '\u2008',
+      '\u2009',
+      '\u200A',
+      '\u200B',
+      '\u2028',
+      '\u2029',
+      '\u3000',
+    ].join('')
+    let l = 0
+    let i = 0
+
+    str += ''
+    if (charlist)
+      whitespace = (`${charlist}`).replace(/([[\]().?/*{}+$^:])/g, '$1')
+
+    l = str.length
+    for (i = 0; i < l; i++) {
+      if (!whitespace.includes(str.charAt(i))) {
+        str = str.substring(i)
+        break
+      }
+    }
+    l = str.length
+    for (i = l - 1; i >= 0; i--) {
+      if (!whitespace.includes(str.charAt(i))) {
+        str = str.substring(0, i + 1)
+        break
+      }
+    }
+    return !whitespace.includes(str.charAt(0)) ? str : ''
+  }
+}
+
+// Register the plugin with video.js.
+registerPlugin('vttThumbnails', vttThumbnails)
+
+export default vttThumbnails

package/src/utils/wujie.ts

@@ -0,0 +1 @@
+export const wujieProps = window.$wujie?.props

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}