Merge pull request #2010 from syeopite/360videosupport

Add experimental support for 360° videos
2024-08-15 00:53:41 +00:00 · 2021-05-23 16:27:47 +00:00 · 2021-05-23 16:27:47 +00:00 · 993d731c92
commit 993d731c92
parent 8806c57c63 f529948d81
47 changed files with 52817 additions and 1 deletions
--- a/assets/css/videojs-vr.css
+++ b/assets/css/videojs-vr.css
@ -0,0 +1 @@
+.video-js .vjs-big-vr-play-button{width:100px;height:100px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cpath fill='%23FFF' d='M334.883 275.78l-6.374-36.198-6.375-36.2-28.16 23.62-28.164 23.62 25.837 9.41C266.247 296.544 224 320.5 176.25 320.5c-77.47 0-140.5-63.03-140.5-140.5 0-77.472 63.03-140.5 140.5-140.5 53.428 0 99.98 29.978 123.733 73.993l13.304-6.923C287.025 57.76 235.45 24.5 176.25 24.5c-85.743 0-155.5 69.757-155.5 155.5 0 85.742 69.757 155.5 155.5 155.5 54.253 0 102.09-27.94 129.922-70.177l28.71 10.457z'/%3E%3Cpath fill='%23FFF' d='M314.492 175.167c-12.98 0-23.54-10.56-23.54-23.54s10.56-23.54 23.54-23.54c12.98 0 23.54 10.56 23.54 23.54s-10.56 23.54-23.54 23.54zm0-38.08c-8.018 0-14.54 6.522-14.54 14.54s6.522 14.54 14.54 14.54c8.017 0 14.54-6.522 14.54-14.54s-6.523-14.54-14.54-14.54z'/%3E%3Cg fill='%23FFF'%3E%3Cpath d='M88.76 173.102h9.395c4.74-.042 8.495-1.27 11.268-3.682 2.77-2.412 4.157-5.903 4.157-10.474 0-4.4-1.153-7.817-3.46-10.25-2.307-2.434-5.83-3.65-10.568-3.65-4.147 0-7.554 1.195-10.22 3.585-2.666 2.392-4 5.514-4 9.364H69.908c0-4.74 1.26-9.055 3.776-12.95 2.518-3.892 6.03-6.928 10.537-9.108 4.508-2.18 9.554-3.27 15.14-3.27 9.225 0 16.472 2.318 21.74 6.952 5.27 4.634 7.903 11.077 7.903 19.33 0 4.147-1.323 8.05-3.967 11.71-2.646 3.66-6.062 6.422-10.252 8.284 5.078 1.736 8.94 4.465 11.584 8.19s3.968 8.166 3.968 13.33c0 8.294-2.847 14.895-8.538 19.804s-13.17 7.363-22.438 7.363c-8.887 0-16.166-2.37-21.836-7.11-5.67-4.74-8.506-11.045-8.506-18.916h15.425c0 4.062 1.365 7.363 4.094 9.902 2.73 2.54 6.4 3.81 11.014 3.81 4.782 0 8.55-1.27 11.3-3.81s4.126-6.22 4.126-11.045c0-4.865-1.44-8.61-4.316-11.235-2.878-2.623-7.152-3.936-12.822-3.936H88.76V173.1zM187.598 133.493v12.76h-1.904c-8.633.126-15.53 2.497-20.693 7.108-5.162 4.614-8.23 11.152-9.203 19.615 4.95-5.205 11.277-7.808 18.98-7.808 8.166 0 14.608 2.878 19.328 8.633 4.718 5.755 7.077 13.182 7.077 22.28 0 9.395-2.76 17.002-8.284 22.82-5.52 5.818-12.77 8.73-21.74 8.73-9.226 0-16.705-3.407-22.44-10.222-5.733-6.812-8.6-15.742-8.6-26.787v-5.267c0-16.208 3.945-28.903 11.84-38.086 7.89-9.182 19.242-13.774 34.054-13.774h1.586zM171.03 177.61c-3.386 0-6.485.95-9.3 2.855-2.814 1.904-4.877 4.443-6.188 7.617v4.697c0 6.854 1.438 12.304 4.316 16.345 2.877 4.04 6.602 6.062 11.172 6.062s8.188-1.715 10.854-5.143 4-7.934 4-13.52-1.355-10.135-4.063-13.648c-2.708-3.51-6.304-5.267-10.79-5.267zM271.136 187.447c0 13.29-2.486 23.307-7.46 30.057s-12.535 10.125-22.69 10.125c-9.988 0-17.51-3.292-22.566-9.872-5.058-6.58-7.65-16.323-7.776-29.23V172.53c0-13.287 2.485-23.252 7.458-29.896 4.973-6.643 12.558-9.966 22.757-9.966 10.112 0 17.655 3.237 22.63 9.712 4.97 6.475 7.52 16.166 7.647 29.072v15.995zm-15.425-17.265c0-8.674-1.185-15.033-3.554-19.075-2.37-4.04-6.137-6.062-11.3-6.062-5.035 0-8.738 1.915-11.107 5.745-2.37 3.83-3.62 9.807-3.746 17.932v20.948c0 8.633 1.206 15.064 3.618 19.297s6.2 6.348 11.362 6.348c4.95 0 8.61-1.957 10.98-5.87 2.37-3.915 3.62-10.04 3.746-18.378v-20.885z'/%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-color:rgba(0,0,0,0.5)}.video-js .vjs-big-vr-play-button .vjs-icon-placeholder{display:none}:hover.video-js .vjs-big-vr-play-button{-webkit-transition:border-color 0.4s,outline 0.4s,background-color 0.4s;-moz-transition:border-color 0.4s,outline 0.4s,background-color 0.4s;-ms-transition:border-color 0.4s,outline 0.4s,background-color 0.4s;-o-transition:border-color 0.4s,outline 0.4s,background-color 0.4s;transition:border-color 0.4s,outline 0.4s,background-color 0.4s}.video-js .vjs-big-vr-play-button::before{content:''}.video-js canvas{cursor:move}.video-js .vjs-button-vr .vjs-icon-placeholder{height:30px;width:30px;display:inline-block;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0ZGRkZGRiI+CiAgICA8cGF0aCBkPSJNMjAuNzQgNkgzLjIxQzIuNTUgNiAyIDYuNTcgMiA3LjI4djEwLjQ0YzAgLjcuNTUgMS4yOCAxLjIzIDEuMjhoNC43OWMuNTIgMCAuOTYtLjMzIDEuMTQtLjc5bDEuNC0zLjQ4Yy4yMy0uNTkuNzktMS4wMSAxLjQ0LTEuMDFzMS4yMS40MiAxLjQ1IDEuMDFsMS4zOSAzLjQ4Yy4xOS40Ni42My43OSAxLjExLjc5aDQuNzljLjcxIDAgMS4yNi0uNTcgMS4yNi0xLjI4VjcuMjhjMC0uNy0uNTUtMS4yOC0xLjI2LTEuMjh6TTcuNSAxNC42MmMtMS4xNyAwLTIuMTMtLjk1LTIuMTMtMi4xMiAwLTEuMTcuOTYtMi4xMyAyLjEzLTIuMTMgMS4xOCAwIDIuMTIuOTYgMi4xMiAyLjEzcy0uOTUgMi4xMi0yLjEyIDIuMTJ6bTkgMGMtMS4xNyAwLTIuMTMtLjk1LTIuMTMtMi4xMiAwLTEuMTcuOTYtMi4xMyAyLjEzLTIuMTNzMi4xMi45NiAyLjEyIDIuMTMtLjk1IDIuMTItMi4xMiAyLjEyeiIvPgogICAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgwVjB6Ii8+Cjwvc3ZnPgo=) no-repeat left center}
--- a/assets/js/player.js
+++ b/assets/js/player.js
@ -148,6 +148,12 @@ player.on('error', function (event) {
    }
 });

