8 files changed, 457 insertions, 0 deletions

diff --git a/client/src/app/helpers/constants.ts b/client/src/app/helpers/constants.ts
new file mode 100644
index 000000000..bb4a0884e
--- /dev/null
+++ b/client/src/app/helpers/constants.ts
@@ -0,0 +1 @@
+export const POP_STATE_MODAL_DISMISS = 'pop state dismiss'
diff --git a/client/src/app/helpers/i18n-utils.ts b/client/src/app/helpers/i18n-utils.ts
new file mode 100644
index 000000000..bbfb12959
--- /dev/null
+++ b/client/src/app/helpers/i18n-utils.ts
@@ -0,0 +1,14 @@
+import { environment } from '../../environments/environment'
+
+function isOnDevLocale () {
+  return environment.production === false && window.location.search === '?lang=fr'
+}
+
+function getDevLocale () {
+  return 'fr-FR'
+}
+
+export {
+  getDevLocale,
+  isOnDevLocale
+}
diff --git a/client/src/app/helpers/index.ts b/client/src/app/helpers/index.ts
new file mode 100644
index 000000000..06806402e
--- /dev/null
+++ b/client/src/app/helpers/index.ts
@@ -0,0 +1,6 @@
+export * from './locales'
+export * from './constants'
+export * from './i18n-utils'
+export * from './peertube-web-storage'
+export * from './utils'
+export * from './zone'
diff --git a/client/src/app/helpers/locales/index.ts b/client/src/app/helpers/locales/index.ts
new file mode 100644
index 000000000..b0e4d6148
--- /dev/null
+++ b/client/src/app/helpers/locales/index.ts
@@ -0,0 +1 @@
+export * from './oc'
diff --git a/client/src/app/helpers/locales/oc.ts b/client/src/app/helpers/locales/oc.ts
new file mode 100644
index 000000000..d3b2e8407
--- /dev/null
+++ b/client/src/app/helpers/locales/oc.ts
@@ -0,0 +1,104 @@
+
+// This code is not generated
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u: any = undefined
+
+function plural (n: number): number {
+  const i = Math.floor(Math.abs(n))
+  if (i === 0 || i === 1) return 1
+  return 5
+}
+
+export default [
+  'oc',
+  [['a. m.', 'p. m.'], u, u],
+  u,
+  [
+    ['dg', 'dl', 'dm', 'dc', 'dj', 'dv', 'ds'], ['dg.', 'dl.', 'dm.', 'dc.', 'dj.', 'dv.', 'ds.'],
+    ['dimenge', 'diluns', 'dimars', 'dimècres', 'dijòus', 'divendres', 'dissabte'],
+    ['dg.', 'dl.', 'dm.', 'dc.', 'dj.', 'dv.', 'ds.']
+  ],
+  u,
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MA', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DC'],
+    [
+      'de gen.', 'de febr.', 'de març', 'd’abr.', 'de mai', 'de junh', 'de jul.', 'd’ag.',
+      'de set.', 'd’oct.', 'de nov.', 'de dec.'
+    ],
+    [
+      'de genièr', 'de febrièr', 'de març', 'd’abril', 'de mai', 'de junh', 'de julhet',
+      'd’agòst', 'de setembre', 'd’octòbre', 'de novembre', 'de decembre'
+    ]
+  ],
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MA', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DC'],
+    [
+      'gen.', 'febr.', 'març', 'abr.', 'mai', 'junh', 'jul.', 'ag.', 'set.', 'oct.', 'nov.',
+      'dec.'
+    ],
+    [
+      'genièr', 'febrièr', 'març', 'abril', 'mai', 'junh', 'julhet', 'agòst', 'setembre', 'octòbre',
+      'novembre', 'decembre'
+    ]
+  ],
+  [['aC', 'dC'], u, ['abans Jèsus-Crist', 'aprèp Jèsus-Crist']],
+  1,
+  [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM \'de\' y', 'EEEE, d MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', '{1} \'a\' \'les\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'],
+  'EUR',
+  '€',
+  'euro',
+  {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TOP': [u, '$T'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['$WS'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  'ltr',
+  plural
+]
diff --git a/client/src/app/helpers/peertube-web-storage.ts b/client/src/app/helpers/peertube-web-storage.ts
new file mode 100644
index 000000000..0db1301bd
--- /dev/null
+++ b/client/src/app/helpers/peertube-web-storage.ts
@@ -0,0 +1,81 @@
+// Thanks: https://github.com/capaj/localstorage-polyfill
+
+const valuesMap = new Map()
+
+function proxify (instance: MemoryStorage) {
+  return new Proxy(instance, {
+    set: function (obj, prop: string | number, value) {
+      if (MemoryStorage.prototype.hasOwnProperty(prop)) {
+        instance[prop] = value
+      } else {
+        instance.setItem(prop, value)
+      }
+      return true
+    },
+    get: function (target, name: string | number) {
+      if (MemoryStorage.prototype.hasOwnProperty(name)) {
+        return instance[name]
+      }
+      if (valuesMap.has(name)) {
+        return instance.getItem(name)
+      }
+    }
+  })
+}
+
+class MemoryStorage {
+  [key: string]: any
+  [index: number]: string
+
+  getItem (key: any) {
+    const stringKey = String(key)
+    if (valuesMap.has(key)) {
+      return String(valuesMap.get(stringKey))
+    }
+
+    return null
+  }
+
+  setItem (key: any, val: any) {
+    valuesMap.set(String(key), String(val))
+  }
+
+  removeItem (key: any) {
+    valuesMap.delete(key)
+  }
+
+  clear () {
+    valuesMap.clear()
+  }
+
+  key (i: any) {
+    if (arguments.length === 0) {
+      throw new TypeError('Failed to execute "key" on "Storage": 1 argument required, but only 0 present.')
+    }
+
+    const arr = Array.from(valuesMap.keys())
+    return arr[i]
+  }
+
+  get length () {
+    return valuesMap.size
+  }
+}
+
+let peertubeLocalStorage: Storage
+let peertubeSessionStorage: Storage
+try {
+  peertubeLocalStorage = localStorage
+  peertubeSessionStorage = sessionStorage
+} catch (err) {
+  const instanceLocalStorage = new MemoryStorage()
+  const instanceSessionStorage = new MemoryStorage()
+
+  peertubeLocalStorage = proxify(instanceLocalStorage)
+  peertubeSessionStorage = proxify(instanceSessionStorage)
+}
+
+export {
+  peertubeLocalStorage,
+  peertubeSessionStorage
+}
diff --git a/client/src/app/helpers/utils.ts b/client/src/app/helpers/utils.ts
new file mode 100644
index 000000000..879f697f4
--- /dev/null
+++ b/client/src/app/helpers/utils.ts
@@ -0,0 +1,210 @@
+import { DatePipe } from '@angular/common'
+import { environment } from '../../environments/environment'
+import { AuthService } from '../core/auth'
+
+// Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
+function getParameterByName (name: string, url: string) {
+  if (!url) url = window.location.href
+  name = name.replace(/[\[\]]/g, '\\$&')
+
+  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
+  const results = regex.exec(url)
+
+  if (!results) return null
+  if (!results[2]) return ''
+
+  return decodeURIComponent(results[2].replace(/\+/g, ' '))
+}
+
+function populateAsyncUserVideoChannels (authService: AuthService, channel: { id: number, label: string, support?: string }[]) {
+  return new Promise(res => {
+    authService.userInformationLoaded
+      .subscribe(
+        () => {
+          const user = authService.getUser()
+          if (!user) return
+
+          const videoChannels = user.videoChannels
+          if (Array.isArray(videoChannels) === false) return
+
+          videoChannels.forEach(c => channel.push({ id: c.id, label: c.displayName, support: c.support }))
+
+          return res()
+        }
+      )
+  })
+}
+
+function getAbsoluteAPIUrl () {
+  let absoluteAPIUrl = environment.apiUrl
+  if (!absoluteAPIUrl) {
+    // The API is on the same domain
+    absoluteAPIUrl = window.location.origin
+  }
+
+  return absoluteAPIUrl
+}
+
+const datePipe = new DatePipe('en')
+function dateToHuman (date: string) {
+  return datePipe.transform(date, 'medium')
+}
+
+function durationToString (duration: number) {
+  const hours = Math.floor(duration / 3600)
+  const minutes = Math.floor((duration % 3600) / 60)
+  const seconds = duration % 60
+
+  const minutesPadding = minutes >= 10 ? '' : '0'
+  const secondsPadding = seconds >= 10 ? '' : '0'
+  const displayedHours = hours > 0 ? hours.toString() + ':' : ''
+
+  return (
+    displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
+  ).replace(/^0/, '')
+}
+
+function immutableAssign <A, B> (target: A, source: B) {
+  return Object.assign({}, target, source)
+}
+
+function objectToUrlEncoded (obj: any) {
+  const str: string[] = []
+  for (const key of Object.keys(obj)) {
+    str.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
+  }
+
+  return str.join('&')
+}
+
+// Thanks: https://gist.github.com/ghinda/8442a57f22099bdb2e34
+function objectToFormData (obj: any, form?: FormData, namespace?: string) {
+  const fd = form || new FormData()
+  let formKey
+
+  for (const key of Object.keys(obj)) {
+    if (namespace) formKey = `${namespace}[${key}]`
+    else formKey = key
+
+    if (obj[key] === undefined) continue
+
+    if (Array.isArray(obj[key]) && obj[key].length === 0) {
+      fd.append(key, null)
+      continue
+    }
+
+    if (obj[key] !== null && typeof obj[ key ] === 'object' && !(obj[ key ] instanceof File)) {
+      objectToFormData(obj[ key ], fd, formKey)
+    } else {
+      fd.append(formKey, obj[ key ])
+    }
+  }
+
+  return fd
+}
+
+function objectLineFeedToHtml (obj: any, keyToNormalize: string) {
+  return immutableAssign(obj, {
+    [keyToNormalize]: lineFeedToHtml(obj[keyToNormalize])
+  })
+}
+
+function lineFeedToHtml (text: string) {
+  if (!text) return text
+
+  return text.replace(/\r?\n|\r/g, '<br />')
+}
+
+function removeElementFromArray <T> (arr: T[], elem: T) {
+  const index = arr.indexOf(elem)
+  if (index !== -1) arr.splice(index, 1)
+}
+
+function sortBy (obj: any[], key1: string, key2?: string) {
+  return obj.sort((a, b) => {
+    const elem1 = key2 ? a[key1][key2] : a[key1]
+    const elem2 = key2 ? b[key1][key2] : b[key1]
+
+    if (elem1 < elem2) return -1
+    if (elem1 === elem2) return 0
+    return 1
+  })
+}
+
+function scrollToTop () {
+  window.scroll(0, 0)
+}
+
+// Thanks: https://github.com/uupaa/dynamic-import-polyfill
+function importModule (path: string) {
+  return new Promise((resolve, reject) => {
+    const vector = '$importModule$' + Math.random().toString(32).slice(2)
+    const script = document.createElement('script')
+
+    const destructor = () => {
+      delete window[ vector ]
+      script.onerror = null
+      script.onload = null
+      script.remove()
+      URL.revokeObjectURL(script.src)
+      script.src = ''
+    }
+
+    script.defer = true
+    script.type = 'module'
+
+    script.onerror = () => {
+      reject(new Error(`Failed to import: ${path}`))
+      destructor()
+    }
+    script.onload = () => {
+      resolve(window[ vector ])
+      destructor()
+    }
+    const absURL = (environment.apiUrl || window.location.origin) + path
+    const loader = `import * as m from "${absURL}"; window.${vector} = m;` // export Module
+    const blob = new Blob([ loader ], { type: 'text/javascript' })
+    script.src = URL.createObjectURL(blob)
+
+    document.head.appendChild(script)
+  })
+}
+
+function isInViewport (el: HTMLElement) {
+  const bounding = el.getBoundingClientRect()
+  return (
+      bounding.top >= 0 &&
+      bounding.left >= 0 &&
+      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+function isXPercentInViewport (el: HTMLElement, percentVisible: number) {
+  const rect = el.getBoundingClientRect()
+  const windowHeight = (window.innerHeight || document.documentElement.clientHeight)
+
+  return !(
+    Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible ||
+    Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
+  )
+}
+
+export {
+  sortBy,
+  durationToString,
+  lineFeedToHtml,
+  objectToUrlEncoded,
+  getParameterByName,
+  populateAsyncUserVideoChannels,
+  getAbsoluteAPIUrl,
+  dateToHuman,
+  immutableAssign,
+  objectToFormData,
+  objectLineFeedToHtml,
+  removeElementFromArray,
+  importModule,
+  scrollToTop,
+  isInViewport,
+  isXPercentInViewport
+}
diff --git a/client/src/app/helpers/zone.ts b/client/src/app/helpers/zone.ts
new file mode 100644
index 000000000..74eed7032
--- /dev/null
+++ b/client/src/app/helpers/zone.ts
@@ -0,0 +1,40 @@
+import { SchedulerLike, Subscription } from 'rxjs'
+import { NgZone } from '@angular/core'
+
+class LeaveZoneScheduler implements SchedulerLike {
+  constructor (private zone: NgZone, private scheduler: SchedulerLike) {
+  }
+
+  schedule (...args: any[]): Subscription {
+    return this.zone.runOutsideAngular(() =>
+      this.scheduler.schedule.apply(this.scheduler, args)
+    )
+  }
+
+  now (): number {
+    return this.scheduler.now()
+  }
+}
+
+class EnterZoneScheduler implements SchedulerLike {
+  constructor (private zone: NgZone, private scheduler: SchedulerLike) {
+  }
+
+  schedule (...args: any[]): Subscription {
+    return this.zone.run(() =>
+      this.scheduler.schedule.apply(this.scheduler, args)
+    )
+  }
+
+  now (): number {
+    return this.scheduler.now()
+  }
+}
+
+export function leaveZone (zone: NgZone, scheduler: SchedulerLike): SchedulerLike {
+  return new LeaveZoneScheduler(zone, scheduler)
+}
+
+export function enterZone (zone: NgZone, scheduler: SchedulerLike): SchedulerLike {
+  return new EnterZoneScheduler(zone, scheduler)
+}