Specify video height in html so page doesn't shift down after load

Use true video height extracted from youtube to handle videos
shorter than their quality size. (e.g. widescreen videos)

3 files changed, 19 insertions, 12 deletions

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 7fa4b53..fc4aaf9 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -54,7 +54,6 @@
             justify-self: center;
             max-width: 100%;
             width: {{ theater_video_target_width }}px;
-            max-height: {{ video_height }}px;
             margin-bottom: 10px;
             background-color: var(--video-background-color);
         }
@@ -339,7 +338,7 @@ Reload without invidious (for usage of new identity button).</a>
             </ol>
         </div>
     {% else %}
-        <video controls autofocus class="video">
+        <video controls autofocus class="video" height="{{ video_height }}px">
             {% for video_source in video_sources %}
                 <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}">
             {% endfor %}
diff --git a/youtube/watch.py b/youtube/watch.py
index cedf632..a4612a5 100644
--- a/youtube/watch.py
+++ b/youtube/watch.py
@@ -28,20 +28,21 @@ def get_video_sources(info):
         max_resolution = 360
     else:
         max_resolution = settings.default_resolution
-    for format in info['formats']:
-        if not all(format[attr] for attr in ('height', 'width', 'ext', 'url')):
+    for fmt in info['formats']:
+        if not all(fmt[attr] for attr in ('quality', 'width', 'ext', 'url')):
             continue
-        if format['acodec'] and format['vcodec'] and format['height'] <= max_resolution:
+        if fmt['acodec'] and fmt['vcodec'] and fmt['height'] <= max_resolution:
             video_sources.append({
-                'src': format['url'],
-                'type': 'video/' + format['ext'],
-                'height': format['height'],
-                'width': format['width'],
+                'src': fmt['url'],
+                'type': 'video/' + fmt['ext'],
+                'quality': fmt['quality'],
+                'height': fmt['height'],
+                'width': fmt['width'],
             })
 
     #### order the videos sources so the preferred resolution is first ###
 
-    video_sources.sort(key=lambda source: source['height'], reverse=True)
+    video_sources.sort(key=lambda source: source['quality'], reverse=True)
 
     return video_sources
 
diff --git a/youtube/yt_data_extract/watch_extraction.py b/youtube/yt_data_extract/watch_extraction.py
index ca2da10..340a367 100644
--- a/youtube/yt_data_extract/watch_extraction.py
+++ b/youtube/yt_data_extract/watch_extraction.py
@@ -348,12 +348,14 @@ def _extract_formats(info, player_response):
         streaming_data.get('dash_manifest_url'))
 
     for yt_fmt in yt_formats:
+        itag = yt_fmt.get('itag')
+
         fmt = {}
+        fmt['itag'] = itag
         fmt['ext'] = None
         fmt['audio_bitrate'] = None
         fmt['acodec'] = None
         fmt['vcodec'] = None
-        fmt['itag'] = yt_fmt.get('itag')
         fmt['width'] = yt_fmt.get('width')
         fmt['height'] = yt_fmt.get('height')
         fmt['file_size'] = yt_fmt.get('contentLength')
@@ -368,7 +370,12 @@ def _extract_formats(info, player_response):
             fmt['url'] = yt_fmt.get('url')
         fmt['s'] = cipher.get('s')
         fmt['sp'] = cipher.get('sp')
-        fmt.update(_formats.get(str(yt_fmt.get('itag')), {}))
+
+        # update with information from big table
+        hardcoded_itag_info = _formats.get(str(itag), {})
+        for key, value in hardcoded_itag_info.items():
+            conservative_update(fmt, key, value) # prefer info from Youtube
+        fmt['quality'] = hardcoded_itag_info.get('height')
 
         info['formats'].append(fmt)