+// Enable VR video support
+if (video_data.vr && video_data.params.vr_mode) {
+    player.crossOrigin("anonymous")
+    player.vr({projection: "EAC"});
+}
+
 // Add markers
 if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
    var markers = [{ time: video_data.params.video_start, text: 'Start' }];
--- a/assets/js/videojs-vr.js
+++ b/assets/js/videojs-vr.js
--- a/locales/ar.json
+++ b/locales/ar.json
@ -78,6 +78,7 @@
    "Show related videos: ": "اعرض الفيديوهات ذات الصلة: ",
    "Show annotations by default: ": "اعرض الملاحظات في الفيديو تلقائيا: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "التفضيلات المرئية",
    "Player style: ": "شكل مشغل الفيديوهات: ",
    "Dark mode: ": "الوضع الليلى: ",
--- a/locales/bn_BD.json
+++ b/locales/bn_BD.json
@ -72,6 +72,7 @@
    "Show related videos: ": "",
    "Show annotations by default: ": "",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "",
    "Player style: ": "",
    "Dark mode: ": "",
--- a/locales/cs.json
+++ b/locales/cs.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Zobrazit podobné videa: ",
    "Show annotations by default: ": "Zobrazovat poznámky ve výchozím nastavení: ",
    "Automatically extend video description: ": "Rozšířit automaticky popis u videa: ",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Nastavení vzhledu",
    "Player style: ": "Styl přehrávače ",
    "Dark mode: ": "Tmavý režim ",
