diff --git a/clapper_src/app.js b/clapper_src/app.js index b609e066..fb6cd21b 100644 --- a/clapper_src/app.js +++ b/clapper_src/app.js @@ -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) diff --git a/clapper_src/buttons.js b/clapper_src/buttons.js index 2efce995..aaa514ca 100644 --- a/clapper_src/buttons.js +++ b/clapper_src/buttons.js @@ -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'); + } }); diff --git a/clapper_src/controls.js b/clapper_src/controls.js index 841b1870..19032930 100644 --- a/clapper_src/controls.js +++ b/clapper_src/controls.js @@ -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'); } }); diff --git a/clapper_src/interface.js b/clapper_src/interface.js index fc12fb7f..985c79f3 100644 --- a/clapper_src/interface.js +++ b/clapper_src/interface.js @@ -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'); diff --git a/clapper_src/revealers.js b/clapper_src/revealers.js index 4d65d573..f148b4ef 100644 --- a/clapper_src/revealers.js +++ b/clapper_src/revealers.js @@ -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); } diff --git a/css/styles.css b/css/styles.css index b0332d2d..140dab30 100644 --- a/css/styles.css +++ b/css/styles.css @@ -8,7 +8,8 @@ scale marks { font-weight: 500; } .osd button { - margin: 2px; + margin-left: 1px; + margin-right: 1px; min-width: 36px; min-height: 36px; }