[mod] result_templates/videos.html: replace embedded HTML by data_src

Embedded HTML breaks SearXNG architecture.  To modularize, HTML is generated in
the templates (oscar & simple) and result parameter 'embedded' is replaced by
'data_src', an URL for embedded content (<iframe>).

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

10 files changed, 23 insertions, 66 deletions

diff --git a/searx/engines/dailymotion.py b/searx/engines/dailymotion.py
index 5607691a4..1a080feda 100644
--- a/searx/engines/dailymotion.py
+++ b/searx/engines/dailymotion.py
@@ -25,11 +25,6 @@ paging = True
 # search-url
 # see http://www.dailymotion.com/doc/api/obj-video.html
 search_url = 'https://api.dailymotion.com/videos?fields=created_time,title,description,duration,url,thumbnail_360_url,id&sort=relevance&limit=5&page={pageno}&{query}'  # noqa
-embedded_url = (
-    '<iframe frameborder="0" width="540" height="304" '
-    + 'data-src="https://www.dailymotion.com/embed/video/{videoid}" allowfullscreen></iframe>'
-)
-
 supported_languages_url = 'https://api.dailymotion.com/languages'
 
 
@@ -64,7 +59,6 @@ def response(resp):
         content = html_to_text(res['description'])
         thumbnail = res['thumbnail_360_url']
         publishedDate = datetime.fromtimestamp(res['created_time'], None)
-        embedded = embedded_url.format(videoid=res['id'])
 
         # http to https
         thumbnail = thumbnail.replace("http://", "https://")
@@ -76,7 +70,7 @@ def response(resp):
                 'title': title,
                 'content': content,
                 'publishedDate': publishedDate,
-                'embedded': embedded,
+                'data_src': "https://www.dailymotion.com/embed/video/" + res['id'],
                 'thumbnail': thumbnail,
             }
         )
diff --git a/searx/engines/invidious.py b/searx/engines/invidious.py
index badef57fd..f9944f6b3 100644
--- a/searx/engines/invidious.py
+++ b/searx/engines/invidious.py
@@ -58,14 +58,6 @@ def response(resp):
     results = []
 
     search_results = resp.json()
-    embedded_url = (
-        '<iframe width="540" height="304" '
-        + 'data-src="'
-        + resp.search_params['base_url']
-        + '/embed/{videoid}" '
-        + 'frameborder="0" allowfullscreen></iframe>'
-    )
-
     base_invidious_url = resp.search_params['base_url'] + "/watch?v="
 
     for result in search_results:
@@ -76,7 +68,6 @@ def response(resp):
                 continue
 
             url = base_invidious_url + videoid
-            embedded = embedded_url.format(videoid=videoid)
             thumbs = result.get("videoThumbnails", [])
             thumb = next((th for th in thumbs if th["quality"] == "sddefault"), None)
             if thumb:
@@ -100,7 +91,7 @@ def response(resp):
                     "template": "videos.html",
                     "author": result.get("author"),
                     "publishedDate": publishedDate,
-                    "embedded": embedded,
+                    "data_src": resp.search_params['base_url'] + '/embed/' + videoid,
                     "thumbnail": thumbnail,
                 }
             )
diff --git a/searx/engines/peertube.py b/searx/engines/peertube.py
index 1ace14027..343c2a02c 100644
--- a/searx/engines/peertube.py
+++ b/searx/engines/peertube.py
@@ -51,12 +51,6 @@ def response(resp):
 
     search_res = loads(resp.text)
 
-    embedded_url = (
-        '<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" '
-        + 'src="'
-        + sanitized_url
-        + '{embed_path}" frameborder="0" allowfullscreen></iframe>'
-    )
     # return empty array if there are no results
     if "data" not in search_res:
         return []
@@ -72,7 +66,6 @@ def response(resp):
             content = ""
         thumbnail = sanitized_url + res["thumbnailPath"]
         publishedDate = datetime.strptime(res["publishedAt"], "%Y-%m-%dT%H:%M:%S.%fZ")
-        embedded = embedded_url.format(embed_path=res["embedPath"])
 
         results.append(
             {
@@ -81,7 +74,7 @@ def response(resp):
                 "title": title,
                 "content": content,
                 "publishedDate": publishedDate,
-                "embedded": embedded,
+                "data_src": sanitized_url + res["embedPath"],
                 "thumbnail": thumbnail,
             }
         )
