Created the AnkiMediaQueue for JavaScript media support

build/configure/src/aqt.rs

@@ -202,7 +202,8 @@ fn build_vendor_js(build: &mut Build) -> Result<()> {
                 ":node_modules:jquery-ui",
                 ":node_modules:css-browser-selector",
                 ":node_modules:bootstrap-dist",
-                "qt/aqt/data/web/js/vendor/plot.js"
+                "qt/aqt/data/web/js/vendor/plot.js",
+                "qt/aqt/data/web/js/vendor/ankimedia.js"
             ],
             output_folder: "qt/_aqt/data/web/js/vendor",
         },

qt/aqt/browser/previewer.py

@@ -28,7 +28,14 @@
 from aqt.reviewer import replay_audio
 from aqt.sound import av_player, play_clicked_audio
 from aqt.theme import theme_manager
-from aqt.utils import disable_help_button, restoreGeom, saveGeom, setWindowIcon, tr
+from aqt.utils import (
+    disable_help_button,
+    enable_javascript_playback,
+    restoreGeom,
+    saveGeom,
+    setWindowIcon,
+    tr,
+)
 from aqt.webview import AnkiWebView
 
 LastStateAndMod = tuple[str, int, int]
@@ -83,6 +90,8 @@ def _create_gui(self) -> None:
         self.bbox = QDialogButtonBox()
         self.bbox.setLayoutDirection(Qt.LayoutDirection.LeftToRight)
 
+        enable_javascript_playback(self._web._page.settings())
+
         self._replay = self.bbox.addButton(
             tr.actions_replay_audio(), QDialogButtonBox.ButtonRole.ActionRole
         )
@@ -110,6 +119,7 @@ def _on_finished(self, ok: int) -> None:
         self._on_close()
 
     def _on_replay_audio(self) -> None:
+        self._web.eval("ankimedia.replay();")
         if self._state == "question":
             replay_audio(self.card(), True)
         elif self._state == "answer":
@@ -128,6 +138,7 @@ def _setup_web_view(self) -> None:
             js=[
                 "js/mathjax.js",
                 "js/vendor/mathjax/tex-chtml.js",
+                "js/vendor/ankimedia.js",
                 "js/reviewer.js",
             ],
             context=self,
@@ -189,6 +200,10 @@ def _render_scheduled(self) -> None:
             elif self._card_changed:
                 self._state = "question"
 
+            if not self._show_both_sides and self._state == "answer":
+                self._web.eval("ankimedia.skip_front = true;")
+            self._web.eval("ankimedia._reset({skip_front_reset: true});")
+
             currentState = self._state_and_mod()
             if currentState == self._last_state:
                 # nothing has changed, avoid refreshing
@@ -222,6 +237,8 @@ def _render_scheduled(self) -> None:
             else:
                 audio = []
                 self._web.setPlaybackRequiresGesture(True)
+                self._web.eval("ankimedia.autoplay = false;")
+
             gui_hooks.av_player_will_play_tags(audio, self._state, self)
             av_player.play_tags(audio)
             txt = self.mw.prepare_card_text_for_display(txt)
@@ -236,10 +253,14 @@ def _render_scheduled(self) -> None:
             js = f"{func}({json.dumps(txt)}, '{bodyclass}');"
         self._web.eval(js)
         self._card_changed = False
+        self._web.eval("ankimedia.skip_front = false;")
 
     def _on_show_both_sides(self, toggle: bool) -> None:
         self._show_both_sides = toggle
         self.mw.col.set_config_bool(Config.Bool.PREVIEW_BOTH_SIDES, toggle)
+        self._web.eval("ankimedia._reset();")
+        if self._state == "question" and toggle:
+            self._web.eval("ankimedia.skip_front = true;")
         if self._state == "answer" and not toggle:
             self._state = "question"
         self.render_card()

qt/aqt/clayout.py

@@ -24,6 +24,7 @@
     askUser,
     disable_help_button,
     downArrow,
+    enable_javascript_playback,
     getOnlyText,
     openHelp,
     restoreGeom,
@@ -351,6 +352,7 @@ def setup_preview(self) -> None:
             js=[
                 "js/mathjax.js",
                 "js/vendor/mathjax/tex-chtml.js",
+                "js/vendor/ankimedia.js",
                 "js/reviewer.js",
             ],
             context=self,
@@ -359,6 +361,8 @@ def setup_preview(self) -> None:
         self.preview_web.eval("_blockDefaultDragDropBehavior();")
         self.preview_web.set_bridge_command(self._on_bridge_cmd, self)
 
+        enable_javascript_playback(self.preview_web._page.settings())
+
         if self._isCloze():
             nums = list(self.note.cloze_numbers_in_fields())
             if self.ord + 1 not in nums:
@@ -526,6 +530,12 @@ def _renderPreview(self) -> None:
             c.ord, self.night_mode_is_enabled
         )
 
+        if not self.have_autoplayed:
+            self.preview_web.eval("ankimedia._reset();")
+
+            if not c.autoplay():
+                self.preview_web.eval("ankimedia.autoplay = false;")
+
         if self.pform.preview_front.isChecked():
             q = ti(self.mw.prepare_card_text_for_display(c.question()))
             q = gui_hooks.card_will_show(q, c, "clayoutQuestion")
@@ -534,6 +544,7 @@ def _renderPreview(self) -> None:
             a = ti(self.mw.prepare_card_text_for_display(c.answer()), type="a")
             a = gui_hooks.card_will_show(a, c, "clayoutAnswer")
             text = a
+            self.preview_web.eval("ankimedia.skip_front = true;")
 
         # use _showAnswer to avoid the longer delay
         self.preview_web.eval(f"_showAnswer({json.dumps(text)},'{bodyclass}');")