Disabling media pause when switching content tabs.

[stevekirby]

I would like to reverse the effects of this commit (as I understand it).

I have several <video> files, all with autoplay attributes, inside a series of content tabs. I want them all to load, autoplay and to continue playback when the user switches between tabs. Ideally they would not pause and resume and ideally they would all autoplay even when not visible.

I understand how to add custom javascript but the current functionality is more deeply embedded than I know how to override.

Thanks in advance for any help.

[kamilkrzyskow]

Hello @stevekirby,
these are the only observables that the bundle.js exposes:

mkdocs-material/src/templates/assets/javascripts/bundle.ts

Lines 304 to 318 in 7b83b57

	/* ----------------------------------------------------------------------------
	* Exports
	* ------------------------------------------------------------------------- */
	window.document$ = document$ /* Document observable */
	window.location$ = location$ /* Location subject */
	window.target$ = target$ /* Location target observable */
	window.keyboard$ = keyboard$ /* Keyboard observable */
	window.viewport$ = viewport$ /* Viewport observable */
	window.tablet$ = tablet$ /* Media tablet observable */
	window.screen$ = screen$ /* Media screen observable */
	window.print$ = print$ /* Media print observable */
	window.alert$ = alert$ /* Alert subject */
	window.progress$ = progress$ /* Progress indicator subject */
	window.component$ = component$ /* Component observable */

You can see how to hook the observables here:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript
  In the "How to integrate with third-party JavaScript libraries" box

I also believe that some observables expose a data, which you should be able to process:

document$.subscribe(function(data) {
  console.log(data);
})

Having said that, I don't know if the component$ observable does expose the contentTabs events 🤔 or if any other observable does it.
Therefore it's up to you to try and find out ✌️

---

Perhaps another possibility is to make your own control logic in the extra.js.
Something like querySelectAll video elements, and attach a MutationObserver or something else the event listener for pause that would detect the pausing of the video. Then check if the active element is the video (to know the user pressed the video or the content tab) and if not start playing the video again after the pause.

Some more references:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event#examples
• https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement

---

Another possibility is a bit hacky, but in this case I believe is quite safe. Similar to this hook:

• Mermaid with Icons #6778 (reply in thread)

you should be able to modify the minified bundle.js and find the "audio, video" string.
There is only one instance of the string in the file, and the name.pause() comes right after, so you should be able to inject a comment in the code to prevent the code from executing.

---

EDIT: Since you asked about hooking the logic I forgot to mention that the alternative to the hacky approach would be to recompile the theme with modified TypeScript from scratch: https://squidfunk.github.io/mkdocs-material/customization/#building-the-theme

[kamilkrzyskow]

Great to hear you've had success! Please provide your solution (or perhaps both with the first method too), and mark it as the answer.

Since you asked about hooking the logic I forgot to mention that the alternative to the hacky approach would be to recompile the theme with modified TypeScript from scratch: https://squidfunk.github.io/mkdocs-material/customization/#building-the-theme

[stevekirby]

I just followed your steps in the post you linked to: Enable hooks in mkdocs.yml and add this to the hooks.py file:

from pathlib import Path


def on_post_build(config):
    site_dir = Path(config["site_dir"])
    javascripts_dir = site_dir / "assets" / "javascripts"

    for path in javascripts_dir.glob("bundle*.js"):
        if str(path).lower().endswith(".js"):
            bundle_path = path
            break
    else:
        bundle_path = None

    if not bundle_path:
        return

    contents = bundle_path.read_text(encoding="utf8")
    media_pos = contents.find('"audio, video"')
    pipe_pos = contents.find("pipe", media_pos + 1)
    replaced_content = contents[media_pos:pipe_pos].replace("pause", "play")
    modified_contents = (
        contents[:media_pos]
        + replaced_content
        + contents[pipe_pos:]
    )
    bundle_path.write_text(modified_contents)

[kamilkrzyskow]

I mentioned in the post/thread that the given solution was just a "prototype" of sort, without required safe guards to be able to run this in production without accidentally destroying the served JS file in case something bad happens (aka our target code part gets modified in the bundle).

I found some time and added those safeguards, with your (a bit simpler) example than the one from last time.

Hook with safe guards

