Added video.js player with VR support for trailers.

2021-02-04 03:06:19 +01:00 · 2021-02-04 03:06:19 +01:00 · 98cae9270a
parent 91ba916884
commit 98cae9270a
9 changed files with 2082 additions and 19 deletions
--- a/assets/components/releases/banner.vue
+++ b/assets/components/releases/banner.vue
@ -8,29 +8,26 @@
 				v-if="release.trailer || release.teaser"
 				class="trailer-container"
 			>
-				<video
+				<Player
 					v-if="release.trailer"
-					:src="`/media/${release.trailer.path}`"
+					:video="release.trailer"
 					:poster="poster"
-					:alt="release.title"
-					:class="{ sfw: sfw && paused }"
-					class="item trailer"
-					controls
-					@playing="playing = true; paused = false;"
+					class="item"
+					@play="playing = true; paused = false;"
 					@pause="playing = false; paused = true;"
-				>Sorry, the tailer cannot be played in your browser</video>
+				/>

-				<video
+
+				<Player
 					v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
-					:src="`/media/${release.teaser.path}`"
+					:video="release.teaser"
 					:poster="poster"
 					:alt="release.title"
 					:class="{ sfw: sfw && paused }"
-					class="item trailer"
-					controls
-					@playing="playing = true; paused = false;"
+					class="item"
+					@play="playing = true; paused = false;"
 					@pause="playing = false; paused = true;"
-				>Sorry, the tailer cannot be played in your browser</video>
+				/>

 				<img
 					v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
@ -110,6 +107,8 @@
 </template>

 <script>
+import Player from '../video/player.vue';
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
@ -151,6 +150,9 @@ function photos() {
 }

 export default {
+	components: {
+		Player,
+	},
 	props: {
 		release: {
 			type: Object,
@ -167,6 +169,7 @@ export default {
 	},
 	data() {
 		return {
+			player: null,
 			playing: false,
 			paused: false,
 		};
--- a/assets/components/video/player.vue
+++ b/assets/components/video/player.vue
@ -0,0 +1,122 @@
+<template>
+	<video
+		ref="player"
+		:poster="poster"
+		class="player video-js vjs-big-play-centered"
+		@playing="$emit('play')"
+		@pause="$emit('pause')"
+	>
+		<source
+			:src="`/media/${video.path}`"
+			type="video/mp4"
+		>
+	</video>
+</template>
+
+<script>
+import videoJs from 'video.js';
+import 'videojs-vr/dist/videojs-vr.min';
+
+function mounted() {
+	this.player = videoJs(this.$refs.player, {
+		controls: true,
+		inactivityTimeout: 1000,
+		controlBar: {
+			pictureInPictureToggle: false,
+			volumePanel: {
+				inline: false,
+			},
+		},
+	}, () => {
+		if (this.video.isVr) {
+			this.player.vr({ projection: '180' });
+		}
+	});
+}
+
+export default {
+	props: {
+		video: {
+			type: Object,
+			default: null,
+		},
+		poster: {
+			type: String,
+			default: null,
+		},
+	},
+	mounted,
+};
+</script>
+
+<style lang="scss">
+.player.video-js {
+	.vjs-poster {
+		background-size: cover;
+	}
+
+	.vjs-control-bar {
+		background-color: var(--darken);
+	}
+
+	.vjs-slider {
+		background-color: var(--darken-weak);
+	}
+
+	.vjs-play-progress {
+		background-color: var(--primary);
+
+		.vjs-time-tooltip {
+			color: var(--darken-strong);
+		}
+	}
+
+	.vjs-load-progress {
+		background-color: var(--lighten-weak);
+
+		div {
+			background-color: var(--darken-weak);
+		}
+	}
+
+	.vjs-mouse-display .vjs-time-tooltip {
+		background-color: var(--darken-strong);
+	}
+
+	.vjs-remaining-time {
+		line-height: 2rem;
+		font-size: .75rem;
+		font-weight: bold;
+	}
+
+	.vjs-big-play-button {
+		background-color: var(--darken);
+		width: 4rem;
+		height: 4rem;
+		margin: -2rem 0 0 -2rem;
+		border: none;
+		border-radius: 50%;
+
+		.vjs-icon-placeholder {
+			font-size: 2.5rem;
+			line-height: 4rem;
+		}
+
+		&:hover {
+			background-color: var(--primary);
+		}
+	}
+
+	.vjs-control:focus::before,
+	.vjs-control:hover::before,
+	.vjs-control:focus {
+		text-shadow: 0 0 .5rem var(--lighten-strong);
+	}
+
+	&:hover {
+		.vjs-big-play-button {
+			background-color: var(--primary);
+		}
+	}
+}
+</style>
--- a/assets/css/_video.scss
+++ b/assets/css/_video.scss
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@ -2,6 +2,7 @@
@import 'forms';
@import 'inputs';
@import 'states';
+@import 'video';
@import 'tooltip';

 html,
--- a/assets/js/fragments.js
+++ b/assets/js/fragments.js
@ -160,6 +160,7 @@ const releaseTrailerFragment = `
            path
            thumbnail
            mime
+			isVr
        }
    }
 `;
--- a/migrations/20190325001339_releases.js
+++ b/migrations/20190325001339_releases.js
@ -34,7 +34,7 @@ exports.up = knex => Promise.resolve()
 		table.integer('quality', 6);
 		table.integer('width', 6);
 		table.integer('height', 6);
-		table.boolean('vr');
+		table.boolean('is_vr');
 		table.float('entropy');
 		table.float('sharpness');

--- a/package-lock.json
+++ b/package-lock.json
@ -1049,7 +1049,6 @@
            "version": "7.8.4",
            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
            "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
-            "dev": true,
            "requires": {
                "regenerator-runtime": "^0.13.2"
            },
@ -1057,8 +1056,7 @@
                "regenerator-runtime": {
                    "version": "0.13.3",
                    "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
-                    "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
-                    "dev": true
+                    "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
                }
            }
        },
@ -1377,6 +1375,57 @@
                "@types/node": "*"
            }
        },
