fix: OG image URL encoding, HLS.js for VnExpress video, GIF onerror no longer hides parent

app.py

@@ -46,6 +46,10 @@ def strip_links(html):
     return re.sub(r'</a>', '', re.sub(r'<a\s[^>]*>', '', html))
 def esc(text):
     return text.replace("\\", "\\\\").replace("'", "\\'").replace('"', '\\"').replace("\n", " ")
+def esc_url(url):
+    """URL-encode spaces and special chars for safe use in JS/HTML attributes."""
+    if not url: return ""
+    return url.replace(" ", "%20").replace("'", "%27").replace('"', "%22")
 def make_id(url):
     return hashlib.md5(url.encode()).hexdigest()[:12]
 def slug(text):
@@ -119,7 +123,8 @@ def _fetch_bdp_video(embed_src):
         video = soup.select_one("video")
         if source:
             return {"type": "video", "src": source.get("src", ""),
-                    "poster": video.get("poster", "") if video else ""}
+                    "poster": video.get("poster", "") if video else "",
+                    "vtype": "mp4"}
     except Exception:
         pass
     return None
@@ -167,9 +172,12 @@ def scrape_vne_article(url):
                     # Check for video inside <p>
                     vid = ch.find("video")
                     if vid:
-                        src = vid.get("src", "")
-                        if src:
-                            body.append({"type": "video", "src": src, "poster": vid.get("poster", "")})
+                        vsrc = vid.get("src", "")
+                        vid_id = vid.get("id", "")
+                        if vsrc:
+                            vtype = "hls" if "m3u8" in vsrc else "mp4"
+                            body.append({"type": "video", "src": vsrc, "poster": vid.get("poster", ""),
+                                         "vtype": vtype, "vid_id": vid_id})
                             continue
                     im = ch.find("img")
                     if im:
@@ -181,10 +189,13 @@ def scrape_vne_article(url):
                     # Check for video in figure
                     vid = ch.find("video")
                     if vid:
-                        src = vid.get("src", "")
+                        vsrc = vid.get("src", "")
+                        vid_id = vid.get("id", "")
                         cap = ch.find("figcaption")