--- a/locales/da.json
+++ b/locales/da.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Vis relaterede videoer: ",
    "Show annotations by default: ": "Vis annotationer som standard: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Visuelle præferencer",
    "Player style: ": "Afspiller stil: ",
    "Dark mode: ": "Mørk tilstand: ",
--- a/locales/de.json
+++ b/locales/de.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Ähnliche Videos anzeigen? ",
    "Show annotations by default: ": "Standardmäßig Anmerkungen anzeigen? ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Anzeigeeinstellungen",
    "Player style: ": "Abspielgeräterstil: ",
    "Dark mode: ": "Nachtmodus: ",
--- a/locales/el.json
+++ b/locales/el.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Προβολή σχετικών βίντεο; ",
    "Show annotations by default: ": "Αυτόματη προβολή σημειώσεων: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Προτιμήσεις εμφάνισης",
    "Player style: ": "Τεχνοτροπία της συσκευής αναπαραγωγης: ",
    "Dark mode: ": "Σκοτεινή λειτουργία: ",
--- a/locales/en-US.json
+++ b/locales/en-US.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Show related videos: ",
    "Show annotations by default: ": "Show annotations by default: ",
    "Automatically extend video description: ": "Automatically extend video description: ",
+    "Interactive 360 degree videos: ": "Interactive 360 degree videos: ",
    "Visual preferences": "Visual preferences",
    "Player style: ": "Player style: ",
    "Dark mode: ": "Dark mode: ",
--- a/locales/eo.json
+++ b/locales/eo.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Ĉu montri rilatajn filmetojn? ",
    "Show annotations by default: ": "Ĉu montri prinotojn defaŭlte? ",
    "Automatically extend video description: ": "Aŭtomate etendi priskribon de filmeto: ",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Vidaj preferoj",
    "Player style: ": "Ludila stilo: ",
    "Dark mode: ": "Malhela reĝimo: ",
--- a/locales/es.json
+++ b/locales/es.json
@ -78,6 +78,7 @@
    "Show related videos: ": "¿Mostrar vídeos relacionados? ",
    "Show annotations by default: ": "¿Mostrar anotaciones por defecto? ",
    "Automatically extend video description: ": "Extender automáticamente la descripción del vídeo: ",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Preferencias visuales",
    "Player style: ": "Estilo de reproductor: ",
    "Dark mode: ": "Modo oscuro: ",
--- a/locales/eu.json
+++ b/locales/eu.json
@ -69,6 +69,7 @@
    "Show related videos: ": "Erakutsi erlazionatutako bideoak: ",
    "Show annotations by default: ": "Erakutsi oharrak modu lehenetsian: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Hobespen bisualak",
    "Player style: ": "Erreproduzigailu mota: ",
    "Dark mode: ": "Gai iluna: ",
--- a/locales/fa.json
+++ b/locales/fa.json
@ -78,6 +78,7 @@
    "Show related videos: ": "نمایش ویدیو های مرتبط: ",
    "Show annotations by default: ": "نمایش حاشیه نویسی ها به طور پیشفرض: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "ترجیحات بصری",
    "Player style: ": "حالت پخش کننده: ",
    "Dark mode: ": "حالت تاریک: ",
--- a/locales/fi.json
+++ b/locales/fi.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Näytä aiheeseen liittyviä videoita: ",
    "Show annotations by default: ": "Näytä huomautukset oletuksena: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Visuaaliset asetukset",
    "Player style: ": "Soittimen tyyli: ",
    "Dark mode: ": "Tumma tila: ",
--- a/locales/fr.json
+++ b/locales/fr.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Voir les vidéos liées : ",
    "Show annotations by default: ": "Afficher les annotations par défaut : ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Préférences du site",
    "Player style: ": "Style du lecteur : ",
    "Dark mode: ": "Mode sombre : ",
--- a/locales/he.json
+++ b/locales/he.json
@ -78,6 +78,7 @@
    "Show related videos: ": "הצגת סרטונים קשורים: ",
    "Show annotations by default: ": "הצגת הערות כברירת מחדל: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "העדפות חזותיות",
    "Player style: ": "סגנון הנגן: ",
    "Dark mode: ": "מצב כהה: ",