+        "@videojs/http-streaming": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.2.4.tgz",
+            "integrity": "sha512-gzT46RpAEegOhMId/zZ6uXCVGDMPOv8qmoTykBuvd6/4lVM3lZ1ZJCq0kytAkisDuDKipy93gP46oZEtonlc/Q==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "@videojs/vhs-utils": "^2.2.1",
+                "aes-decrypter": "3.1.0",
+                "global": "^4.3.2",
+                "m3u8-parser": "4.5.0",
+                "mpd-parser": "0.14.0",
+                "mux.js": "5.6.7",
+                "video.js": "^6 || ^7"
+            }
+        },
+        "@videojs/vhs-utils": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-2.3.0.tgz",
+            "integrity": "sha512-ThSmm91S7tuIJ757ON50K4y7S/bvKN4+B0tu303gCOxaG57PoP1UvPfMQZ90XGhxwNgngexVojOqbBHhTvXVHQ==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "global": "^4.3.2",
+                "url-toolkit": "^2.1.6"
+            }
+        },
+        "@videojs/xhr": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.5.1.tgz",
+            "integrity": "sha512-wV9nGESHseSK+S9ePEru2+OJZ1jq/ZbbzniGQ4weAmTIepuBMSYPx5zrxxQA0E786T5ykpO8ts+LayV+3/oI2w==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "global": "~4.4.0",
+                "is-function": "^1.0.1"
+            },
+            "dependencies": {
+                "global": {
+                    "version": "4.4.0",
+                    "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+                    "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+                    "requires": {
+                        "min-document": "^2.19.0",
+                        "process": "^0.11.10"
+                    }
+                },
+                "process": {
+                    "version": "0.11.10",
+                    "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+                    "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+                }
+            }
+        },
        "@vue/compiler-core": {
            "version": "3.0.4",
            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.4.tgz",
@ -1810,6 +1859,17 @@
            "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.14.tgz",
            "integrity": "sha512-/9aQCnQHF+0IiCl0qhXoK7qs//SwYE7zX8lsr/DNk1BRAHYxeLZPL4pguwK29gUEqasYQjqPtEpDRSWEkdHn9g=="
        },
