Resizing images and videos in a jupyter notebook

manim/utils/ipython_magic.py

@@ -3,6 +3,7 @@
 import mimetypes
 import os
 import shutil
+import webbrowser
 from datetime import datetime
 from pathlib import Path
 from typing import Any, Dict, List
@@ -11,6 +12,113 @@
 from manim.__main__ import main
 from manim.renderer.shader import shader_program_cache
 
+
+def init_buttons():
+    b0 = Button(
+        description="",
+        icon="fa-picture-o",
+        button_style="",
+        layout=Layout(height="30px", width="40px"),
+    )
+    b1 = Button(
+        description="",
+        icon="fa-expand",
+        button_style="",
+        layout=Layout(height="30px", width="40px"),
+    )
+    b2 = Button(
+        description="",
+        icon="fa-download",
+        button_style="",
+        layout=Layout(height="30px", width="40px"),
+    )
+    return b0, b1, b2
+
+
+def image_viewer(image_path, small_width, large_width):
+
+    original1t1_width = f"{config.frame_size[0]}px"
+    file = open(image_path, "rb")
+    image = file.read()
+    dis_img = widgets.Image(value=image, format="png")
+
+    button_list = GridspecLayout(3, 1, height="120px")
+    b0, b1, b2 = init_buttons()
+    button_list[0, 0] = b0
+    button_list[1, 0] = b1
+    button_list[2, 0] = b2
+    dis_img.width = large_width  # # default width
+
+    def on_button_image1t1_clicked(b):
+        dis_img.width = original1t1_width
+
+    def on_button_expand_clicked(b):
+        if dis_img.width != small_width:
+            dis_img.width = small_width
+        else:
+            dis_img.width = large_width
+
+    def on_button_download_clicked(b):
+        url = (Path.cwd() / image_path).as_uri()
+        webbrowser.open(url)
+
+    b0.on_click(on_button_image1t1_clicked)
+    b1.on_click(on_button_expand_clicked)
+    b2.on_click(on_button_download_clicked)
+    return AppLayout(
+        left_sidebar=button_list,
+        center=dis_img,
+        pane_widths=["50px", 1, 0],
+    )
+
+
+def video_viewer(video_path, small_width, large_width):
+
+    original1t1_width = f"{config.frame_size[0]}px"
+
+    dis_video = Video.from_file(video_path)
+    dis_video.controls = True
+
+    dis_but = widgets.ToggleButton(
+        value=False,
+        description="Fullscreen",
+        disabled=False,
+        button_style="",
+        tooltip="Description",
+    )
+
+    b0, b1, b2 = init_buttons()
+
+    button_list = GridspecLayout(3, 1, height="120px")
+    button_list[0, 0] = b0
+    button_list[1, 0] = b1
+    button_list[2, 0] = b2
+
+    dis_video.width = large_width  # default width
+
+    def on_button_image1t1_clicked(b):
+        dis_video.width = original1t1_width
+
+    def on_button_expand_clicked(b):
+        if dis_video.width != small_width:
+            dis_video.width = small_width
+        else:
+            dis_video.width = large_width
+
+    def on_button_download_clicked(b):
+        url = (Path.cwd() / video_path).as_uri()
+        webbrowser.open(url)
+
+    b0.on_click(on_button_image1t1_clicked)
+    b1.on_click(on_button_expand_clicked)
+    b2.on_click(on_button_download_clicked)
+    return AppLayout(
+        left_sidebar=button_list,
+        center=dis_video,
+        pane_widths=["50px", 1, 0],
+    )
+
+
 try:
     from IPython import get_ipython
     from IPython.core.interactiveshell import InteractiveShell
@@ -20,7 +128,9 @@
         magics_class,
         needs_local_scope,
     )
-    from IPython.display import Image, Video, display
+    from IPython.display import display
+    from ipywidgets import AppLayout, Button, GridspecLayout, Layout, Video, widgets
+
 except ImportError:
     pass
 else:
@@ -161,20 +271,11 @@ def construct(self):
                 shutil.copy(local_path, tmpfile)
 
                 file_type = mimetypes.guess_type(config["output_file"])[0]
-                if file_type.startswith("image"):
-                    display(Image(filename=config["output_file"]))
-                    return
 
-                # videos need to be embedded when running in google colab
-                video_embed = "google.colab" in str(get_ipython())
-
-                display(
-                    Video(
-                        tmpfile,
-                        html_attributes=f'controls autoplay loop style="max-width: {config["media_width"]};"',
-                        embed=video_embed,
-                    ),
-                )
+                if file_type.startswith("image"):
+                    display(image_viewer(tmpfile, "350px", "900px"))
+                else:
+                    display(video_viewer(tmpfile, "350px", "900px"))
 
         def add_additional_args(self, args: List[str]) -> List[str]:
             additional_args = ["--jupyter"]

pyproject.toml

@@ -58,8 +58,7 @@ isosurfaces = "0.1.0"
 
 [tool.poetry.extras]
 webgl_renderer = ["grpcio","grpcio-tools"]
-jupyterlab = ["jupyterlab"]
-gui = ["dearpygui"]
+jupyterlab = ["jupyterlab", "ipywidgets"]
 
 [tool.poetry.dev-dependencies]
 pytest-cov = "*"