diff --git a/searx/engines/sepiasearch.py b/searx/engines/sepiasearch.py
index 00b1b3672..291277b1f 100644
--- a/searx/engines/sepiasearch.py
+++ b/searx/engines/sepiasearch.py
@@ -41,9 +41,6 @@ time_range_table = {
 }
 
 
-embedded_url = '<iframe width="540" height="304" src="{url}" frameborder="0" allowfullscreen></iframe>'
-
-
 def minute_to_hm(minute):
     if isinstance(minute, int):
         return "%d:%02d" % (divmod(minute, 60))
@@ -88,7 +85,6 @@ def response(resp):
         content = result['description']
         thumbnail = result['thumbnailUrl']
         publishedDate = parser.parse(result['publishedAt'])
-        embedded = embedded_url.format(url=result.get('embedUrl'))
         author = result.get('account', {}).get('displayName')
         length = minute_to_hm(result.get('duration'))
         url = result['url']
@@ -102,7 +98,7 @@ def response(resp):
                 'length': length,
                 'template': 'videos.html',
                 'publishedDate': publishedDate,
-                'embedded': embedded,
+                'data_src': result.get('embedUrl'),
                 'thumbnail': thumbnail,
             }
         )
diff --git a/searx/engines/vimeo.py b/searx/engines/vimeo.py
index 52d201eac..42cc4eecc 100644
--- a/searx/engines/vimeo.py
+++ b/searx/engines/vimeo.py
@@ -25,12 +25,6 @@ paging = True
 base_url = 'https://vimeo.com/'
 search_url = base_url + '/search/page:{pageno}?{query}'
 
-embedded_url = (
-    '<iframe data-src="https://player.vimeo.com/video/{videoid}" '
-    + 'width="540" height="304" frameborder="0" '
-    + 'webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
-)
-
 
 # do search-request
 def request(query, params):
@@ -54,7 +48,6 @@ def response(resp):
         title = result['name']
         thumbnail = result['pictures']['sizes'][-1]['link']
         publishedDate = parser.parse(result['created_time'])
-        embedded = embedded_url.format(videoid=videoid)
 
         # append result
         results.append(
@@ -64,7 +57,7 @@ def response(resp):
                 'content': '',
                 'template': 'videos.html',
                 'publishedDate': publishedDate,
-                'embedded': embedded,
+                'data_src': "https://player.vimeo.com/video/" + videoid,
                 'thumbnail': thumbnail,
             }
         )
diff --git a/searx/engines/youtube_api.py b/searx/engines/youtube_api.py
index 52db45960..6c46ca90c 100644
--- a/searx/engines/youtube_api.py
+++ b/searx/engines/youtube_api.py
@@ -26,13 +26,6 @@ api_key = None
 # search-url
 base_url = 'https://www.googleapis.com/youtube/v3/search'
 search_url = base_url + '?part=snippet&{query}&maxResults=20&key={api_key}'
-
-embedded_url = (
-    '<iframe width="540" height="304" '
-    + 'data-src="https://www.youtube-nocookie.com/embed/{videoid}" '
-    + 'frameborder="0" allowfullscreen></iframe>'
-)
-
 base_youtube_url = 'https://www.youtube.com/watch?v='
 
 
@@ -77,8 +70,6 @@ def response(resp):
 
         url = base_youtube_url + videoid
 
-        embedded = embedded_url.format(videoid=videoid)
-
         # append result
         results.append(
             {
@@ -87,7 +78,7 @@ def response(resp):
                 'content': content,
                 'template': 'videos.html',
                 'publishedDate': publishedDate,
-                'embedded': embedded,
+                'data_src': "https://www.youtube-nocookie.com/embed/" + videoid,
                 'thumbnail': thumbnail,
             }
         )
diff --git a/searx/engines/youtube_noapi.py b/searx/engines/youtube_noapi.py
index 239830cc7..dff8e0a52 100644
--- a/searx/engines/youtube_noapi.py
+++ b/searx/engines/youtube_noapi.py
@@ -32,12 +32,6 @@ time_range_url = '&sp=EgII{time_range}%253D%253D'
 next_page_url = 'https://www.youtube.com/youtubei/v1/search?key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8'
 time_range_dict = {'day': 'Ag', 'week': 'Aw', 'month': 'BA', 'year': 'BQ'}
 
-embedded_url = (
-    '<iframe width="540" height="304" '
-    + 'data-src="https://www.youtube-nocookie.com/embed/{videoid}" '
-    + 'frameborder="0" allowfullscreen></iframe>'
-)
-
 base_youtube_url = 'https://www.youtube.com/watch?v='
 
 