+        "aes-decrypter": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.0.tgz",
+            "integrity": "sha512-wL1NFwP2yNrJG4InpXYFhhYe9TfonnDyhyxMq2+K9/qt+SrZzUieOpviN6pkDly7GawTqw5feehk0rn5iYo00g==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "@videojs/vhs-utils": "^2.2.1",
+                "global": "^4.3.2",
+                "pkcs7": "^1.0.4"
+            }
+        },
        "agent-base": {
            "version": "4.3.0",
            "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
@ -3539,6 +3599,11 @@
                "entities": "^1.1.1"
            }
        },
+        "dom-walk": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+            "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+        },
        "domelementtype": {
            "version": "1.3.1",
            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
@ -5695,6 +5760,11 @@
            "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
            "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4="
        },
+        "gl-preserve-state": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/gl-preserve-state/-/gl-preserve-state-1.0.0.tgz",
+            "integrity": "sha512-zQZ25l3haD4hvgJZ6C9+s0ebdkW9y+7U2qxvGu1uWOJh8a4RU+jURIKEQhf8elIlFpMH6CrAY2tH0mYrRjet3Q=="
+        },
        "glob": {
            "version": "7.1.6",
            "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@ -5735,6 +5805,15 @@
            "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
            "dev": true
        },
+        "global": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+            "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+            "requires": {
+                "min-document": "^2.19.0",
+                "process": "~0.5.1"
+            }
+        },
        "global-modules": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
@ -6194,6 +6273,11 @@
            "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
            "dev": true
        },
+        "individual": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+            "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+        },
        "inflight": {
            "version": "1.0.6",
            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@ -6480,6 +6564,11 @@
                "number-is-nan": "^1.0.0"
            }
        },
+        "is-function": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+            "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+        },
        "is-glob": {
            "version": "4.0.1",
            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@ -6853,6 +6942,11 @@
                "safe-buffer": "^5.0.1"
            }
        },
+        "keycode": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+            "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+        },
        "keypress": {
            "version": "0.2.1",
            "resolved": "https://registry.npmjs.org/keypress/-/keypress-0.2.1.tgz",
@ -7227,6 +7321,16 @@
                }
            }
        },
+        "m3u8-parser": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.5.0.tgz",
+            "integrity": "sha512-RGm/1WVCX3o1bSWbJGmJUu4zTbtJy8lImtgHM4CESFvJRXYztr1j6SW/q9/ghYOrUjgH7radsIar+z1Leln0sA==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "@videojs/vhs-utils": "^2.2.1",
+                "global": "^4.3.2"
+            }
+        },
        "magic-string": {
            "version": "0.25.7",
            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@ -7521,6 +7625,14 @@
            "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
            "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA=="
        },
+        "min-document": {
+            "version": "2.19.0",
+            "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+            "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+            "requires": {
+                "dom-walk": "^0.1.0"
+            }
+        },
        "mini-css-extract-plugin": {
            "version": "1.3.3",
            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.3.tgz",
@ -7674,6 +7786,17 @@
            "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
            "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
        },
+        "mpd-parser": {
+            "version": "0.14.0",
+            "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.14.0.tgz",
+            "integrity": "sha512-HqXQS3WLofcnYFcxv5oWdlciddUaEnN3NasXLVQ793mdnZRrinjz2Yk1DsUYPDYOUWf6ZBBqbFhaJT5LiT2ouA==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "@videojs/vhs-utils": "^2.2.1",
+                "global": "^4.3.2",
+                "xmldom": "^0.1.27"
+            }
+        },
        "ms": {
            "version": "2.1.2",
            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -7684,6 +7807,11 @@
            "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
            "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
        },