-                        if src:
-                            body.append({"type": "video", "src": src, "poster": vid.get("poster", ""),
+                        if vsrc:
+                            vtype = "hls" if "m3u8" in vsrc else "mp4"
+                            body.append({"type": "video", "src": vsrc, "poster": vid.get("poster", ""),
+                                         "vtype": vtype, "vid_id": vid_id,
                                          "caption": cap.get_text(strip=True) if cap else ""})
                             continue
                     im = ch.find("img"); cap = ch.find("figcaption")
@@ -297,7 +308,7 @@ def _list_card(art, big):
     img_html = ""
     if art.get("img"):
         c = "bdp-card-img bdp-card-img-big" if big else "bdp-card-img"
-        img_html = f'<div class="{c}"><img src="{art["img"]}" alt="{esc(art["title"])}" onerror="this.parentElement.style.display=\'none\'"></div>'
+        img_html = f'<div class="{c}"><img src="{esc_url(art["img"])}" alt="{esc(art["title"])}" onerror="this.style.display=\'none\'"></div>'
     time_html = f'<span class="bdp-card-time">🕐 {art["time"]}</span>' if art.get("time") else ""
     summ_html = f'<p class="bdp-card-summ">{art["summary"][:120]}...</p>' if art.get("summary") and len(art["summary"]) > 10 else ""
     link = art.get("link", "#"); aid = make_id(link)
@@ -305,9 +316,9 @@ def _list_card(art, big):
     grp = art.get("group", ""); badge = ""
     if art.get("source") == "vne": badge = f'<span class="bdp-badge bdp-badge-vne">{grp or "VnExpress"}</span>'
     elif art.get("source") == "bdp": badge = f'<span class="bdp-badge bdp-badge-bdp">{grp or "BongDaPlus"}</span>'
-    title_slug = slug(art["title"]); img_url = esc(art.get("img","") or "")
-    share_js = f"event.stopPropagation();window.bdpShare('{esc(art['title'])}','{aid}','{title_slug}','{img_url}')"
-    click_js = f"window.bdpOpen('{esc(link)}','{aid}','{title_slug}','{img_url}')"
+    title_slug = slug(art["title"]); img_url = esc_url(art.get("img","") or "")
+    share_js = f"event.stopPropagation();window.bdpShare('{esc(art['title'])}','{aid}','{title_slug}','{esc(img_url)}')"
+    click_js = f"window.bdpOpen('{esc(link)}','{aid}','{title_slug}','{esc(img_url)}')"
     return f"""<div class="bdp-card" onclick="{click_js}">
 {img_html}<div class="bdp-card-body">{badge}<h3 class="{tc}">{art['title']}</h3>
 {summ_html}<div class="bdp-card-footer">{time_html}
@@ -315,7 +326,7 @@ def _list_card(art, big):
 
 def render_article_html(article):
     aid = make_id(article["source_url"]); title_slug = slug(article["title"])
-    og_img = article.get("og_image", "")
+    og_img = esc_url(article.get("og_image", ""))
     share_js = f"window.bdpShare('{esc(article['title'])}','{aid}','{title_slug}','{esc(og_img)}')"
     src_label = "VnExpress" if article.get("source") == "vne" else "BongDaPlus"
     seo = f'<div style="display:none" itemscope itemtype="https://schema.org/NewsArticle"><meta itemprop="headline" content="{esc(article["title"])}"><meta itemprop="datePublished" content="{article.get("time","")}"><meta itemprop="publisher" content="{src_label}"><meta itemprop="image" content="{og_img}"><meta itemprop="description" content="{esc(article.get("summary","")[:160])}"></div>'
@@ -326,16 +337,33 @@ def render_article_html(article):
     if article.get("summary"): parts.append(f'<div class="bdp-article-summary">{article["summary"]}</div>')
     for item in article.get("body", []):
         if item["type"] == "video":
-            poster = item.get("poster", "")
+            poster = esc_url(item.get("poster", ""))
             poster_attr = f' poster="{poster}"' if poster else ""
             caption = item.get("caption", "")
             cap_html = f'<p class="bdp-figcap">{caption}</p>' if caption else ""
-            parts.append(f"""<div class="bdp-video-wrap">
+            vtype = item.get("vtype", "mp4")
+            vid_id = item.get("vid_id", f"vid-{aid}")
+            vsrc = item["src"]
+            if vtype == "hls":
+                # HLS stream: use HLS.js for Chrome/Firefox, native for Safari
+                parts.append(f"""<div class="bdp-video-wrap">
+<video id="{vid_id}" controls playsinline preload="metadata"{poster_attr} class="bdp-video"></video>{cap_html}
+<script>
+(function(){{var v=document.getElementById('{vid_id}');if(!v)return;
+var src='{vsrc}';
+if(v.canPlayType('application/vnd.apple.mpegURL')){{v.src=src;}}
+else if(window.Hls&&Hls.isSupported()){{var h=new Hls();h.loadSource(src);h.attachMedia(v);}}
+else{{v.innerHTML='<source src="'+src+'" type="application/x-mpegURL">';}}
+}})();
+</script></div>""")
+            else:
+                # Direct MP4
+                parts.append(f"""<div class="bdp-video-wrap">
 <video controls playsinline preload="metadata"{poster_attr} class="bdp-video">
-<source src="{item['src']}" type="video/mp4">Video không hỗ trợ trên trình duyệt này.</video>{cap_html}</div>""")
+<source src="{vsrc}" type="video/mp4">Video không hỗ trợ.</video>{cap_html}</div>""")
         elif item["type"] == "img":
             alt = item.get("alt", ""); cap = f'<figcaption class="bdp-figcap">{alt}</figcaption>' if alt else ""
-            parts.append(f'<figure class="bdp-figure"><img src="{item["src"]}" alt="{alt}" onerror="this.parentElement.style.display=\'none\'">{cap}</figure>')
+            parts.append(f'<figure class="bdp-figure"><img src="{esc_url(item["src"])}" alt="{alt}" onerror="this.style.display=\'none\'">{cap}</figure>')
         elif item["type"] == "p": parts.append(f'<p class="bdp-article-p">{item["html"]}</p>')
         elif item["type"] == "heading": parts.append(f'<h2 class="bdp-article-h2">{item["text"]}</h2>')
         elif item["type"] == "quote": parts.append(f'<blockquote class="bdp-quote">{item["text"]}</blockquote>')
@@ -452,6 +480,7 @@ JS_HEAD = """
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:image" content="" id="tw-image">
 <link rel="canonical" href="https://bep40-bongdaplus-news.hf.space">
+<script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
 <script>
 (function(){
 window.bdpOpen=function(url,aid,sl,img){