dany/clapper
1
0
Fork 0
mirror of https://github.com/Rafostar/clapper.git synced 2025-08-29 23:32:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add PiP and play icons as gresource

Browse Source 
Add missing PiP icons from web devel kit. Also add play/pause
icons at the right size and remove all workarounds/scaling
implemented or these two.

Playback icons are always two bars for pause and triangle for play,
so hopefully this will not be problematic, as this guaranties the
right size for them that Adwaita unfortunately cannot provide.
This commit is contained in:
Rafał Dzięgiel
2021-09-07 19:34:51 +02:00
parent fa39c45773
commit 98d2b80103
16 changed files with 263 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
css/styles.css
View File

@@ -98,9 +98,6 @@ scale trough slider {
font-size: 21px;
font-weight: 500;
}
.adwicons .clappercontrols {
margin-bottom: -1px;
}
.clappercontrols {
margin-left: 2px;
margin-right: 2px;
@@ -136,12 +133,6 @@ scale trough slider {
.fullscreen.tvmode .clappercontrols button image {
-gtk-icon-size: 24px;
}
.adwicons .playbackicon {
-gtk-icon-size: 20px;
}
.adwicons.fullscreen.tvmode .playbackicon {
-gtk-icon-size: 28px;
}
.clappercontrolsbutton.text-button label {
font-family: 'Cantarell', sans-serif;
font-variant-numeric: tabular-nums;

9
data/com.github.rafostar.Clapper.data.gresource.xml Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<gresources>
<gresource prefix="/com/github/rafostar/Clapper">
<file preprocess="xml-stripblanks" alias="icons/scalable/actions/play-symbolic.svg">icons/play-symbolic.svg</file>
<file preprocess="xml-stripblanks" alias="icons/scalable/actions/pause-symbolic.svg">icons/pause-symbolic.svg</file>
<file preprocess="xml-stripblanks" alias="icons/scalable/actions/pip-in-symbolic.svg">icons/pip-in-symbolic.svg</file>
<file preprocess="xml-stripblanks" alias="icons/scalable/actions/pip-out-symbolic.svg">icons/pip-out-symbolic.svg</file>
</gresource>
</gresources>

7
data/icons/pause-symbolic.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<g fill="#2e3436">
<path d="m 3 2 h 4 v 12 h -4 z m 0 0"/>
<path d="m 9 2 h 4 v 12 h -4 z m 0 0"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 262 B

112
data/icons/pip-in-symbolic.svg Normal file
View File

@@ -0,0 +1,112 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="a" height="100%" width="100%" x="0%" y="0%">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter>
<mask id="b">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.3"/>
</g>
</mask>
<clipPath id="c">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="d">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="e">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="f">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="g">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="h">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="i">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="j">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="k">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="l">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="m">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="n">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="o">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="p">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.3"/>
</g>
</mask>
<clipPath id="q">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="r">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.5"/>
</g>
</mask>
<clipPath id="s">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<g fill="#2e3436">
<path d="m 1 2.007812 c -0.550781 0 -1 0.449219 -1 1 v 9 c 0 0.550782 0.449219 1 1 1 h 4 v -2 h -3 v -7 h 10 v 3 h 2 v -4 c 0 -0.550781 -0.449219 -1 -1 -1 z m 0 0" fill-opacity="0.35"/>
<path d="m 9 10 c -0.550781 0 -1 0.449219 -1 1 v 4.007812 c 0 0.550782 0.449219 1 1 1 h 6 c 0.550781 0 1 -0.449218 1 -1 v -4.007812 c 0 -0.550781 -0.449219 -1 -1 -1 z m 1 2 h 4 v 2.007812 h -4 z m 0 0"/>
<path d="m 3.132812 5.140625 c 0.171876 -0.164063 0.496094 -0.1875 0.757813 0.015625 l 3.109375 3.089844 v 0.753906 h -0.753906 l -3.109375 -3.089844 c -0.191407 -0.191406 -0.179688 -0.597656 -0.003907 -0.769531 z m 0 0"/>
<path d="m 4 9 h 4 v 1 h -4 z m 0 0"/>
<path d="m 7 6 h 1 v 4 h -1 z m 0 0"/>
</g>
<g clip-path="url(#c)" mask="url(#b)" transform="matrix(1 0 0 1 -580 -764)">
<path d="m 562.460938 212.058594 h 10.449218 c -1.183594 0.492187 -1.296875 2.460937 0 3 h -10.449218 z m 0 0" fill="#2e3436"/>
</g>
<g clip-path="url(#e)" mask="url(#d)" transform="matrix(1 0 0 1 -580 -764)">
<path d="m 16 632 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#g)" mask="url(#f)" transform="matrix(1 0 0 1 -580 -764)">
<path d="m 17 631 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#i)" mask="url(#h)" transform="matrix(1 0 0 1 -580 -764)">
<path d="m 18 634 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#k)" mask="url(#j)" transform="matrix(1 0 0 1 -580 -764)">
<path d="m 16 634 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#m)" mask="url(#l)" transform="matrix(1 0 0 1 -580 -764)">
<path d="m 17 635 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#o)" mask="url(#n)" transform="matrix(1 0 0 1 -580 -764)">
<path d="m 19 635 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#q)" mask="url(#p)" transform="matrix(1 0 0 1 -580 -764)">
<path d="m 136 660 v 7 h 7 v -7 z m 0 0" fill="#2e3436"/>
</g>
<g clip-path="url(#s)" mask="url(#r)" transform="matrix(1 0 0 1 -580 -764)">
<path d="m 219 642 h 3 v 12 h -3 z m 0 0" fill="#2e3436"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

112
data/icons/pip-out-symbolic.svg Normal file
View File

@@ -0,0 +1,112 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="a" height="100%" width="100%" x="0%" y="0%">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter>
<mask id="b">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.3"/>
</g>
</mask>
<clipPath id="c">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="d">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="e">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="f">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="g">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="h">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="i">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="j">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="k">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="l">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="m">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="n">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
</g>
</mask>
<clipPath id="o">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="p">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.3"/>
</g>
</mask>
<clipPath id="q">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<mask id="r">
<g filter="url(#a)">
<path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.5"/>
</g>
</mask>
<clipPath id="s">
<path d="m 0 0 h 1024 v 800 h -1024 z"/>
</clipPath>
<g fill="#2e3436">
<path d="m 1 2.007812 c -0.550781 0 -1 0.449219 -1 1 v 9 c 0 0.550782 0.449219 1 1 1 h 4 v -2 h -3 v -7 h 10 v 3 h 2 v -4 c 0 -0.550781 -0.449219 -1 -1 -1 z m 0 0"/>
<path d="m 9 10 c -0.550781 0 -1 0.449219 -1 1 v 4.007812 c 0 0.550782 0.449219 1 1 1 h 6 c 0.550781 0 1 -0.449218 1 -1 v -4.007812 c 0 -0.550781 -0.449219 -1 -1 -1 z m 1 2 h 4 v 2.007812 h -4 z m 0 0" fill-opacity="0.35"/>
<path d="m 7.863281 9.871094 c -0.167969 0.164062 -0.492187 0.1875 -0.753906 -0.019532 l -3.113281 -3.085937 v -0.753906 h 0.753906 l 3.109375 3.085937 c 0.191406 0.191406 0.179687 0.601563 0.003906 0.773438 z m 0 0"/>
<path d="m 6.996094 6.011719 h -4 v -1 h 4 z m 0 0"/>
<path d="m 3.996094 9.011719 h -1 v -4 h 1 z m 0 0"/>
</g>
<g clip-path="url(#c)" mask="url(#b)" transform="matrix(1 0 0 1 -600 -764)">
<path d="m 562.460938 212.058594 h 10.449218 c -1.183594 0.492187 -1.296875 2.460937 0 3 h -10.449218 z m 0 0" fill="#2e3436"/>
</g>
<g clip-path="url(#e)" mask="url(#d)" transform="matrix(1 0 0 1 -600 -764)">
<path d="m 16 632 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#g)" mask="url(#f)" transform="matrix(1 0 0 1 -600 -764)">
<path d="m 17 631 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#i)" mask="url(#h)" transform="matrix(1 0 0 1 -600 -764)">
<path d="m 18 634 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#k)" mask="url(#j)" transform="matrix(1 0 0 1 -600 -764)">
<path d="m 16 634 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#m)" mask="url(#l)" transform="matrix(1 0 0 1 -600 -764)">
<path d="m 17 635 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#o)" mask="url(#n)" transform="matrix(1 0 0 1 -600 -764)">
<path d="m 19 635 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
</g>
<g clip-path="url(#q)" mask="url(#p)" transform="matrix(1 0 0 1 -600 -764)">
<path d="m 136 660 v 7 h 7 v -7 z m 0 0" fill="#2e3436"/>
</g>
<g clip-path="url(#s)" mask="url(#r)" transform="matrix(1 0 0 1 -600 -764)">
<path d="m 219 642 h 3 v 12 h -3 z m 0 0" fill="#2e3436"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

4
data/icons/play-symbolic.svg Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="2 2 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<path d="M 5 3.746094 L 5 16.246094 L 6.25 16.246094 C 6.46875 16.246094 6.683594 16.195312 6.875 16.089844 L 15.625 11.089844 C 16.015625 10.875 16.210938 10.433594 16.210938 9.996094 C 16.210938 9.554688 16.015625 9.117188 15.625 8.902344 L 6.875 3.902344 C 6.683594 3.792969 6.46875 3.746094 6.25 3.746094 Z M 5 3.746094" fill="#2e3436"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 480 B

6
data/meson.build
View File

@@ -19,3 +19,9 @@ install_data('com.github.rafostar.Clapper.desktop',
install_data('com.github.rafostar.Clapper.metainfo.xml',
install_dir: join_paths(sharedir, 'metainfo')
)
gnome.compile_resources('com.github.rafostar.Clapper.data',
'com.github.rafostar.Clapper.data.gresource.xml',
gresource_bundle: true,
install: true,
install_dir: pkgdatadir,
)

2
lib/gst/clapper/meson.build vendored
View File

@@ -1,5 +1,3 @@
gnome = import('gnome')
gstclapper_sources = [
'gstclapper.c',
'gstclapper-signal-dispatcher.c',

3
meson.build
View File

@@ -8,10 +8,13 @@ project('com.github.rafostar.Clapper', 'c', 'cpp',
]
)
gnome = import('gnome')
i18n = import('i18n')
python = import('python')
python_bin = python.find_installation('python3')
pkgdatadir = join_paths(get_option('datadir'), meson.project_name())
if not python_bin.found()
error('No valid python3 binary found')
endif

16
src/app.js
View File

@@ -43,22 +43,6 @@ class ClapperApp extends AppBase
this._openFilesAsync(files).then(() => this.activate()).catch(debug);
}
_onIconThemeChanged(gtkSettings)
{
super._onIconThemeChanged(gtkSettings);
const display = Gdk.Display.get_default();
if(!display) return;
const iconTheme = Gtk.IconTheme.get_for_display(display);
if(!iconTheme) return;
const { headerBar } = this.active_window.child.revealerTop;
if(!headerBar) return;
headerBar._onIconThemeChanged(iconTheme);
}
_onWindowMap(window)
{
window.disconnect(this.mapSignal);

35
src/appBase.js
View File

@@ -31,6 +31,10 @@ class ClapperAppBase extends Gtk.Application
title: Misc.appName,
});
/* FIXME: AFAIK there is no way to detect theme rounded corners.
* Having 2/4 corners rounded in floating mode is not good. */
window.add_css_class('adwrounded');
if(!settings.get_boolean('render-shadows'))
window.add_css_class('gpufriendly');
@@ -99,37 +103,6 @@ class ClapperAppBase extends Gtk.Application
'gtk-application-prefer-dark-theme',
Gio.SettingsBindFlags.GET
);
this._onThemeChanged(gtkSettings);
this._onIconThemeChanged(gtkSettings);
gtkSettings.connect('notify::gtk-theme-name', this._onThemeChanged.bind(this));
gtkSettings.connect('notify::gtk-icon-theme-name', this._onIconThemeChanged.bind(this));
this.doneFirstActivate = true;
}
_onThemeChanged(gtkSettings)
{
const theme = gtkSettings.gtk_theme_name;
const window = this.active_window;
debug(`user selected theme: ${theme}`);
/* FIXME: AFAIK there is no way to detect theme rounded corners.
Having 2/4 corners rounded in floating mode is not good. */
if(!window.has_css_class('adwrounded'))
window.add_css_class('adwrounded');
}
_onIconThemeChanged(gtkSettings)
{
const iconThemeName = gtkSettings.gtk_icon_theme_name;
const window = this.active_window;
const hasAdwIcons = window.has_css_class('adwicons');
if(iconThemeName === 'Adwaita' || iconThemeName === 'Default') {
if(!hasAdwIcons)
window.add_css_class('adwicons');
}
else if(hasAdwIcons)
window.remove_css_class('adwicons');
}
});