+        "mux.js": {
+            "version": "5.6.7",
+            "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.6.7.tgz",
+            "integrity": "sha512-YSr6B8MUgE4S18MptbY2XM+JKGbw9JDkgs7YkuE/T2fpDKjOhZfb/nD6vmsVxvLYOExWNaQn1UGBp6PGsnTtew=="
+        },
        "nan": {
            "version": "2.14.0",
            "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
@ -7963,6 +8091,11 @@
            "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
            "dev": true
        },
+        "nosleep.js": {
+            "version": "0.7.0",
+            "resolved": "https://registry.npmjs.org/nosleep.js/-/nosleep.js-0.7.0.tgz",
+            "integrity": "sha1-z9kZwlUjyg0PSmn7MwXAg62u4ok="
+        },
        "npm-bundled": {
            "version": "1.1.1",
            "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz",
@ -8562,6 +8695,14 @@
                "node-modules-regexp": "^1.0.0"
            }
        },
+        "pkcs7": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+            "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+            "requires": {
+                "@babel/runtime": "^7.5.5"
+            }
+        },
        "pkg-dir": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
@ -8993,6 +9134,11 @@
            "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
            "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg=="
        },
+        "process": {
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+            "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        },
        "process-nextick-args": {
            "version": "2.0.1",
            "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@ -9648,6 +9794,14 @@
            "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
            "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ=="
        },
+        "rust-result": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+            "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+            "requires": {
+                "individual": "^2.0.0"
+            }
+        },
        "rxjs": {
            "version": "6.6.3",
            "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
@ -9661,6 +9815,14 @@
            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
        },
+        "safe-json-parse": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+            "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+            "requires": {
+                "rust-result": "^1.0.0"
+            }
+        },
        "safe-regex": {
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@ -11588,6 +11750,11 @@
            "resolved": "https://registry.npmjs.org/url-pattern/-/url-pattern-1.0.3.tgz",
            "integrity": "sha1-BAkpJHGyTyPFDWWkeTF5PStaz8E="
        },
+        "url-toolkit": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.1.tgz",
+            "integrity": "sha512-8+DzgrtDZYZGhHaAop5WGVghMdCfOLGbhcArsJD0qDll71FXa7EeKxi2hilPIscn2nwMz4PRjML32Sz4JTN0Xw=="
+        },
        "use": {
            "version": "3.1.1",
            "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@ -11665,6 +11832,100 @@
                "extsprintf": "^1.2.0"
            }
        },