--- a/locales/hr.json
+++ b/locales/hr.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Prikaži povezana videa: ",
    "Show annotations by default: ": "Standardno prikaži napomene: ",
    "Automatically extend video description: ": "Automatski proširi opis videa: ",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Postavke prikaza",
    "Player style: ": "Stil playera: ",
    "Dark mode: ": "Tamni modus: ",
--- a/locales/hu-HU.json
+++ b/locales/hu-HU.json
@ -69,6 +69,7 @@
    "Show related videos: ": "Kapcsolódó videók mutatása: ",
    "Show annotations by default: ": "Annotációk mutatása alapértelmetésben: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Vizuális preferenciák",
    "Player style: ": "Lejátszó stílusa: ",
    "Dark mode: ": "Sötét mód: ",
--- a/locales/id.json
+++ b/locales/id.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Tampilkan video terkait: ",
    "Show annotations by default: ": "Tampilkan anotasi secara default: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Preferensi visual",
    "Player style: ": "Gaya pemutar: ",
    "Dark mode: ": "Mode gelap: ",
--- a/locales/is.json
+++ b/locales/is.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Sýna tengd myndbönd? ",
    "Show annotations by default: ": "Á að sýna glósur sjálfgefið? ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Sjónrænar stillingar",
    "Player style: ": "Spilara stíl: ",
    "Dark mode: ": "Myrkur ham: ",
--- a/locales/it.json
+++ b/locales/it.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Mostra video correlati: ",
    "Show annotations by default: ": "Mostra le annotazioni in modo predefinito: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Preferenze grafiche",
    "Player style: ": "Stile riproduttore: ",
    "Dark mode: ": "Tema scuro: ",
--- a/locales/ja.json
+++ b/locales/ja.json
@ -78,6 +78,7 @@
    "Show related videos: ": "関連動画を表示: ",
    "Show annotations by default: ": "デフォルトでアノテーションを表示: ",
    "Automatically extend video description: ": "動画の説明文を自動的に拡張: ",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "外観設定",
    "Player style: ": "プレイヤースタイル: ",
    "Dark mode: ": "ダークモード: ",
--- a/locales/nb-NO.json
+++ b/locales/nb-NO.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Vis relaterte videoer? ",
    "Show annotations by default: ": "Vis merknader som forvalg? ",
    "Automatically extend video description: ": "Utvid videobeskrivelse automatisk: ",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Visuelle innstillinger",
    "Player style: ": "Avspillerstil: ",
    "Dark mode: ": "Mørk drakt: ",
--- a/locales/nl.json
+++ b/locales/nl.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Gerelateerde video's tonen? ",
    "Show annotations by default: ": "Standaard annotaties tonen? ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Visuele instellingen",
    "Player style: ": "Speler vormgeving ",
    "Dark mode: ": "Donkere modus: ",
--- a/locales/pl.json
+++ b/locales/pl.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Pokaż powiązane filmy? ",
    "Show annotations by default: ": "Domyślnie pokazuj adnotacje: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Preferencje Wizualne",
    "Player style: ": "Styl odtwarzacza: ",
    "Dark mode: ": "Ciemny motyw: ",
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Mostrar vídeos relacionados: ",
    "Show annotations by default: ": "Sempre mostrar anotações: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Preferências visuais",
    "Player style: ": "Estilo do tocador: ",
    "Dark mode: ": "Modo escuro: ",
--- a/locales/pt-PT.json
+++ b/locales/pt-PT.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Mostrar vídeos relacionados: ",
    "Show annotations by default: ": "Mostrar sempre anotações: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Preferências visuais",
    "Player style: ": "Estilo do reprodutor: ",
    "Dark mode: ": "Modo escuro: ",
--- a/locales/ro.json
+++ b/locales/ro.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Afișați videoclipurile asemănătoare: ",
    "Show annotations by default: ": "Afișați adnotările în mod implicit: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Preferințele site-ului",
    "Player style: ": "Stilul player-ului : ",
    "Dark mode: ": "Modul întunecat : ",
--- a/locales/ru.json
+++ b/locales/ru.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Показывать похожие видео? ",
    "Show annotations by default: ": "Всегда показывать аннотации? ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Настройки сайта",
    "Player style: ": "Стиль проигрывателя: ",
    "Dark mode: ": "Тёмное оформление: ",
--- a/locales/si.json
+++ b/locales/si.json
@ -78,6 +78,7 @@
    "Show related videos: ": "",
    "Show annotations by default: ": "",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "",
    "Player style: ": "",
    "Dark mode: ": "",
