import { timeout } from 'resource:///com/github/Aylur/ags/utils.js'; import { Box, EventBox, Overlay } from 'resource:///com/github/Aylur/ags/widget.js'; import Gtk from 'gi://Gtk'; const MAX_OFFSET = 200; const OFFSCREEN = 500; const ANIM_DURATION = 500; const TRANSITION = `transition: margin ${ANIM_DURATION}ms ease, opacity 3s ease;`; export default ({ properties, connections, props, } = {}) => { const widget = EventBox(); const gesture = Gtk.GestureDrag.new(widget); widget.add(Overlay({ ...props, properties: [ ...properties, ['dragging', false], ], // Have empty PlayerBox to define the size of the widget child: Box({ className: 'player' }), connections: [ ...connections, [gesture, (overlay) => { // Don't allow gesture when only one player if (overlay.list().length <= 1) { return; } overlay._dragging = true; let offset = gesture.get_offset()[1]; const playerBox = overlay.list().at(-1); // Slide right if (offset >= 0) { playerBox.setCss(` margin-left: ${offset}px; margin-right: -${offset}px; ${playerBox._bgStyle} `); } // Slide left else { offset = Math.abs(offset); playerBox.setCss(` margin-left: -${offset}px; margin-right: ${offset}px; ${playerBox._bgStyle} `); } }, 'drag-update'], [gesture, (overlay) => { // Don't allow gesture when only one player if (overlay.list().length <= 1) { return; } overlay._dragging = false; const offset = gesture.get_offset()[1]; const playerBox = overlay.list().at(-1); // If crosses threshold after letting go, slide away if (Math.abs(offset) > MAX_OFFSET) { // Disable inputs during animation widget.sensitive = false; // Slide away right if (offset >= 0) { playerBox.setCss(` ${TRANSITION} margin-left: ${OFFSCREEN}px; margin-right: -${OFFSCREEN}px; opacity: 0; ${playerBox._bgStyle} `); } // Slide away left else { playerBox.setCss(` ${TRANSITION} margin-left: -${OFFSCREEN}px; margin-right: ${OFFSCREEN}px; opacity: 0; ${playerBox._bgStyle}`); } timeout(ANIM_DURATION, () => { // Put the player in the back after anim overlay.reorder_overlay(playerBox, 0); // Recenter player playerBox.setCss(playerBox._bgStyle); widget.sensitive = true; }); } else { // Recenter with transition for animation playerBox.setCss(`${TRANSITION} ${playerBox._bgStyle}`); } }, 'drag-end'], ], })); widget.child.list = () => widget.child.get_children() .filter((ch) => ch._bgStyle); return widget; };