Play a video in libadwaita from hTorrent with GJS and gtk4paintablesink

main.js

import Adw from "gi://Adw?version=1";
import Gtk from "gi://Gtk?version=4.0";
import Gst from "gi://Gst?version=1.0";

Gst.init(null);

const application = new Adw.Application({
  application_id: "com.github.pojntfx.adwaitaGStreamerExample",
});

application.connect("activate", () => {
  const window = new Adw.Window({
    application,
    default_width: 1000,
    default_height: 700,
    name: "main-window",
    title: "Adwaita GStreamer Example",
  });

  const overlay = new Gtk.Overlay();

  const windowHandle = new Gtk.WindowHandle({
    halign: Gtk.Align.END,
    valign: Gtk.Align.START,
  });

  const box = new Gtk.Box({
    halign: Gtk.Align.END,
    valign: Gtk.Align.START,
    margin_top: 6,
    margin_end: 6,
    margin_bottom: 6,
    margin_start: 6,
  });

  const controlsStart = new Gtk.WindowControls({
    side: Gtk.PackType.START,
  });

  const controlsEnd = new Gtk.WindowControls({
    side: Gtk.PackType.END,
  });

  box.append(controlsStart);
  box.append(controlsEnd);

  windowHandle.set_child(box);

  overlay.add_overlay(windowHandle);

  const videoSink = Gst.ElementFactory.make("gtk4paintablesink", "video_sink");
  const pipeline = Gst.parse_launch(
    `playbin uri=http://admin:myapipassword@localhost:1337/stream?magnet=magnet%3A%3Fxt%3Durn%3Abtih%3A08ada5a7a6183aae1e09d831df6748d566095a10%26dn%3DSintel%26tr%3Dudp%253A%252F%252Fexplodie.org%253A6969%26tr%3Dudp%253A%252F%252Ftracker.coppersurfer.tk%253A6969%26tr%3Dudp%253A%252F%252Ftracker.empire-js.us%253A1337%26tr%3Dudp%253A%252F%252Ftracker.leechers-paradise.org%253A6969%26tr%3Dudp%253A%252F%252Ftracker.opentrackr.org%253A1337%26tr%3Dwss%253A%252F%252Ftracker.btorrent.xyz%26tr%3Dwss%253A%252F%252Ftracker.fastcast.nz%26tr%3Dwss%253A%252F%252Ftracker.openwebtorrent.com%26ws%3Dhttps%253A%252F%252Fwebtorrent.io%252Ftorrents%252F%26xs%3Dhttps%253A%252F%252Fwebtorrent.io%252Ftorrents%252Fsintel.torrent&path=Sintel%2FSintel.mp4`
  );
  pipeline.set_property("video-sink", videoSink);

  const picture = new Gtk.Picture();
  picture.set_paintable(videoSink.paintable);

  overlay.set_child(picture);

  window.set_property("content", overlay);

  window.show();

  pipeline.set_state(Gst.State.PLAYING);

  window.connect("destroy", () => pipeline.set_state(Gst.State.NULL));
});

application.run([]);