--- a/locales/sk.json
+++ b/locales/sk.json
@ -72,6 +72,7 @@
    "Show related videos: ": "Zobraziť súvisiace videá: ",
    "Show annotations by default: ": "Predvolene zobraziť anotácie: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Vizuálne nastavenia",
    "Player style: ": "Štýl prehrávača: ",
    "Dark mode: ": "Tmavý režim: ",
--- a/locales/sr.json
+++ b/locales/sr.json
@ -78,6 +78,7 @@
    "Show related videos: ": "",
    "Show annotations by default: ": "",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "",
    "Player style: ": "",
    "Dark mode: ": "",
--- a/locales/sr_Cyrl.json
+++ b/locales/sr_Cyrl.json
@ -69,6 +69,7 @@
    "Show related videos: ": "Прикажи сличне видее: ",
    "Show annotations by default: ": "Увек приказуј анотације: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Подешавања изгледа",
    "Player style: ": "Стил плејера: ",
    "Dark mode: ": "Тамни режим: ",
--- a/locales/sv-SE.json
+++ b/locales/sv-SE.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Visa relaterade videor? ",
    "Show annotations by default: ": "Visa länkar-i-videon som förval? ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Visuella inställningar",
    "Player style: ": "Spelarstil: ",
    "Dark mode: ": "Mörkt läge: ",
--- a/locales/tr.json
+++ b/locales/tr.json
@ -78,6 +78,7 @@
    "Show related videos: ": "İlgili videoları göster: ",
    "Show annotations by default: ": "Öntanımlı olarak ek açıklamaları göster: ",
    "Automatically extend video description: ": "Video açıklamasını otomatik olarak genişlet: ",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Görsel tercihler",
    "Player style: ": "Oynatıcı biçimi: ",
    "Dark mode: ": "Karanlık mod: ",
--- a/locales/uk.json
+++ b/locales/uk.json
@ -78,6 +78,7 @@
    "Show related videos: ": "Показувати схожі відео? ",
    "Show annotations by default: ": "Завжди показувати анотації? ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "Налаштування сайту",
    "Player style: ": "Стиль програвача: ",
    "Dark mode: ": "Темне оформлення: ",
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@ -78,6 +78,7 @@
    "Show related videos: ": "是否显示相关视频: ",
    "Show annotations by default: ": "是否默认显示视频注释: ",
    "Automatically extend video description: ": "",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "视觉选项",
    "Player style: ": "播放器样式: ",
    "Dark mode: ": "深色模式: ",
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@ -78,6 +78,7 @@
    "Show related videos: ": "顯示相關的影片： ",
    "Show annotations by default: ": "預設顯示註釋： ",
    "Automatically extend video description: ": "自動展開影片描述： ",
+    "Interactive 360 degree videos: ": "",
    "Visual preferences": "視覺偏好設定",
    "Player style: ": "播放器樣式： ",
    "Dark mode: ": "深色模式： ",
--- a/src/invidious/helpers/helpers.cr
+++ b/src/invidious/helpers/helpers.cr
@ -52,6 +52,7 @@ struct ConfigPreferences
  property video_loop : Bool = false
  property extend_desc : Bool = false
  property volume : Int32 = 100
+  property vr_mode : Bool = true

  def to_tuple
    {% begin %}
--- a/src/invidious/routes/preferences.cr
+++ b/src/invidious/routes/preferences.cr
@ -60,6 +60,10 @@ class Invidious::Routes::PreferencesRoute < Invidious::Routes::BaseRoute
    volume = env.params.body["volume"]?.try &.as(String).to_i?
    volume ||= CONFIG.default_user_preferences.volume

+    vr_mode = env.params.body["vr_mode"]?.try &.as(String)
+    vr_mode ||= "off"
+    vr_mode = vr_mode == "on"
+
    comments = [] of String
    2.times do |i|
      comments << (env.params.body["comments[#{i}]"]?.try &.as(String) || CONFIG.default_user_preferences.comments[i])
@ -140,6 +144,7 @@ class Invidious::Routes::PreferencesRoute < Invidious::Routes::BaseRoute
      unseen_only:            unseen_only,
      video_loop:             video_loop,
      volume:                 volume,
+      vr_mode:                vr_mode,
    }.to_json).to_json

    if user = env.get? "user"
--- a/src/invidious/users.cr
+++ b/src/invidious/users.cr
@ -53,6 +53,7 @@ struct Preferences
  property latest_only : Bool = CONFIG.default_user_preferences.latest_only
  property listen : Bool = CONFIG.default_user_preferences.listen
  property local : Bool = CONFIG.default_user_preferences.local
