[mod] result_templates/default.html replace embedded HTML by data_src audio_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' (and 'audio_src'), an URL for embedded content (<iframe>).

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

10 files changed, 62 insertions, 53 deletions

diff --git a/searx/engines/bandcamp.py b/searx/engines/bandcamp.py
index ba951a393..bc3ecaf96 100644
--- a/searx/engines/bandcamp.py
+++ b/searx/engines/bandcamp.py
@@ -4,7 +4,7 @@ Bandcamp (Music)
 @website     https://bandcamp.com/
 @provide-api no
 @results     HTML
-@parse       url, title, content, publishedDate, embedded, thumbnail
+@parse       url, title, content, publishedDate, data_src, thumbnail
 """
 
 from urllib.parse import urlencode, urlparse, parse_qs
@@ -27,10 +27,7 @@ paging = True
 
 base_url = "https://bandcamp.com/"
 search_string = search_string = 'search?{query}&page={page}'
-embedded_url = '''<iframe width="100%" height="166"
-    scrolling="no" frameborder="no"
-    data-src="https://bandcamp.com/EmbeddedPlayer/{type}={result_id}/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/transparent=true/"
-></iframe>'''
+data_src = "https://bandcamp.com/EmbeddedPlayer/{type}={result_id}/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/transparent=true/"
 
 
 def request(query, params):
@@ -74,8 +71,9 @@ def response(resp):
         if thumbnail:
             new_result['thumbnail'] = thumbnail[0]
         if "album" in result.classes:
-            new_result["embedded"] = embedded_url.format(type='album', result_id=result_id)
+            new_result["data_src"] = data_src.format(type='album', result_id=result_id)
         elif "track" in result.classes:
-            new_result["embedded"] = embedded_url.format(type='track', result_id=result_id)
+            new_result["data_src"] = data_src.format(type='track', result_id=result_id)
+
         results.append(new_result)
     return results
diff --git a/searx/engines/deezer.py b/searx/engines/deezer.py
index 220ac599d..6e884b498 100644
--- a/searx/engines/deezer.py
+++ b/searx/engines/deezer.py
@@ -23,13 +23,7 @@ paging = True
 # search-url
 url = 'https://api.deezer.com/'
 search_url = url + 'search?{query}&index={offset}'
-
-embedded_url = (
-    '<iframe scrolling="no" frameborder="0" allowTransparency="true" '
-    + 'data-src="https://www.deezer.com/plugins/player?type=tracks&id={audioid}" '
-    + 'width="540" height="80"></iframe>'
-)
-
+data_src = "https://www.deezer.com/plugins/player?type=tracks&id={audioid}"
 
 # do search-request
 def request(query, params):
@@ -57,10 +51,10 @@ def response(resp):
 
             content = '{} - {} - {}'.format(result['artist']['name'], result['album']['title'], result['title'])
 
-            embedded = embedded_url.format(audioid=result['id'])
-
             # append result
-            results.append({'url': url, 'title': title, 'embedded': embedded, 'content': content})
+            results.append(
+                {'url': url, 'title': title, 'data_src': data_src.format(audioid=result['id']), 'content': content}
+            )
 
     # return results
     return results
diff --git a/searx/engines/freesound.py b/searx/engines/freesound.py
index 121a6a5b0..ea6666621 100644
--- a/searx/engines/freesound.py
+++ b/searx/engines/freesound.py
@@ -29,9 +29,6 @@ search_url = (
     url + "search/text/?query={query}&page={page}&fields=name,url,download,created,description,type&token={api_key}"
 )
 
-embedded_url = '<audio controls><source src="{uri}" type="audio/{ftype}"></audio>'
-
-
 # search request
 def request(query, params):
     params["url"] = search_url.format(
@@ -52,7 +49,6 @@ def response(resp):
         content = result["description"][:128]
         publishedDate = datetime.fromisoformat(result["created"])
         uri = result["download"]
-        embedded = embedded_url.format(uri=uri, ftype=result["type"])
 
         # append result
         results.append(
@@ -60,7 +56,7 @@ def response(resp):
                 "url": result["url"],
                 "title": title,
                 "publishedDate": publishedDate,
-                "embedded": embedded,
+                "audio_src": uri,
                 "content": content,
             }
         )
diff --git a/searx/engines/mixcloud.py b/searx/engines/mixcloud.py
index f5e0f55fc..41d39b753 100644
--- a/searx/engines/mixcloud.py
+++ b/searx/engines/mixcloud.py
@@ -24,12 +24,7 @@ paging = True
 # search-url
 url = 'https://api.mixcloud.com/'
 search_url = url + 'search/?{query}&type=cloudcast&limit=10&offset={offset}'
-
-embedded_url = (
-    '<iframe scrolling="no" frameborder="0" allowTransparency="true" '
-    + 'data-src="https://www.mixcloud.com/widget/iframe/?feed={url}" width="300" height="300"></iframe>'
-)
-
+data_src = "https://www.mixcloud.com/widget/iframe/?feed={url}"
 
 # do search-request
 def request(query, params):
@@ -51,12 +46,17 @@ def response(resp):
         title = result['name']
         url = result['url']
         content = result['user']['name']
-        embedded = embedded_url.format(url=url)
         publishedDate = parser.parse(result['created_time'])
 
         # append result
         results.append(
-            {'url': url, 'title': title, 'embedded': embedded, 'publishedDate': publishedDate, 'content': content}
+            {
+                'url': url,
+                'title': title,
+                'data_src': data_src.format(url=url),
+                'publishedDate': publishedDate,
+                'content': content,
+            }
         )
 
     # return results
diff --git a/searx/engines/soundcloud.py b/searx/engines/soundcloud.py
index 004164e37..918b56448 100644
--- a/searx/engines/soundcloud.py
+++ b/searx/engines/soundcloud.py
@@ -37,12 +37,6 @@ search_url = (
     '&client_id={client_id}'
 )  # noqa
 
-embedded_url = (
-    '<iframe width="100%" height="166" '
-    + 'scrolling="no" frameborder="no" '
-    + 'data-src="https://w.soundcloud.com/player/?url={uri}"></iframe>'
-)
-
 cid_re = re.compile(r'client_id:"([^"]*)"', re.I | re.U)
 guest_client_id = ''
 
@@ -97,7 +91,6 @@ def response(resp):
             content = result['description'] or ''
             publishedDate = parser.parse(result['last_modified'])
             uri = quote_plus(result['uri'])
-            embedded = embedded_url.format(uri=uri)
 
             # append result
             results.append(
@@ -105,7 +98,7 @@ def response(resp):
                     'url': result['permalink_url'],
                     'title': title,
                     'publishedDate': publishedDate,
-                    'embedded': embedded,
+                    'data_src': "https://w.soundcloud.com/player/?url=" + uri,
                     'content': content,
                 }
             )
diff --git a/searx/engines/spotify.py b/searx/engines/spotify.py
index 15517e3eb..c287a3469 100644
--- a/searx/engines/spotify.py
+++ b/searx/engines/spotify.py
@@ -29,10 +29,6 @@ api_client_secret = None
 url = 'https://api.spotify.com/'
 search_url = url + 'v1/search?{query}&type=track&offset={offset}'
 
-embedded_url = '<iframe data-src="https://embed.spotify.com/?uri=spotify:track:{audioid}"\
-     width="300" height="80" frameborder="0" allowtransparency="true"></iframe>'
-
-
 # do search-request
 def request(query, params):
     offset = (params['pageno'] - 1) * 20
@@ -66,10 +62,15 @@ def response(resp):
             url = result['external_urls']['spotify']
             content = '{} - {} - {}'.format(result['artists'][0]['name'], result['album']['name'], result['name'])
 
-            embedded = embedded_url.format(audioid=result['id'])
-
             # append result
-            results.append({'url': url, 'title': title, 'embedded': embedded, 'content': content})
+            results.append(
+                {
+                    'url': url,
+                    'title': title,
+                    'data_src': "https://embed.spotify.com/?uri=spotify:track:" + result['id'],
+                    'content': content,
+                }
+            )
 
     # return results
     return results
diff --git a/searx/plugins/hostname_replace.py b/searx/plugins/hostname_replace.py
index e22b2dca0..acbc6304c 100644
--- a/searx/plugins/hostname_replace.py
+++ b/searx/plugins/hostname_replace.py
@@ -33,5 +33,10 @@ def on_result(request, search, result):
             if pattern.search(parsed_data_src.netloc):
                 parsed_data_src = parsed_data_src._replace(netloc=pattern.sub(replacement, parsed_data_src.netloc))
                 result['data_src'] = urlunparse(parsed_data_src)
+        if result.get('audio_src', False):
+            parsed_audio_src = urlparse(result['audio_src'])
+            if pattern.search(parsed_audio_src.netloc):
+                parsed_audio_src = parsed_audio_src._replace(netloc=pattern.sub(replacement, parsed_audio_src.netloc))
+                result['audio_src'] = urlunparse(parsed_audio_src)
 
     return True
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 20662c1af..43f5e8994 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -296,6 +296,16 @@ article[data-vim-selected].category-social {
   padding: 0 5px 25px 0 !important;
 }
 
+.audio-control audio {
+  width: 100%;
+  padding: 10px 0 0 0;
+}
+
+.embedded-content iframe {
+  width: 100%;
+  padding: 10px 0 0 0;
+}
+
 .result-videos .content {
   overflow: hidden;
 }
diff --git a/searx/templates/oscar/result_templates/default.html b/searx/templates/oscar/result_templates/default.html
index 535630499..72a5f8c56 100644
--- a/searx/templates/oscar/result_templates/default.html
+++ b/searx/templates/oscar/result_templates/default.html
@@ -3,13 +3,13 @@
 {{- 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-media-{{ index }}" data-btn-text-collapsed="{{ _('show media') }}" data-btn-text-not-collapsed="{{ _('hide media') }}" aria-labelledby="result-{{loop.index}}">{{ icon('music') }} {{ _('show media') }}</a></small>
 {%- endif -%}
 
-{%- if result.embedded -%}
-<div id="result-media-{{ index }}" class="collapse">
-   {{- result.embedded|safe -}}
+{% if result.data_src -%}
+<div id="result-media-{{ index }}" class="embedded-content invisible">
+  <iframe data-src="{{result.data_src}}" frameborder="0" allowfullscreen></iframe>
 </div>
 {%- endif -%}
 
@@ -24,6 +24,13 @@
 {%- if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif -%}
 {%- endif -%}
 
+{% if result.audio_src -%}
+<div id="result-media-{{ index }}" class="audio-control">
+  <audio controls><source src="{{result.audio_src}}"></audio>
+</div>
+{%- endif %}
+
+
 {%- if rtl -%}
 {{ result_footer_rtl(result, loop.index) }}
 {%- else -%}
diff --git a/searx/templates/simple/result_templates/default.html b/searx/templates/simple/result_templates/default.html
index 7c74a06d0..9e4dae138 100644
--- a/searx/templates/simple/result_templates/default.html
+++ b/searx/templates/simple/result_templates/default.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-media-{{ index }}" data-btn-text-collapsed="{{ _('show media') }}" data-btn-text-not-collapsed="{{ _('hide media') }}">{{ icon('music-note') }} {{ _('show media') }}</a></p>
 {%- endif %}
 {%- if result.content %}
@@ -15,9 +15,14 @@
   </p>
 {% endif -%}
 {{- result_sub_footer(result, proxify) -}}
-{% if result.embedded -%}
-<div id="result-media-{{ index }}" class="invisible">
-   {{- result.embedded|safe -}}
+{% if result.data_src -%}
+<div id="result-media-{{ index }}" class="embedded-content invisible">
+  <iframe data-src="{{result.data_src}}" frameborder="0" allowfullscreen></iframe>
+</div>
+{%- endif %}
+{% if result.audio_src -%}
+<div id="result-media-{{ index }}" class="audio-control">
+  <audio controls><source src="{{result.audio_src}}"></audio>
 </div>
 {%- endif %}
 {{- result_footer(result) }}