Layout: Add theater mode

3 files changed, 36 insertions, 6 deletions

diff --git a/settings.py b/settings.py
index 4aedd19..9253d7c 100644
--- a/settings.py
+++ b/settings.py
@@ -66,6 +66,12 @@ For security reasons, enabling this is not recommended.''',
 1 to sort by newest''',
     }),
 
+    ('theater_mode', {
+        'type': bool,
+        'default': True,
+        'comment': '',
+    }),
+
     ('gather_googlevideo_domains', {
         'type': bool,
         'default': False,
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index ccb03e3..3421059 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -3,17 +3,39 @@
 {% import "common_elements.html" as common_elements %}
 {% import "comments.html" as comments %}
 {% block style %}
+    {% if theater_mode %}
+        video{
+            grid-column: 1 / span 5;
+            width: 100%;
+            max-height: 360px;
+        }
+        #related{
+            margin-top: 10px;
+            grid-row: 2 /span 3;
+            width: 400px;
+        }
+        .video-info{
+            margin-top: 10px;
+            width: 640px;
+        }
+    {% else %}
+        video{
+            height: 360px;
+            width: 640px;
+            grid-column: 2;
+        }
+        #related{
+            grid-row: 1 /span 4;
+        }
+    {% endif %}
+
     main{
         display:grid;
         grid-template-columns: 1fr 640px 40px 400px 1fr;
         grid-template-rows: auto auto auto auto;
         align-content: start;
     }
-        video{
-            height: 360px;
-            width: 640px;
-            grid-column: 2;
-        }
+
         .video-info{
             grid-column: 2;
             grid-row: 2;
@@ -99,7 +121,6 @@
             }
         #related{
             grid-column: 4;
-            grid-row: 1 /span 4;
             display: grid;
             grid-auto-rows: 94px;
             grid-row-gap: 10px;
@@ -116,6 +137,7 @@
             margin-top: 10px;
             grid-column: 2;
             grid-row: 3;
+            width: initial;
         }
         .comments-area{
             grid-row: 4;
diff --git a/youtube/watch.py b/youtube/watch.py
index 8a08832..d9b3cff 100644
--- a/youtube/watch.py
+++ b/youtube/watch.py
@@ -207,6 +207,8 @@ def get_watch_page():
         music_attributes        = get_ordered_music_list_attributes(info['music_list']),
         comments_info           = comments_info,
 
+        theater_mode            = settings.theater_mode,
+
         title       = info['title'],
         uploader    = info['uploader'],
         description = info['description'],