+  property vr_mode : Bool = CONFIG.default_user_preferences.vr_mode

  @[JSON::Field(converter: Preferences::ProcessString)]
  property locale : String = CONFIG.default_user_preferences.locale
--- a/src/invidious/videos.cr
+++ b/src/invidious/videos.cr
@ -245,6 +245,7 @@ struct VideoPreferences
  property extend_desc : Bool
  property video_start : Float64 | Int32
  property volume : Int32
+  property vr_mode : Bool
 end

 struct Video
@ -760,6 +761,10 @@ struct Video
    info["microformat"]?.try &.["playerMicroformatRenderer"]["isFamilySafe"]?.try &.as_bool || false
  end

+  def is_vr : Bool
+    info["streamingData"]?.try &.["adaptiveFormats"].as_a[0]?.try &.["projectionType"].as_s == "MESH" ? true : false || false
+  end
+
  def wilson_score : Float64
    ci_lower_bound(likes, likes + dislikes).round(4)
  end
@ -1053,6 +1058,7 @@ def process_video_params(query, preferences)
  video_loop = query["loop"]?.try { |q| (q == "true" || q == "1").to_unsafe }
  extend_desc = query["extend_desc"]?.try { |q| (q == "true" || q == "1").to_unsafe }
  volume = query["volume"]?.try &.to_i?
+  vr_mode = query["vr_mode"]?.try { |q| (q == "true" || q == "1").to_unsafe }

  if preferences
    # region ||= preferences.region
@ -1072,6 +1078,7 @@ def process_video_params(query, preferences)
    video_loop ||= preferences.video_loop.to_unsafe
    extend_desc ||= preferences.extend_desc.to_unsafe
    volume ||= preferences.volume
+    vr_mode ||= preferences.vr_mode.to_unsafe
  end

  annotations ||= CONFIG.default_user_preferences.annotations.to_unsafe
@ -1090,6 +1097,7 @@ def process_video_params(query, preferences)
  video_loop ||= CONFIG.default_user_preferences.video_loop.to_unsafe
  extend_desc ||= CONFIG.default_user_preferences.extend_desc.to_unsafe
  volume ||= CONFIG.default_user_preferences.volume
+  vr_mode ||= CONFIG.default_user_preferences.vr_mode.to_unsafe

  annotations = annotations == 1
  autoplay = autoplay == 1
@ -1100,6 +1108,7 @@ def process_video_params(query, preferences)
  related_videos = related_videos == 1
  video_loop = video_loop == 1
  extend_desc = extend_desc == 1
+  vr_mode = vr_mode == 1

  if CONFIG.disabled?("dash") && quality == "dash"
    quality = "high"
@ -1149,6 +1158,7 @@ def process_video_params(query, preferences)
    extend_desc:        extend_desc,
    video_start:        video_start,
    volume:             volume,
+    vr_mode:            vr_mode,
  })

  return params
--- a/src/invidious/views/components/player_sources.ecr
+++ b/src/invidious/views/components/player_sources.ecr
@ -5,6 +5,7 @@
 <link rel="stylesheet" href="/css/videojs-vtt-thumbnails.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/css/videojs-mobile-ui.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/css/player.css?v=<%= ASSET_COMMIT %>">
+
 <script src="/js/video.min.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/videojs-mobile-ui.min.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/videojs-contrib-quality-levels.min.js?v=<%= ASSET_COMMIT %>"></script>
@ -13,6 +14,7 @@
 <script src="/js/videojs-share.min.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/videojs-vtt-thumbnails.min.js?v=<%= ASSET_COMMIT %>"></script>

+
 <% if params.annotations %>
    <link rel="stylesheet" href="/css/videojs-youtube-annotations.min.css?v=<%= ASSET_COMMIT %>">
    <script src="/js/videojs-youtube-annotations.min.js?v=<%= ASSET_COMMIT %>"></script>
@ -22,3 +24,8 @@
    <link rel="stylesheet" href="/css/quality-selector.css?v=<%= ASSET_COMMIT %>">
    <script src="/js/silvermine-videojs-quality-selector.min.js?v=<%= ASSET_COMMIT %>"></script>
 <% end %>
+
+<% if params.vr_mode %>
+    <link rel="stylesheet" href="/css/videojs-vr.css?v=<%= ASSET_COMMIT %>">
+    <script src="/js/videojs-vr.js?v=<%= ASSET_COMMIT %>"></script>
+<% end %>
--- a/src/invidious/views/licenses.ecr
+++ b/src/invidious/views/licenses.ecr
@ -233,6 +233,20 @@
            </td>
        </tr>

