Fix enter fullscreen and popover buttons

This commit is contained in:
Rafostar
2020-10-07 16:40:42 +02:00
parent dbdb6988a2
commit 041b31c161
6 changed files with 138 additions and 201 deletions

View File

@@ -21,8 +21,6 @@ var App = GObject.registerClass({
{
_init(opts)
{
GLib.set_prgname(APP_NAME);
super._init({
application_id: pkg.name
});
@@ -204,27 +202,15 @@ var App = GObject.registerClass({
_onWindowFullscreenChanged(window, isFullscreen)
{
// when changing fullscreen pango layout of popup is lost
// and we need to re-add marks to the new layout
this.interface.controls.setVolumeMarks(false);
if(isFullscreen) {
this.setUpdateTimeInterval();
this.setHideControlsTimeout();
this.interface.controls.unfullscreenButton.set_sensitive(true);
this.interface.controls.unfullscreenButton.show();
this.interface.showControls(true);
}
else {
this.clearTimeout('updateTime');
this.interface.controls.unfullscreenButton.set_sensitive(false);
this.interface.controls.unfullscreenButton.hide();
this.interface.showControls(false);
}
this.interface.setControlsOnVideo(isFullscreen);
this.interface.controls.setVolumeMarks(true);
this.interface.controls.setFullscreenMode(isFullscreen);
this.interface.setFullscreenMode(isFullscreen);
}
_onWindowKeyPressEvent(self, event)

View File

@@ -1,41 +1,51 @@
const { GObject, Gtk } = imports.gi;
var BoxedIconButton = GObject.registerClass(
class BoxedIconButton extends Gtk.Button
var IconButton = GObject.registerClass(
class ClapperIconButton extends Gtk.Button
{
_init(icon, size, isFullscreen)
_init(icon)
{
super._init({
margin_top: 4,
margin_bottom: 4,
margin_start: 1,
margin_end: 1,
can_focus: false,
//can_default: false,
icon_name: icon,
});
this.isFullscreen = isFullscreen || false;
size = size || Gtk.IconSize.SMALL_TOOLBAR;
let image = Gtk.Image.new_from_icon_name(icon);
//if(image)
//this.set_image(image);
/*
this.image.defaultSize = size;
this.image.fullscreenSize = (size === Gtk.IconSize.SMALL_TOOLBAR)
? Gtk.IconSize.LARGE_TOOLBAR
: Gtk.IconSize.DND;
*/
this.isFullscreen = false;
this.add_css_class('flat');
this.box = new Gtk.Box();
this.box.append(this);
super.show();
}
get visible()
setFullscreenMode(isFullscreen)
{
return this.box.visible;
this.isFullscreen = isFullscreen;
}
});
var PopoverButton = GObject.registerClass(
class ClapperPopoverButton extends IconButton
{
_init(icon)
{
super._init(icon);
this.popover = new Gtk.Popover({
position: Gtk.PositionType.TOP,
});
this.popoverBox = new Gtk.Box({
orientation: Gtk.Orientation.VERTICAL,
});
this.popover.set_parent(this);
this.popover.set_child(this.popoverBox);
this.popover.set_offset(0, -this.margin_top);
if(this.isFullscreen)
this.popover.add_css_class('osd');
this.destroySignal = this.connect('destroy', this._onDestroy.bind(this));
}
setFullscreenMode(isFullscreen)
@@ -43,62 +53,30 @@ class BoxedIconButton extends Gtk.Button
if(this.isFullscreen === isFullscreen)
return;
this.image.icon_size = (isFullscreen)
? this.image.fullscreenSize
: this.image.defaultSize;
this.margin_top = (isFullscreen) ? 6 : 4;
this.popover.set_offset(0, -this.margin_top);
this.isFullscreen = isFullscreen;
}
/*
show_all()
{
this.box.show_all();
}
*/
show()
{
this.box.show();
}
hide()
{
this.box.hide();
}
});
var BoxedPopoverButton = GObject.registerClass(
class BoxedPopoverButton extends BoxedIconButton
{
_init(icon, size, isFullscreen)
{
super._init(icon, size, isFullscreen);
this.popover = new Gtk.Popover({
default_widget: this.box
});
this.popoverBox = new Gtk.Box({
orientation: Gtk.Orientation.VERTICAL
});
this.popover.set_child(this.popoverBox);
this.popoverBox.show();
if(this.isFullscreen)
this.popover.add_css_class('osd');
}
setFullscreenMode(isEnabled)
{
if(this.isFullscreen === isEnabled)
let cssClass = 'osd';
if(isFullscreen == this.popover.has_css_class(cssClass))
return;
let action = (isEnabled) ? 'add' : 'remove';
this.popover[action + '_css_class']('osd');
let action = (isFullscreen) ? 'add' : 'remove';
this.popover[action + '_css_class'](cssClass);
super.setFullscreenMode(isEnabled);
super.setFullscreenMode(isFullscreen);
}
vfunc_clicked()
{
this.popover.popup();
}
_onDestroy()
{
this.disconnect(this.destroySignal);
this.popover.unparent();
this.popoverBox.emit('destroy');
this.popover.emit('destroy');
}
});

View File

@@ -31,7 +31,6 @@ var Controls = GObject.registerClass({
valign: Gtk.Align.END,
});
this.fullscreenMode = false;
this.durationFormated = '00:00:00';
this.buttonsArr = [];
@@ -52,124 +51,100 @@ var Controls = GObject.registerClass({
this._addVolumeButton();
this.unfullscreenButton = this.addButton(
'view-restore-symbolic',
Gtk.IconSize.SMALL_TOOLBAR,
true
);
this.unfullscreenButton.set_visible(false);
this.fullscreenButton = Gtk.Button.new_from_icon_name(
'view-fullscreen-symbolic',
//Gtk.IconSize.SMALL_TOOLBAR
);
this.setDefaultWidgetBehaviour(this.fullscreenButton);
this.openMenuButton = Gtk.Button.new_from_icon_name(
'open-menu-symbolic',
//Gtk.IconSize.SMALL_TOOLBAR
);
this.setDefaultWidgetBehaviour(this.openMenuButton);
//this.forall(this.setDefaultWidgetBehaviour);
this.realizeSignal = this.connect('realize', this._onControlsRealize.bind(this));
this.destroySignal = this.connect('destroy', this._onControlsDestroy.bind(this));
}
pack_start(widget, expand, fill, padding)
{
if(
widget.box
&& widget.box.constructor
&& widget.box.constructor === Gtk.Box
)
widget = widget.box;
super.append(widget);
this.realizeSignal = this.connect('realize', this._onRealize.bind(this));
this.destroySignal = this.connect('destroy', this._onDestroy.bind(this));
}
setFullscreenMode(isFullscreen)
{
if(isFullscreen === this.fullscreenMode)
return;
for(let button of this.buttonsArr)
button.setFullscreenMode(isFullscreen);
this.fullscreenMode = isFullscreen;
this.unfullscreenButton.set_visible(isFullscreen);
}
addButton(iconName, size, noPack)
addButton(iconName)
{
let button = new Buttons.BoxedIconButton(
iconName, size, this.fullscreenMode
);
if(!noPack)
this.pack_start(button, false, false, 0);
this.buttonsArr.push(button);
return button;
}
addPopoverButton(iconName, size)
{
let button = new Buttons.BoxedPopoverButton(
iconName, size, this.fullscreenMode
);
this.pack_start(button, false, false, 0);
let button = new Buttons.IconButton(iconName);
this.append(button);
this.buttonsArr.push(button);
return button;
}
addRadioButtons(box, array, activeId)
addPopoverButton(iconName)
{
return;
let button = new Buttons.PopoverButton(iconName);
this.append(button);
this.buttonsArr.push(button);
return button;
}
addCheckButtons(box, array, activeId)
{
let group = null;
let children = box.get_children();
let lastEl = (children.length > array.length)
? children.length
: array.length;
let child = box.get_first_child();
let i = 0;
for(let i = 0; i < lastEl; i++) {
while(child || i < array.length) {
if(i >= array.length) {
children[i].hide();
debug(`hiding unused ${children[i].type} radioButton nr: ${i}`);
child.hide();
debug(`hiding unused ${child.type} checkButton nr: ${i}`);
i++;
child = child.get_next_sibling();
continue;
}
let el = array[i];
let radioButton;
let checkButton;
if(i < children.length) {
radioButton = children[i];
debug(`reusing ${el.type} radioButton nr: ${i}`);
if(child) {
checkButton = child;
debug(`reusing ${el.type} checkButton nr: ${i}`);
}
else {
debug(`creating new ${el.type} radioButton nr: ${i}`);
radioButton = new Gtk.RadioButton({
debug(`creating new ${el.type} checkButton nr: ${i}`);
checkButton = new Gtk.CheckButton({
group: group,
});
radioButton.connect(
checkButton.connect(
'toggled',
this._onRadioButtonToggled.bind(this, radioButton)
this._onCheckButtonToggled.bind(this, checkButton)
);
this.setDefaultWidgetBehaviour(radioButton);
box.add(radioButton);
this.setDefaultWidgetBehaviour(checkButton);
box.append(checkButton);
}
radioButton.label = el.label;
debug(`radioButton label: ${radioButton.label}`);
radioButton.type = el.type;
debug(`radioButton type: ${radioButton.type}`);
radioButton.activeId = el.activeId;
debug(`radioButton id: ${radioButton.activeId}`);
checkButton.label = el.label;
debug(`checkButton label: ${checkButton.label}`);
checkButton.type = el.type;
debug(`checkButton type: ${checkButton.type}`);
checkButton.activeId = el.activeId;
debug(`checkButton id: ${checkButton.activeId}`);
if(radioButton.activeId === activeId) {
radioButton.set_active(true);
debug(`activated ${el.type} radioButton nr: ${i}`);
if(checkButton.activeId === activeId) {
checkButton.set_active(true);
debug(`activated ${el.type} checkButton nr: ${i}`);
}
if(!group)
group = radioButton;
group = checkButton;
radioButton.show();
i++;
if(child)
child = child.get_next_sibling();
}
}
@@ -179,16 +154,6 @@ var Controls = GObject.registerClass({
//widget.can_default = false;
}
setVolumeMarks(isAdded)
{
if(!isAdded)
return this.volumeScale.clear_marks();
this.volumeScale.add_mark(0, Gtk.PositionType.LEFT, '0%');
this.volumeScale.add_mark(1, Gtk.PositionType.LEFT, '100%');
this.volumeScale.add_mark(2, Gtk.PositionType.LEFT, '200%');
}
handleScaleIncrement(type, isUp)
{
let value = this[`${type}Scale`].get_value();
@@ -252,7 +217,7 @@ var Controls = GObject.registerClass({
);
*/
this.positionAdjustment = this.positionScale.get_adjustment();
this.pack_start(this.positionScale, true, true, 0);
this.append(this.positionScale);
}
_addVolumeButton()
@@ -280,10 +245,11 @@ var Controls = GObject.registerClass({
this.volumeAdjustment.set_page_increment(0.05);
this.setDefaultWidgetBehaviour(this.volumeScale);
for(let i = 0; i <= 2; i++) {
let text = (i) ? `${i}00%` : '0%';
this.volumeScale.add_mark(i, Gtk.PositionType.LEFT, text);
}
this.volumeButton.popoverBox.append(this.volumeScale);
//this.volumeButton.popoverBox.show_all();
this.setVolumeMarks(true);
}
_getFormatedTime(time)
@@ -297,25 +263,25 @@ var Controls = GObject.registerClass({
return `${hours}:${minutes}:${seconds}`;
}
_onRadioButtonToggled(self, radioButton)
_onCheckButtonToggled(self, checkButton)
{
if(!radioButton.get_active())
if(!checkButton.get_active())
return;
switch(radioButton.type) {
switch(checkButton.type) {
case 'video':
case 'audio':
case 'subtitle':
this.emit(
'track-change-requested',
radioButton.type,
radioButton.activeId
checkButton.type,
checkButton.activeId
);
break;
case 'visualization':
this.emit(
`${radioButton.type}-change-requested`,
radioButton.activeId
`${checkButton.type}-change-requested`,
checkButton.activeId
);
break;
default:
@@ -341,7 +307,7 @@ var Controls = GObject.registerClass({
this.emit('position-seeking-changed', this.isPositionSeeking);
}
_onControlsRealize()
_onRealize()
{
this.disconnect(this.realizeSignal);
@@ -380,9 +346,15 @@ var Controls = GObject.registerClass({
}
}
_onControlsDestroy()
_onDestroy()
{
this.disconnect(this.destroySignal);
this.positionScale.set_format_value_func(null);
this.visualizationsButton.emit('destroy');
this.videoTracksButton.emit('destroy');
this.audioTracksButton.emit('destroy');
this.subtitleTracksButton.emit('destroy');
this.volumeButton.emit('destroy');
}
});

View File

@@ -19,7 +19,7 @@ class ClapperInterface extends Gtk.Grid
};
Object.assign(this, defaults, opts);
this.controlsInVideo = false;
this.fullscreenMode = false;
this.lastVolumeValue = null;
this.lastPositionValue = 0;
this.lastRevealerEventTime = 0;
@@ -38,7 +38,7 @@ class ClapperInterface extends Gtk.Grid
this.attach(this.videoBox, 0, 0, 1, 1);
this.attach(this.controls, 0, 1, 1, 1);
this.destroySignal = this.connect('destroy', this._onInterfaceDestroy.bind(this));
this.destroySignal = this.connect('destroy', this._onDestroy.bind(this));
}
addPlayer(player)
@@ -102,24 +102,25 @@ class ClapperInterface extends Gtk.Grid
this[`revealer${pos}`].showChild(isShow);
}
setControlsOnVideo(isOnVideo)
setFullscreenMode(isFullscreen)
{
if(this.controlsInVideo === isOnVideo)
if(this.fullscreenMode === isFullscreen)
return;
if(isOnVideo) {
if(isFullscreen) {
this.remove(this.controls);
this.controls.pack_start(this.controls.unfullscreenButton.box, false, false, 0);
this.revealerBottom.addWidget(this.controls);
this.revealerBottom.append(this.controls);
}
else {
this.revealerBottom.removeWidget(this.controls);
this.controls.remove(this.controls.unfullscreenButton.box);
this.revealerBottom.remove(this.controls);
this.attach(this.controls, 0, 1, 1, 1);
}
this.controlsInVideo = isOnVideo;
debug(`placed controls in overlay: ${isOnVideo}`);
this.controls.setFullscreenMode(isFullscreen);
this.showControls(isFullscreen);
this.fullscreenMode = isFullscreen;
debug(`interface in fullscreen mode: ${isFullscreen}`);
}
updateMediaTracks()
@@ -212,7 +213,7 @@ class ClapperInterface extends Gtk.Grid
}
continue;
}
this.controls.addRadioButtons(
this.controls.addCheckButtons(
this.controls[`${type}TracksButton`].popoverBox,
parsedInfo[`${type}Tracks`],
activeId
@@ -265,7 +266,7 @@ class ClapperInterface extends Gtk.Grid
});
});
this.controls.addRadioButtons(
this.controls.addCheckButtons(
this.controls.visualizationsButton.popoverBox,
parsedVisArr,
null
@@ -433,7 +434,7 @@ class ClapperInterface extends Gtk.Grid
this.lastPositionValue = positionSeconds;
this._player.seek_seconds(positionSeconds);
if(this.controls.fullscreenMode)
if(this.fullscreenMode)
this.updateTime();
}
@@ -469,7 +470,7 @@ class ClapperInterface extends Gtk.Grid
this._player.set_volume(volume);
}
_onInterfaceDestroy()
_onDestroy()
{
this.disconnect(this.destroySignal);
this.controls.emit('destroy');

View File

@@ -220,15 +220,14 @@ class ClapperRevealerBottom extends CustomRevealer
this.revealerBox.add_css_class('osd');
this.set_child(this.revealerBox);
//this.revealerBox.show_all();
}
addWidget(widget)
append(widget)
{
this.revealerBox.pack_start(widget, false, true, 0);
this.revealerBox.append(widget);
}
removeWidget(widget)
remove(widget)
{
this.revealerBox.remove(widget);
}