from typing import Optional
from pathlib import Path

from mkdocs.plugins import get_plugin_logger

LOG = get_plugin_logger("pause-play-hook")


def on_post_build(config):
    site_dir: Path = Path(config["site_dir"])
    javascripts_dir: Path = site_dir / "assets" / "javascripts"

    # Find the bundle.js file to modify
    bundle_path: Optional[Path]
    for path in javascripts_dir.glob("bundle*.js"):
        if str(path).lower().endswith(".js"):
            bundle_path = path
            break
    else:
        bundle_path = None

    # Bundle was not found, skip override
    if not bundle_path:
        LOG.error("No bundle.js found")
        return

    LOG.debug(f"Bundle path: {bundle_path}")

    # Set LEFT and RIGHT marker strings
    left: str = '"audio, video"'
    right: str = "pause"  # changed from "pipe"

    # Set old and new strings used for replacement
    old: str = "pause"
    new: str = "play"

    # Set expected target region length
    expected_len: int = 11

    # Read the contents and find the LEFT marker string
    contents: str = bundle_path.read_text(encoding="utf8")
    left_pos: int = contents.find(left)

    # Negative number means not found, skip override
    if left_pos < 0:
        LOG.warning(f"The left marker - {left} - was not found")
        return

    # Move the cursor past the marker string
    left_pos += len(left)

    # Now find the RIGHT marker string
    right_pos: int = contents.find(right, left_pos)

    # Negative number means not found, skip override
    if right_pos < 0:
        LOG.warning(f"The right marker - {right} - was not found")
        return

    # If the RIGHT marker string equals old then move the cursor past it
    if old == right:
        LOG.debug("The right marker is same as old, shifting cursor")
        right_pos += len(right)

    # Get target region based on the marker positions
    raw_target = contents[left_pos:right_pos]

    # Run with the `-v` verbose flag to see the value and store it for later use
    # with expected_len
    LOG.debug(f"len(raw_target) = {len(raw_target)}")
    LOG.debug(f"expected_len = {expected_len}")
    LOG.debug(f"raw_target = {raw_target}")
    LOG.debug(f"old = {old}")
    LOG.debug(f"new = {new}")

    # Validate the target region, and skip override if invalid
    if old not in raw_target:
        LOG.warning(f"{old} was not found in {raw_target}")
        return

    if expected_len != len(raw_target):
        LOG.warning(
            f"Expected len ({expected_len}) differs "
            f"from actual len ({len(raw_target)})"
        )
        return

    # Store separately for logging
    processed_target = raw_target.replace(old, new, 1)
    LOG.debug(f"processed_target = {processed_target}")

    # Merge parts
    result = "".join([
        contents[:left_pos],
        processed_target,
        contents[right_pos:]
    ])

    # Shift left cursor back for final log entry
    left_pos -= len(left)

    # Shift right cursor if the processed_target is longer
    diff: int = len(processed_target) - len(raw_target)
    if diff > 0:
        right_pos += diff

    LOG.debug(f"final_target_range = {result[left_pos:right_pos]}")

    # Write new file contents
    LOG.info(f"Replaced {old} with {new} in {bundle_path.name}")
    bundle_path.write_text(result, encoding="utf8")

It's configurable via this part, and the expected length is the actual length from a working run, you get it from a debug log below, which you can see with the verbose mode:

mkdocs build -v

    # Set LEFT and RIGHT marker strings
    left: str = '"audio, video"'
    right: str = "pause"  # changed from "pipe"

    # Set old and new strings used for replacement
    old: str = "pause"
    new: str = "play"

    # Set expected target region length
    expected_len: int = 11

[stevekirby]

@kamilkrzyskow Wow. This looks reassuringly robust. Thanks
(Tested and working for me)

[kamilkrzyskow]

After some more pondering, I guess that the strictness of the expected_len could in theory block the script quite often if the minimized variable p would suddenly be minimized as aa or some other 2 letter combination. But that's just a theory, as I expect the minification algorithm to be somewhat constant. However, I'm pointing the concern out.

Perhaps a better solution would be to count the amount of JavaScript syntax elements in the target region like ., ( or {, as this should be more constant, but I'll leave the implementation to someone more willing ✌️