From 207e4253f1e18b818391610e09ac2be22a6d81ea Mon Sep 17 00:00:00 2001
From: hikaru-y <hkrysg@gmail.com>
Date: Tue, 17 Aug 2021 22:41:05 +0900
Subject: [PATCH] Use <template> element instead of
 Range.createContextualFragment()

https://forums.ankiweb.net/t/audio-in-back-template-is-played-on-front-template-on-desktop-2-1-46/12399

Unlike when using <template> element, if a DocumentFragment is created
using Range.createContextualFragment(), <audio>/<video> elements
with `aotoplay` will play immediately even before they are inserted into
the actual document, which will cause audio or video on the answer side
to be played on the question side.
---
 ts/reviewer/images.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ts/reviewer/images.ts b/ts/reviewer/images.ts
index d98635cf1..533735d69 100644
--- a/ts/reviewer/images.ts
+++ b/ts/reviewer/images.ts
@@ -31,7 +31,9 @@ function clearPreloadLinks(): void {
 }
 
 function extractImageSrcs(html: string): string[] {
-    const fragment = document.createRange().createContextualFragment(html);
+    const tmpl = document.createElement("template");
+    tmpl.innerHTML = html;
+    const fragment = tmpl.content;
     const srcs = [...fragment.querySelectorAll("img[src]")].map(
         (img) => (img as HTMLImageElement).src
     );