+        <tr>
+            <td>
+                <a href="/js/videojs-vr.js?v=<%= ASSET_COMMIT %>">videojs-vr.js</a>
+            </td>
+
+            <td>
+                <a href="https://choosealicense.com/licenses/mit">MIT</a>
+            </td>
+
+            <td>
+                <a href="https://github.com/videojs/videojs-vr"><%= translate(locale, "source") %></a>
+            </td>
+        </tr>
+
        <tr>
            <td>
                <a href="/js/video.min.js?v=<%= ASSET_COMMIT %>">video.min.js</a>
--- a/src/invidious/views/preferences.ecr
+++ b/src/invidious/views/preferences.ecr
@ -111,6 +111,10 @@
                <input name="extend_desc" id="extend_desc" type="checkbox" <% if preferences.extend_desc %>checked<% end %>>
            </div>

+            <div class="pure-control-group">
+                <label for="vr_mode"><%= translate(locale, "Interactive 360 degree videos") %></label>
+                <input name="vr_mode" id="vr_mode" type="checkbox" <% if preferences.vr_mode %>checked<% end %>>
+            </div>

            <legend><%= translate(locale, "Visual preferences") %></legend>

--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@ -57,7 +57,8 @@ we're going to need to do it here in order to allow for translations.
    "show_replies_text" => HTML.escape(translate(locale, "Show replies")),
    "params" => params,
    "preferences" => preferences,
