Fix some issues with closing previewer (#1563)

* Fix media playback not terminating when previewer is closed

https://forums.ankiweb.net/t/anki-2-1-50-beta/15608/78

* Fix _on_preview_closed being called twice unnecessarily

The function was being called twice when the preview button is clicked
while the previewer is open.

* Fix console error caused by leftover code

The following error was shown in the console when closing previewer:
`Uncaught TypeError: Cannot read property 'classList' of null`

* Toggle state of preview button via 'active' prop

qt/aqt/browser/browser.py

@@ -3,6 +3,7 @@
 
 from __future__ import annotations
 
+import json
 from typing import Callable, Sequence
 
 import aqt
@@ -35,6 +36,7 @@ from aqt.operations.tag import (
     remove_tags_from_notes,
 )
 from aqt.qt import *
+from aqt.sound import av_player
 from aqt.switch import Switch
 from aqt.undo import UndoActionsInfo
 from aqt.utils import (
@@ -611,10 +613,10 @@ class Browser(QMainWindow):
     def onTogglePreview(self) -> None:
         if self._previewer:
             self._previewer.close()
-            self._on_preview_closed()
         elif self.editor.note:
             self._previewer = PreviewDialog(self, self.mw, self._on_preview_closed)
             self._previewer.open()
+            self.toggle_preview_button_state(True)
 
     def _renderPreview(self) -> None:
         if self._previewer:
@@ -623,16 +625,20 @@ class Browser(QMainWindow):
             else:
                 self.onTogglePreview()
 
+    def toggle_preview_button_state(self, active: bool) -> None:
+        if self.editor.web:
+            self.editor.web.eval(
+                f"editorToolbar.togglePreviewButtonState({json.dumps(active)});"
+            )
+
     def _cleanup_preview(self) -> None:
         if self._previewer:
             self._previewer.cancel_timer()
             self._previewer.close()
 
     def _on_preview_closed(self) -> None:
-        if self.editor.web:
+        av_player.stop_and_clear_queue()
-            self.editor.web.eval(
+        self.toggle_preview_button_state(False)
-                "document.getElementById('previewButton').classList.remove('highlighted')"
-            )
         self._previewer = None
 
     # Card deletion

ts/editor/EditorToolbar.svelte

@@ -28,11 +28,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     /* Our dynamic components */
     import AddonButtons from "./AddonButtons.svelte";
-    import PreviewButton from "./PreviewButton.svelte";
+    import PreviewButton, { togglePreviewButtonState } from "./PreviewButton.svelte";
 
     export const editorToolbar = {
         AddonButtons,
         PreviewButton,
+        togglePreviewButtonState,
     };
 </script>
 

ts/editor/PreviewButton.svelte

@@ -2,6 +2,13 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
+<script context="module" lang="ts">
+    import { writable } from "svelte/store";
+
+    const active = writable(false);
+    export const togglePreviewButtonState = (state: boolean) => active.set(state);
+</script>
+
 <script lang="ts">
     import { bridgeCommand } from "../lib/bridgecommand";
     import * as tr from "../lib/ftl";
@@ -14,6 +21,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <WithShortcut shortcut={"Control+Shift+P"} let:createShortcut let:shortcutLabel>
     <LabelButton
         tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
+        active={$active}
         on:click={() => bridgeCommand("preview")}
         on:mount={withButton(createShortcut)}
     >