New video tag

src/charts/allCharts.ts

@@ -14,6 +14,7 @@ import scatter from './scatter.vue'
 import text from './text.vue'
 import transit from './transit.vue'
 import vega from './vega.vue'
+import video from './video.vue'
 
 // full-screen map visualizations:
 import aggregate from './aggregate.vue'
@@ -37,6 +38,7 @@ export const plotlyCharts = {
   transit,
   scatter,
   vega,
+  video,
 }
 
 // export all remaining charts/maps here:

src/charts/video.vue

@@ -0,0 +1,73 @@
+<template lang="pug">
+
+figure(class="video_container")
+
+  video(:controls="controls" :loop='loop' :allowfullscreen='allowfullscreen')
+
+    source(v-for="(src, type) in sources" :src="src" :type="type" :key="type")
+
+    p(v-for="(src, type) in sources" :key="type") Video tag not supported. Download the video&nbsp;
+      a(:href="src" target="_blank") here
+
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
+
+import { FileSystemConfig } from '@/Globals'
+import HTTPFileSystem from '@/js/HTTPFileSystem'
+
+@Component({})
+export default class VueComponent extends Vue {
+  @Prop({ required: true }) fileSystemConfig!: FileSystemConfig
+  @Prop({ required: true }) subfolder!: string
+  @Prop({ required: true }) files!: string[]
+  @Prop({ required: true }) config!: any
+
+  private controls: string | null = null
+  private loop: string | null = null
+  private allowfullscreen: string | null = null
+  private sources: { [key: string]: string } = {}
+
+  // true for absolute URLs
+  private r: RegExp = new RegExp('^(?:[a-z]+:)?//', 'i')
+
+  private async mounted() {
+    this.controls = this.config.controls
+    this.loop = this.config.loop
+    this.allowfullscreen = this.config.allowfullscreen
+
+    this.sources = {}
+
+    const fileApi = new HTTPFileSystem(this.fileSystemConfig)
+
+    // Resolve relative URLs
+    for (const k in this.config.sources) {
+      var url = this.config.sources[k]
+
+      if (!this.r.test(url)) url = fileApi.cleanURL(`${this.subfolder}/${url}`)
+
+      this.sources[k] = url
+    }
+
+    this.$emit('isLoaded')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.dash-element {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 640px) {
+}
+</style>