-    "premiere_timestamp" => video.premiere_timestamp.try &.to_unix
+    "premiere_timestamp" => video.premiere_timestamp.try &.to_unix,
+    "vr" => video.is_vr
 }.to_pretty_json
 %>
 </script>
				`@ -0,0 +1 @@`
				.video-js .vjs-big-vr-play-button{width:100px;height:100px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cpath fill='%23FFF' d='M334.883 275.78l-6.374-36.198-6.375-36.2-28.16 23.62-28.164 23.62 25.837 9.41C266.247 296.544 224 320.5 176.25 320.5c-77.47 0-140.5-63.03-140.5-140.5 0-77.472 63.03-140.5 140.5-140.5 53.428 0 99.98 29.978 123.733 73.993l13.304-6.923C287.025 57.76 235.45 24.5 176.25 24.5c-85.743 0-155.5 69.757-155.5 155.5 0 85.742 69.757 155.5 155.5 155.5 54.253 0 102.09-27.94 129.922-70.177l28.71 10.457z'/%3E%3Cpath fill='%23FFF' d='M314.492 175.167c-12.98 0-23.54-10.56-23.54-23.54s10.56-23.54 23.54-23.54c12.98 0 23.54 10.56 23.54 23.54s-10.56 23.54-23.54 23.54zm0-38.08c-8.018 0-14.54 6.522-14.54 14.54s6.522 14.54 14.54 14.54c8.017 0 14.54-6.522 14.54-14.54s-6.523-14.54-14.54-14.54z'/%3E%3Cg fill='%23FFF'%3E%3Cpath d='M88.76 173.102h9.395c4.74-.042 8.495-1.27 11.268-3.682 2.77-2.412 4.157-5.903 4.157-10.474 0-4.4-1.153-7.817-3.46-10.25-2.307-2.434-5.83-3.65-10.568-3.65-4.147 0-7.554 1.195-10.22 3.585-2.666 2.392-4 5.514-4 9.364H69.908c0-4.74 1.26-9.055 3.776-12.95 2.518-3.892 6.03-6.928 10.537-9.108 4.508-2.18 9.554-3.27 15.14-3.27 9.225 0 16.472 2.318 21.74 6.952 5.27 4.634 7.903 11.077 7.903 19.33 0 4.147-1.323 8.05-3.967 11.71-2.646 3.66-6.062 6.422-10.252 8.284 5.078 1.736 8.94 4.465 11.584 8.19s3.968 8.166 3.968 13.33c0 8.294-2.847 14.895-8.538 19.804s-13.17 7.363-22.438 7.363c-8.887 0-16.166-2.37-21.836-7.11-5.67-4.74-8.506-11.045-8.506-18.916h15.425c0 4.062 1.365 7.363 4.094 9.902 2.73 2.54 6.4 3.81 11.014 3.81 4.782 0 8.55-1.27 11.3-3.81s4.126-6.22 4.126-11.045c0-4.865-1.44-8.61-4.316-11.235-2.878-2.623-7.152-3.936-12.822-3.936H88.76V173.1zM187.598 133.493v12.76h-1.904c-8.633.126-15.53 2.497-20.693 7.108-5.162 4.614-8.23 11.152-9.203 19.615 4.95-5.205 11.277-7.808 18.98-7.808 8.166 0 14.608 2.878 19.328 8.633 4.718 5.755 7.077 13.182 7.077 22.28 0 9.395-2.76 17.002-8.284 22.82-5.52 5.818-12.77 8.73-21.74 8.73-9.226 0-16.705-3.407-22.44-10.222-5.733-6.812-8.6-15.742-8.6-26.787v-5.267c0-16.208 3.945-28.903 11.84-38.086 7.89-9.182 19.242-13.774 34.054-13.774h1.586zM171.03 177.61c-3.386 0-6.485.95-9.3 2.855-2.814 1.904-4.877 4.443-6.188 7.617v4.697c0 6.854 1.438 12.304 4.316 16.345 2.877 4.04 6.602 6.062 11.172 6.062s8.188-1.715 10.854-5.143 4-7.934 4-13.52-1.355-10.135-4.063-13.648c-2.708-3.51-6.304-5.267-10.79-5.267zM271.136 187.447c0 13.29-2.486 23.307-7.46 30.057s-12.535 10.125-22.69 10.125c-9.988 0-17.51-3.292-22.566-9.872-5.058-6.58-7.65-16.323-7.776-29.23V172.53c0-13.287 2.485-23.252 7.458-29.896 4.973-6.643 12.558-9.966 22.757-9.966 10.112 0 17.655 3.237 22.63 9.712 4.97 6.475 7.52 16.166 7.647 29.072v15.995zm-15.425-17.265c0-8.674-1.185-15.033-3.554-19.075-2.37-4.04-6.137-6.062-11.3-6.062-5.035 0-8.738 1.915-11.107 5.745-2.37 3.83-3.62 9.807-3.746 17.932v20.948c0 8.633 1.206 15.064 3.618 19.297s6.2 6.348 11.362 6.348c4.95 0 8.61-1.957 10.98-5.87 2.37-3.915 3.62-10.04 3.746-18.378v-20.885z'/%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-color:rgba(0,0,0,0.5)}.video-js .vjs-big-vr-play-button .vjs-icon-placeholder{display:none}:hover.video-js .vjs-big-vr-play-button{-webkit-transition:border-color 0.4s,outline 0.4s,background-color 0.4s;-moz-transition:border-color 0.4s,outline 0.4s,background-color 0.4s;-ms-transition:border-color 0.4s,outline 0.4s,background-color 0.4s;-o-transition:border-color 0.4s,outline 0.4s,background-color 0.4s;transition:border-color 0.4s,outline 0.4s,background-color 0.4s}.video-js .vjs-big-vr-play-button::before{content:''}.video-js canvas{cursor:move}.video-js .vjs-button-vr .vjs-icon-placeholder{height:30px;width:30px;display:inline-block;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0ZGRkZGRiI+CiAgICA8cGF0aCBkPSJNMjAuNzQgNkgzLjIxQzIuNTUgNiAyIDYuNTcgMiA3LjI4djEwLjQ0YzAgLjcuNTUgMS4yOCAxLjIzIDEuMjhoNC43OWMuNTIgMCAuOTYtLjMzIDEuMTQtLjc5bDEuNC0zLjQ4Yy4yMy0uNTkuNzktMS4wMSAxLjQ0LTEuMDFzMS4yMS40MiAxLjQ1IDEuMDFsMS4zOSAzLjQ4Yy4xOS40Ni42My43OSAxLjExLjc5aDQuNzljLjcxIDAgMS4yNi0uNTcgMS4yNi0xLjI4VjcuMjhjMC0uNy0uNTUtMS4yOC0xLjI2LTEuMjh6TTcuNSAxNC42MmMtMS4xNyAwLTIuMTMtLjk1LTIuMTMtMi4xMiAwLTEuMTcuOTYtMi4xMyAyLjEzLTIuMTMgMS4xOCAwIDIuMTIuOTYgMi4xMiAyLjEzcy0uOTUgMi4xMi0yLjEyIDIuMTJ6bTkgMGMtMS4xNyAwLTIuMTMtLjk1LTIuMTMtMi4xMiAwLTEuMTcuOTYtMi4xMyAyLjEzLTIuMTNzMi4xMi45NiAyLjEyIDIuMTMtLjk1IDIuMTItMi4xMiAyLjEyeiIvPgogICAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgwVjB6Ii8+Cjwvc3ZnPgo=) no-repeat left center}