Merge pull request #2010 from syeopite/360videosupport

Add experimental support for 360° videos

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}

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' }];

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: ": "الوضع الليلى: ",

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: ": "",

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 ",

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: ",

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: ",

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: ": "Σκοτεινή λειτουργία: ",

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: ",

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: ",

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: ",

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: ",

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: ": "حالت تاریک: ",

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: ",

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 : ",

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: ": "מצב כהה: ",

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: ",

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: ",

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: ",

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: ",

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: ",

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: ": "ダークモード: ",

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: ",

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: ",

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: ",

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: ",

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: ",

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 : ",

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: ": "Тёмное оформление: ",

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: ": "",

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: ",

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: ": "",

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: ": "Тамни режим: ",

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: ",

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: ",

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: ": "Темне оформлення: ",

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: ": "深色模式: ",

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: ": "深色模式： ",

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 %}

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"

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

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

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 %>

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>

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>
 

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>