@@ -91,7 +85,7 @@ def parse_next_page_response(response_text):
                 'author': section['ownerText']['runs'][0]['text'],
                 'length': section['lengthText']['simpleText'],
                 'template': 'videos.html',
-                'embedded': embedded_url.format(videoid=section['videoId']),
+                'data_src': 'https://www.youtube-nocookie.com/embed/' + section['videoId'],
                 'thumbnail': section['thumbnail']['thumbnails'][-1]['url'],
             }
         )
@@ -150,7 +144,6 @@ def parse_first_page_response(response_text):
                 thumbnail = 'https://i.ytimg.com/vi/' + videoid + '/hqdefault.jpg'
                 title = get_text_from_json(video.get('title', {}))
                 content = get_text_from_json(video.get('descriptionSnippet', {}))
-                embedded = embedded_url.format(videoid=videoid)
                 author = get_text_from_json(video.get('ownerText', {}))
                 length = get_text_from_json(video.get('lengthText', {}))
 
@@ -163,7 +156,7 @@ def parse_first_page_response(response_text):
                         'author': author,
                         'length': length,
                         'template': 'videos.html',
-                        'embedded': embedded,
+                        'data_src': 'https://www.youtube-nocookie.com/embed/' + videoid,
                         'thumbnail': thumbnail,
                     }
                 )
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 59b74aabe..20662c1af 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -300,6 +300,12 @@ article[data-vim-selected].category-social {
   overflow: hidden;
 }
 
+.result-videos .embedded-video iframe {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 10px 0 0 0;
+}
+
 .engines {
   .ltr-float-right();
   color: var(--color-result-engines-font);
diff --git a/searx/templates/oscar/result_templates/videos.html b/searx/templates/oscar/result_templates/videos.html
index ad17ffe33..586dffc22 100644
--- a/searx/templates/oscar/result_templates/videos.html
+++ b/searx/templates/oscar/result_templates/videos.html
@@ -3,15 +3,15 @@
 {{- result_header(result, favicons, loop.index) -}}
 {{- result_sub_header(result, loop.index) -}}
 
-{%- if result.embedded -%}
+{%- if result.data_src -%}
     <small> &bull; <a class="text-info btn-collapse collapsed cursor-pointer media-loader disabled_if_nojs" data-toggle="collapse" data-target="#result-video-{{ index }}" data-btn-text-collapsed="{{ _('show video') }}" data-btn-text-not-collapsed="{{ _('hide video') }}" aria-labelledby="result-{{loop.index}}">{{ icon('film') }} {{ _('show video') }}</a></small>
 {%- endif -%}
 
-{%- if result.embedded -%}
-<div id="result-video-{{ index }}" class="collapse">
-   {{- result.embedded|safe -}}
+{% if result.data_src -%}
+<div id="result-video-{{ index }}" class="embedded-video collapse">
+  <iframe data-src="{{result.data_src}}" width="540" height="304" frameborder="0" allowfullscreen></iframe>
 </div>
-{%- endif -%}
+{%- endif %}
 
 <div class="container-fluid">{{- "" -}}
     <div class="row">{{- "" -}}
diff --git a/searx/templates/simple/result_templates/videos.html b/searx/templates/simple/result_templates/videos.html
index 1b2e1c84e..6da70a8a2 100644
--- a/searx/templates/simple/result_templates/videos.html
+++ b/searx/templates/simple/result_templates/videos.html
@@ -2,7 +2,7 @@
 
 {{ result_header(result, favicons, image_proxify) }}
 {{ result_sub_header(result) }}
-{% if result.embedded -%}
+{% if result.data_src -%}
 <p class="altlink"> &bull; <a class="btn-collapse collapsed media-loader disabled_if_nojs" data-target="#result-video-{{ index }}" data-btn-text-collapsed="{{ _('show video') }}" data-btn-text-not-collapsed="{{ _('hide video') }}">{{ icon('film-outline') }} {{ _('show video') }}</a></p>
 {%- endif %}
 {%- if result.content %}
@@ -16,9 +16,9 @@
 {% endif -%}
 </p>
 {{- result_sub_footer(result, proxify) -}}
-{% if result.embedded -%}
-<div id="result-video-{{ index }}" class="invisible">
-   {{- result.embedded|safe -}}
+{% if result.data_src -%}
+<div id="result-video-{{ index }}" class="embedded-video invisible">
+  <iframe data-src="{{result.data_src}}" frameborder="0" allowfullscreen></iframe>
 </div>
 {%- endif %}
 {{ result_footer(result) }}