+        "video.js": {
+            "version": "7.10.2",
+            "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.10.2.tgz",
+            "integrity": "sha512-kJTTrqcQn2MhPzWR8zQs6W3HPJWpowO/ZGZcKt2dcJeJdJT0dEDLYtiFdjV37SylCmu66V0flRnV8cipbthveQ==",
+            "requires": {
+                "@babel/runtime": "^7.9.2",
+                "@videojs/http-streaming": "2.2.4",
+                "@videojs/xhr": "2.5.1",
+                "global": "4.3.2",
+                "keycode": "^2.2.0",
+                "safe-json-parse": "4.0.0",
+                "videojs-font": "3.2.0",
+                "videojs-vtt.js": "^0.15.2"
+            },
+            "dependencies": {
+                "@babel/runtime": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.13.tgz",
+                    "integrity": "sha512-8+3UMPBrjFa/6TtKi/7sehPKqfAm4g6K+YQjyyFOLUTxzOngcRZTlAVY8sc2CORJYqdHQY8gRPHmn+qo15rCBw==",
+                    "requires": {
+                        "regenerator-runtime": "^0.13.4"
+                    }
+                },
+                "regenerator-runtime": {
+                    "version": "0.13.7",
+                    "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+                    "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+                }
+            }
+        },
+        "videojs-font": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+            "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
+        },
+        "videojs-vr": {
+            "version": "1.7.1",
+            "resolved": "https://registry.npmjs.org/videojs-vr/-/videojs-vr-1.7.1.tgz",
+            "integrity": "sha512-o9mpGdf529jZjCnYhGEmkyMjmHcMLAVobx94RxX7Z1uhdVDoT7O1Ct88X+RdjlwYn4qUmrEk8NQFYOb6I2wQ1A==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "global": "^4.4.0",
+                "three": "0.93.0",
+                "video.js": "^6 || ^7",
+                "webvr-polyfill": "0.10.6"
+            },
+            "dependencies": {
+                "cardboard-vr-display": {
+                    "version": "1.0.13",
+                    "resolved": "https://registry.npmjs.org/cardboard-vr-display/-/cardboard-vr-display-1.0.13.tgz",
+                    "integrity": "sha512-/ovHu4nHfo3oaw2v20v7ErvDUmIBPih/e/6VG83XUUFs5vPQaGSM8hihqKClOlwy3Fz+52L0FrhcGSH3o+yn6w==",
+                    "requires": {
+                        "gl-preserve-state": "^1.0.0",
+                        "nosleep.js": "^0.7.0",
+                        "webvr-polyfill-dpdb": "^1.0.7"
+                    }
+                },
+                "global": {
+                    "version": "4.4.0",
+                    "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+                    "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+                    "requires": {
+                        "min-document": "^2.19.0",
+                        "process": "^0.11.10"
+                    }
+                },
+                "process": {
+                    "version": "0.11.10",
+                    "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+                    "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+                },
+                "three": {
+                    "version": "0.93.0",
+                    "resolved": "https://registry.npmjs.org/three/-/three-0.93.0.tgz",
+                    "integrity": "sha1-P9bDZ+9FVKu7bhataZNig+iVwSM="
+                },
+                "webvr-polyfill": {
+                    "version": "0.10.6",
+                    "resolved": "https://registry.npmjs.org/webvr-polyfill/-/webvr-polyfill-0.10.6.tgz",
+                    "integrity": "sha512-H+2LI+rHMguGaUAg+1QuiIQ+1Y1wTSkkUXjQfF/GFD2wUL0AdiN8+uPGxnE7bHMBIG7NswN6kgkZhgy4WpwTlw==",
+                    "requires": {
+                        "cardboard-vr-display": "1.0.13"
+                    }
+                }
+            }
+        },
+        "videojs-vtt.js": {
+            "version": "0.15.2",
+            "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.2.tgz",
+            "integrity": "sha512-kEo4hNMvu+6KhPvVYPKwESruwhHC3oFis133LwhXHO9U7nRnx0RiJYMiqbgwjgazDEXHR6t8oGJiHM6wq5XlAw==",
+            "requires": {
+                "global": "^4.3.1"
+            }
+        },
        "vue": {
            "version": "3.0.4",
            "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.4.tgz",
@ -12276,6 +12537,11 @@
                }
            }
        },
+        "webvr-polyfill-dpdb": {
+            "version": "1.0.18",
+            "resolved": "https://registry.npmjs.org/webvr-polyfill-dpdb/-/webvr-polyfill-dpdb-1.0.18.tgz",
+            "integrity": "sha512-O0S1ZGEWyPvyZEkS2VbyV7mtir/NM9MNK3EuhbHPoJ8EHTky2pTXehjIl+IiDPr+Lldgx129QGt3NGly7rwRPw=="
+        },
        "whatwg-encoding": {
            "version": "1.0.5",
            "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
@ -12464,6 +12730,11 @@
            "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
            "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
        },
+        "xmldom": {
+            "version": "0.1.31",
+            "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
+            "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ=="
+        },
        "xtend": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/xtend/-/xtend-3.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -130,6 +130,8 @@
        "tunnel": "0.0.6",
        "url-pattern": "^1.0.3",
        "v-tooltip": "^2.0.3",
+        "video.js": "^7.10.2",
+        "videojs-vr": "^1.7.1",
        "vue": "^3.0.4",
        "vue-router": "^4.0.1",
        "vuex": "^4.0.0-rc.2",
--- a/src/media.js
+++ b/src/media.js
@ -636,7 +636,7 @@ function curateMediaEntry(media, index) {
 		size: media.meta.size,
 		width: media.meta.width,
 		height: media.meta.height,
-		vr: media.vr,
+		is_vr: media.vr,
 		entropy: media.meta.entropy,
 		sharpness: media.meta.sharpness,
 		source: media.src,