Allow configurable support of interactive 360 vid

assets/js/player.js

@@ -149,7 +149,7 @@ player.on('error', function (event) {
 });
 
 // Enable VR video support
-if (video_data.vr) {
+if (video_data.vr && video_data.params.vr_mode) {
     player.crossOrigin("anonymous")
     player.vr({projection: "EAC"});
 }

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
@@ -1057,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
@@ -1076,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
@@ -1094,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
@@ -1104,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"
@@ -1153,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

@@ -4,7 +4,6 @@
 <link rel="stylesheet" href="/css/videojs-share.css?v=<%= ASSET_COMMIT %>">
 <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/videojs-vr.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/css/player.css?v=<%= ASSET_COMMIT %>">
 
 <script src="/js/video.min.js?v=<%= ASSET_COMMIT %>"></script>
@@ -14,7 +13,6 @@
 <script src="/js/videojs-markers.min.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/videojs-share.min.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/videojs-vtt-thumbnails.min.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/js/videojs-vr.min.js?v=<%= ASSET_COMMIT %>"></script>
 
 
 <% if params.annotations %>
@@ -26,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.min.js?v=<%= ASSET_COMMIT %>"></script>
+<% end %>

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>