Add Clapper usage as GTK widget

clapper_src/app.js

@@ -2,10 +2,10 @@ const { Gio, GObject, Gtk } = imports.gi;
 const { HeaderBar } = imports.clapper_src.headerbar;
 const { Widget } = imports.clapper_src.widget;
 const Menu = imports.clapper_src.menu;
+const Misc = imports.clapper_src.misc;
 
-const APP_NAME = 'Clapper' || pkg.name.substring(
+const APP_NAME = 'Clapper';
-    pkg.name.lastIndexOf('.') + 1
+const APP_ID = 'com.github.rafostar.Clapper';
-);
 
 var App = GObject.registerClass(
 class ClapperApp extends Gtk.Application
@@ -13,7 +13,7 @@ class ClapperApp extends Gtk.Application
     _init(opts)
     {
         super._init({
-            application_id: pkg.name
+            application_id: APP_ID
         });
 
         let defaults = {
@@ -40,8 +40,9 @@ class ClapperApp extends Gtk.Application
             );
             this.add_action(simpleAction);
         }
+        let clapperPath = Misc.getClapperPath();
         let uiBuilder = Gtk.Builder.new_from_file(
-            `${pkg.datadir}/${pkg.name}/ui/clapper.ui`
+            `${clapperPath}/ui/clapper.ui`
         );
         let models = {
             settingsMenu: uiBuilder.get_object('settingsMenu')

clapper_src/buttons.js

@@ -139,10 +139,8 @@ class ClapperPopoverButton extends IconButton
 
     _onClosed()
     {
-        let root = this.get_root();
+        let { player } = this.get_ancestor(Gtk.Grid);
-        let clapperWidget = root.get_child();
+        player.widget.grab_focus();
-
-        clapperWidget.player.widget.grab_focus();
 
         this.popover.unparent();
         this.unset_state_flags(Gtk.StateFlags.CHECKED);

clapper_src/headerbar.js

@@ -1,4 +1,4 @@
-const { GLib, GObject, Gst, Gtk, Pango } = imports.gi;
+const { GObject, Gtk, Pango } = imports.gi;
 
 var HeaderBar = GObject.registerClass(
 class ClapperHeaderBar extends Gtk.HeaderBar
@@ -25,27 +25,8 @@ class ClapperHeaderBar extends Gtk.HeaderBar
         this.pack_end(fullscreenButton);
     }
 
-    updateHeaderBar(mediaInfo)
+    updateHeaderBar(title, subtitle)
     {
-        let title = mediaInfo.get_title();
-        let subtitle = mediaInfo.get_uri();
-
-        if(Gst.Uri.get_protocol(subtitle) === 'file') {
-            subtitle = GLib.path_get_basename(
-                GLib.filename_from_uri(subtitle)[0]
-            );
-        }
-
-        if(!title) {
-            title = (!subtitle)
-                ? this.defaultTitle
-                : (subtitle.includes('.'))
-                ? subtitle.split('.').slice(0, -1).join('.')
-                : subtitle;
-
-            subtitle = null;
-        }
-
         this.titleLabel.label = title;
         this.subtitleLabel.visible = (subtitle !== null);
 

clapper_src/menu.js

@@ -1,4 +1,5 @@
 const { GObject, Gst, Gtk } = imports.gi;
+const Misc = imports.clapper_src.misc;
 
 var actions = [
     about
@@ -26,11 +27,11 @@ function about(window, appName)
     let aboutDialog = new Gtk.AboutDialog({
         program_name: appName,
         comments: 'A GNOME media player powered by GStreamer',
-        version: pkg.version,
+        version: Misc.getClapperVersion(),
         authors: ['Rafał Dzięgiel'],
         artists: ['Rafał Dzięgiel'],
         license_type: Gtk.License.GPL_3_0,
-        logo_icon_name: pkg.name,
+        logo_icon_name: 'com.github.rafostar.Clapper',
         website: 'https://github.com/Rafostar/clapper',
         modal: true,
         system_information: osInfo,

clapper_src/misc.js

@@ -1,9 +1,30 @@
 const { GstPlayer, Gtk } = imports.gi;
 const Debug = imports.clapper_src.debug;
 
+var clapperPath;
+var clapperVersion;
+
 let { debug } = Debug;
 let inhibitCookie;
 
+function getClapperPath()
+{
+    return (clapperPath)
+        ? clapperPath
+        : (pkg)
+        ? `${pkg.datadir}/${pkg.name}`
+        : '.';
+}
+
+function getClapperVersion()
+{
+    return (clapperVersion)
+        ? clapperVersion
+        : (pkg)
+        ? pkg.version
+        : '';
+}
+
 function inhibitForState(state, window)
 {
     let isInhibited = false;

clapper_src/widget.js

@@ -1,4 +1,4 @@
-const { Gdk, GLib, GObject, Gtk, GstPlayer } = imports.gi;
+const { Gdk, GLib, GObject, Gst, GstPlayer, Gtk } = imports.gi;
 const { Controls } = imports.clapper_src.controls;
 const Debug = imports.clapper_src.debug;
 const Misc = imports.clapper_src.misc;
@@ -7,8 +7,13 @@ const Revealers = imports.clapper_src.revealers;
 
 let { debug } = Debug;
 
-var Widget = GObject.registerClass(
+var Widget = GObject.registerClass({
-class ClapperWidget extends Gtk.Grid
+    Signals: {
+        'fullscreen-changed': {
+            param_types: [GObject.TYPE_BOOLEAN]
+        }
+    }
+}, class ClapperWidget extends Gtk.Grid
 {
     _init(opts)
     {
@@ -16,8 +21,9 @@ class ClapperWidget extends Gtk.Grid
 
         super._init();
 
+        let clapperPath = Misc.getClapperPath();
         let defaults = {
-            cssPath: `${pkg.datadir}/${pkg.name}/css/styles.css`,
+            cssPath: `${clapperPath}/css/styles.css`,
         };
         Object.assign(this, defaults, opts);
 
@@ -188,18 +194,29 @@ class ClapperWidget extends Gtk.Grid
 
     updateTitles(mediaInfo)
     {
-        let root = this.get_root();
+        let title = mediaInfo.get_title();
-        if(!root) return;
+        let subtitle = mediaInfo.get_uri();
 
-        let title;
+        if(Gst.Uri.get_protocol(subtitle) === 'file') {
+            subtitle = GLib.path_get_basename(
+                GLib.filename_from_uri(subtitle)[0]
+            );
+        }
+        if(!title) {
+            title = (!subtitle)
+                ? this.defaultTitle
+                : (subtitle.includes('.'))
+                ? subtitle.split('.').slice(0, -1).join('.')
+                : subtitle;
+
+            subtitle = null;
+        }
+
+        let root = this.get_root();
         let headerbar = root.get_titlebar();
 
-        if(headerbar && headerbar.updateHeaderBar) {
+        if(headerbar && headerbar.updateHeaderBar)
-            headerbar.updateHeaderBar(mediaInfo);
+            headerbar.updateHeaderBar(title, subtitle);
-            title = headerbar.titleLabel.label;
-        }
-        else
-            title = mediaInfo.get_title() || mediaInfo.get_uri();
 
         this.revealerTop.setMediaTitle(title);
     }
@@ -368,6 +385,7 @@ class ClapperWidget extends Gtk.Grid
         this.showControls(isFullscreen);
         this.player.widget.grab_focus();
 
+        this.emit('fullscreen-changed', isFullscreen);
         debug(`interface in fullscreen mode: ${isFullscreen}`);
     }
 

clapper_src/window.js

@@ -1,18 +0,0 @@
-const { Gdk, GObject, Gtk } = imports.gi;
-
-var Window = GObject.registerClass(
-class ClapperWindow extends Gtk.ApplicationWindow
-{
-    _init(application, title)
-    {
-        super._init({
-            application: application,
-            title: title,
-        });
-    }
-
-    updateTitlebar(mediaInfo)
-    {
-        
-    }
-});

examples/app-example.js

@@ -0,0 +1,48 @@
+imports.gi.versions.Gtk = '4.0';
+
+const Gtk = imports.gi.Gtk;
+const Clapper = imports.clapper;
+
+let app = new Gtk.Application({
+    application_id: 'com.clapper.AppExample'
+});
+
+app.connect('activate', () => {
+    let window = new Gtk.ApplicationWindow({
+        application: app,
+        title: 'Clapper App Example',
+    });
+    let grid = new Gtk.Grid({
+        halign: Gtk.Align.CENTER,
+        valign: Gtk.Align.CENTER,
+        margin_start: 20,
+        margin_end: 20,
+        margin_top: 10,
+        margin_bottom: 10,
+    });
+    let box = new Gtk.Box({
+        orientation: Gtk.Orientation.HORIZONTAL,
+        spacing: 8,
+    });
+    let button = new Gtk.Button({
+        icon_name: 'folder-videos-symbolic',
+    });
+    let label = new Gtk.Label({
+        label: 'Click this button to play Big Buck Bunny!',
+    });
+
+    button.connect('clicked', () => {
+        let clapper = new Clapper.App({
+            playlist: ['http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4']
+        });
+        clapper.run();
+    });
+
+    box.append(label);
+    box.append(button);
+    grid.attach(box, 0, 0, 1, 1);
+
+    window.set_child(grid);
+    window.present();
+});
+app.run([]);

examples/widget-example.js

@@ -0,0 +1,40 @@
+imports.gi.versions.Gtk = '4.0';
+
+const Gtk = imports.gi.Gtk;
+const Clapper = imports.clapper;
+
+let app = new Gtk.Application({
+    application_id: 'com.clapper.WidgetExample'
+});
+
+app.connect('activate', () => {
+    let window = new Gtk.ApplicationWindow({
+        application: app,
+        title: 'Clapper Widget Example',
+    });
+    let box = new Gtk.Box({
+        orientation: Gtk.Orientation.VERTICAL,
+    });
+    let label = new Gtk.Label({
+        label: [
+            'Clapper is used as a widget and placed below.',
+            'Double click it to enter fullscreen!',
+        ].join('\n')
+    });
+    let widget = new Clapper.Widget();
+
+    widget.connect('fullscreen-changed', (widget, isFullscreen) => {
+        label.set_visible(!isFullscreen);
+    });
+    window.connect('show', () => {
+        let media = 'http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4';
+        widget.player.set_media(media);
+    });
+
+    box.append(label);
+    box.append(widget);
+
+    window.set_child(box);
+    window.present();
+});
+app.run([]);

gjs-1.0/clapper.js.in

@@ -1,8 +1,12 @@
 imports.gi.versions.Gdk = '4.0';
 imports.gi.versions.Gtk = '4.0';
-imports.searchPath.unshift('@importspath@');
+
+const CLAPPER_PATH = '@importspath@';
+imports.searchPath.unshift(CLAPPER_PATH);
 
 const ClapperSrc = imports.clapper_src;
+ClapperSrc.misc.clapperPath = CLAPPER_PATH;
+ClapperSrc.misc.clapperVersion = '@PACKAGE_VERSION@';
 
 var { App } = ClapperSrc.app;
 var { Widget } = ClapperSrc.widget;

gjs-1.0/meson.build

@@ -3,6 +3,7 @@ gjsdir = join_paths(sharedir, 'gjs-1.0')
 importspath = join_paths(sharedir, meson.project_name())
 
 gjs_conf = configuration_data()
+gjs_conf.set('PACKAGE_VERSION', meson.project_version())
 gjs_conf.set('importspath', importspath)
 
 configure_file(