5
src/controls.js vendored
View File

@@ -37,10 +37,9 @@ class ClapperControls extends Gtk.Box
this.chapterHideId = null;
this.togglePlayButton = new Buttons.IconToggleButton(
'media-playback-start-symbolic',
'media-playback-pause-symbolic'
'play-symbolic',
'pause-symbolic'
);
this.togglePlayButton.child.add_css_class('playbackicon');
this.togglePlayButton.connect(
'clicked', this._onTogglePlayClicked.bind(this)
);

8
src/headerbar.js
View File

@@ -28,12 +28,4 @@ class ClapperHeaderBar extends HeaderBarBase
{
this.root.fullscreen();
}
_onIconThemeChanged(iconTheme)
{
super._onIconThemeChanged(iconTheme);
const { controlsRevealer } = this.root.child;
this._updateFloatIcon(!controlsRevealer.reveal_child);
}
});

16
src/headerbarBase.js
View File

@@ -23,7 +23,6 @@ class ClapperHeaderBarBase extends Gtk.Box
this.isMaximized = false;
this.isMenuOnLeft = true;
this.hasPipIcons = false;
const uiBuilder = Misc.getBuilderForName('clapper.ui');
@@ -53,7 +52,7 @@ class ClapperHeaderBarBase extends Gtk.Box
this.extraButtonsBox.add_css_class('linked');
const floatButton = new Gtk.Button({
icon_name: 'go-bottom-symbolic',
icon_name: 'pip-in-symbolic',
can_focus: false,
});
floatButton.add_css_class('osd');
@@ -221,9 +220,7 @@ class ClapperHeaderBarBase extends Gtk.Box
const floatButton = this.extraButtonsBox.get_first_child();
if(!floatButton) return;
const iconName = (!this.hasPipIcons)
? 'go-bottom-symbolic'
: (isFloating)
const iconName = (isFloating)
? 'pip-out-symbolic'
: 'pip-in-symbolic';
@@ -242,15 +239,6 @@ class ClapperHeaderBarBase extends Gtk.Box
_onFullscreenButtonClicked(button)
{
}
_onIconThemeChanged(iconTheme)
{
/* Those icons are new, so check if theme has them */
this.hasPipIcons = (
iconTheme.has_icon('pip-in-symbolic')
&& iconTheme.has_icon('pip-out-symbolic')
);
}
});
var HeaderBarPopover = GObject.registerClass({

6
src/player.js
View File

@@ -676,12 +676,6 @@ class ClapperPlayer extends GstClapper.Clapper
this.set_audio_video_offset(value);
debug(`set audio-video offset: ${value}`);
break;
case 'dark-theme':
root = this.widget.get_root();
if(!root) break;
root.application._onThemeChanged(Gtk.Settings.get_default());
break;
case 'play-flags':
const initialFlags = this.pipeline.flags;
const settingsFlags = settings.get_int(key);

5
src/widgetRemote.js
View File

@@ -23,11 +23,10 @@ class ClapperWidgetRemote extends Gtk.Grid
/* FIXME: create better way to add buttons for
* remote app without duplicating too much code */
this.togglePlayButton = new Buttons.IconToggleButton(
'media-playback-start-symbolic',
'media-playback-pause-symbolic'
'play-symbolic',
'pause-symbolic'
);
this.togglePlayButton.remove_css_class('flat');
this.togglePlayButton.child.add_css_class('playbackicon');
this.togglePlayButton.connect(
'clicked', () => this.sendWs('toggle_play')
);