Skip to content

Commit

Permalink
track info menu redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
sakithb committed Nov 20, 2023
1 parent c58fa7c commit 94c3adc
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 91 deletions.
179 changes: 89 additions & 90 deletions player.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export const Player = GObject.registerClass(
});

this.buttonSeekBack.connect("button-release-event", () => {
this._seekBack();
this._seekPlayer(-1);
});

this.buttonPrev.connect("button-release-event", () => {
Expand All @@ -181,11 +181,11 @@ export const Player = GObject.registerClass(
});

this.buttonSeekForward.connect("button-release-event", () => {
this._seekForward();
this._seekPlayer(1);
});

this.buttonSeekBack.connect("touch-event", () => {
this._seekBack();
this._seekPlayer(-1);
});

this.buttonPrev.connect("touch-event", () => {
Expand All @@ -201,7 +201,7 @@ export const Player = GObject.registerClass(
});

this.buttonSeekForward.connect("touch-event", () => {
this._seekForward();
this._seekPlayer(1);
});

this.buttonSeekBack.set_child(this.iconSeekBack);
Expand Down Expand Up @@ -282,34 +282,24 @@ export const Player = GObject.registerClass(
this._playerProxy.SetPositionRemote(this._metadata.trackid, position);
}

_seekBack() {
_seekPlayer(direction) {
const offset = this._mcExtension.seekInterval * 1_000_000;

if (this._mcExtension.preferNativeSeek) {
this._playerProxy.SeekRemote(-offset);
this._playerProxy.SeekRemote(direction * offset);
} else {
const position = this._getDbusProperty("Position");
const metadata = parseMetadata(this._playerProxy.Metadata);

if (position !== undefined && metadata !== undefined && metadata.trackid !== undefined) {
const newPosition = Math.max(position - offset, 0);
this._playerProxy.SetPositionRemote(metadata.trackid, newPosition);
}
}
}

_seekForward() {
const offset = this._mcExtension.seekInterval * 1_000_000;
if (position !== undefined && this._metadata.trackid !== undefined) {
let newPosition;

if (this._mcExtension.preferNativeSeek) {
this._playerProxy.SeekRemote(offset);
} else {
const position = this._getDbusProperty("Position");
const metadata = parseMetadata(this._playerProxy.Metadata);
if (direction === 1) {
newPosition = Math.min(position + offset, this._metadata.length);
} else {
newPosition = Math.max(position - offset, 0);
}

if (position !== undefined && metadata !== undefined && metadata.trackid !== undefined) {
const newPosition = Math.min(position + offset, metadata.length);
this._playerProxy.setPositionRemote(metadata.trackid, newPosition);
this._playerProxy.SetPositionRemote(this._metadata.trackid, newPosition);
}
}
}
Expand Down Expand Up @@ -651,6 +641,7 @@ export const Player = GObject.registerClass(
const spacer = new St.BoxLayout({
style: "padding-top: 10px;",
});

this._infoItem.add(spacer);

if (this._getDbusProperty("Position") !== undefined) {
Expand All @@ -664,15 +655,58 @@ export const Player = GObject.registerClass(
x_align: Clutter.ActorAlign.START,
style: "font-size: small;",
});

this.infoTt = new St.Label({
text: "00:00",
x_expand: true,
x_align: Clutter.ActorAlign.END,
style: "font-size: small;",
});

// const buttonSeekBack = new St.Button({
// x_align: Clutter.ActorAlign.START,
// style_class: "popup-seek-button-bw",
// });

// buttonSeekBack.connect("button-release-event", () => {
// this._seekPlayer(-1);
// });

// buttonSeekBack.connect("touch-event", () => {
// this._seekPlayer(-1);
// });

// buttonSeekBack.set_child(
// new St.Icon({
// icon_name: "media-seek-backward-symbolic",
// style_class: "popup-menu-icon popup-seek-icon",
// })
// );

// const buttonSeekForward = new St.Button({
// x_align: Clutter.ActorAlign.END,
// style_class: "popup-seek-button-fw",
// });

// buttonSeekForward.connect("button-release-event", () => {
// this._seekPlayer(1);
// });

// buttonSeekForward.connect("touch-event", () => {
// this._seekPlayer(1);
// });

// buttonSeekForward.set_child(
// new St.Icon({
// icon_name: "media-seek-forward-symbolic",
// style_class: "popup-menu-icon popup-seek-icon",
// })
// );

// rtttContainer.add(buttonSeekBack);
rtttContainer.add(this.infoEt);
rtttContainer.add(this.infoTt);
// rtttContainer.add(buttonSeekForward);

this._infoItem.add(rtttContainer);

Expand Down Expand Up @@ -701,9 +735,15 @@ export const Player = GObject.registerClass(

// Play/pause button

const mainControlButtons = new St.BoxLayout({
// const buttonRowOne = new St.BoxLayout({
// x_align: Clutter.ActorAlign.FILL,
// });

// buttonRowOne.add(buttonSeekBack);
// buttonRowOne.add(buttonSeekForward);

const buttonRow = new St.BoxLayout({
x_align: Clutter.ActorAlign.FILL,
style: "padding-top: 10px;",
});

this.infoIconLoop = new St.Icon({
Expand All @@ -722,27 +762,6 @@ export const Player = GObject.registerClass(

this.infoButtonLoop.set_child(this.infoIconLoop);

mainControlButtons.add(this.infoButtonLoop);

this.infoIconPlayPause = new St.Icon({
icon_name: this.isPlaying ? "media-playback-pause-symbolic" : "media-playback-start-symbolic",
style_class: "popup-menu-icon",
});

const buttonPlayPause = new St.Button({
style_class: "popup-menu-button",
});

buttonPlayPause.connect("button-press-event", () => {
this._playerProxy.PlayPauseRemote();
});

buttonPlayPause.connect("touch-event", () => {
this._playerProxy.PlayPauseRemote();
});

buttonPlayPause.set_child(this.infoIconPlayPause);

const buttonPrev = new St.Button({
style_class: "popup-menu-button",
});
Expand All @@ -762,69 +781,44 @@ export const Player = GObject.registerClass(
})
);

const buttonNext = new St.Button({
style_class: "popup-menu-button",
});

buttonNext.connect("button-press-event", () => {
this._playerProxy.NextRemote();
});

buttonNext.connect("touch-event", () => {
this._playerProxy.NextRemote();
this.infoIconPlayPause = new St.Icon({
icon_name: this.isPlaying ? "media-playback-pause-symbolic" : "media-playback-start-symbolic",
style_class: "popup-menu-icon",
});

buttonNext.set_child(
new St.Icon({
icon_name: "media-skip-forward-symbolic",
style_class: "popup-menu-icon",
})
);

const buttonSeekBack = new St.Button({
const buttonPlayPause = new St.Button({
style_class: "popup-menu-button",
});

buttonSeekBack.connect("button-release-event", () => {
this._seekBack();
buttonPlayPause.connect("button-press-event", () => {
this._playerProxy.PlayPauseRemote();
});

buttonSeekBack.connect("touch-event", () => {
this._seekBack();
buttonPlayPause.connect("touch-event", () => {
this._playerProxy.PlayPauseRemote();
});

buttonSeekBack.set_child(
new St.Icon({
icon_name: "media-seek-backward-symbolic",
style_class: "popup-menu-icon",
})
);
buttonPlayPause.set_child(this.infoIconPlayPause);

const buttonSeekForward = new St.Button({
const buttonNext = new St.Button({
style_class: "popup-menu-button",
});

buttonSeekForward.connect("button-release-event", () => {
this._seekForward();
buttonNext.connect("button-press-event", () => {
this._playerProxy.NextRemote();
});

buttonSeekForward.connect("touch-event", () => {
this._seekForward();
buttonNext.connect("touch-event", () => {
this._playerProxy.NextRemote();
});

buttonSeekForward.set_child(
buttonNext.set_child(
new St.Icon({
icon_name: "media-seek-forward-symbolic",
icon_name: "media-skip-forward-symbolic",
style_class: "popup-menu-icon",
})
);

mainControlButtons.add(buttonSeekBack);
mainControlButtons.add(buttonPrev);
mainControlButtons.add(buttonPlayPause);
mainControlButtons.add(buttonNext);
mainControlButtons.add(buttonSeekForward);

this.infoShuffleIcon = new St.Icon({
icon_name: "media-playlist-shuffle-symbolic",
style_class: "popup-menu-icon",
Expand All @@ -841,9 +835,14 @@ export const Player = GObject.registerClass(

this.infoShuffleButton.set_child(this.infoShuffleIcon);

mainControlButtons.add(this.infoShuffleButton);
buttonRow.add(this.infoButtonLoop);
buttonRow.add(buttonPrev);
buttonRow.add(buttonPlayPause);
buttonRow.add(buttonNext);
buttonRow.add(this.infoShuffleButton);

this._infoItem.add(mainControlButtons);
// this._infoItem.add(buttonRowOne);
this._infoItem.add(buttonRow);

this.menu.addMenuItem(this._infoItem);
}
Expand Down
3 changes: 2 additions & 1 deletion stylesheet.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,5 @@

.custom-popup-menu-item {
height: 16px;
}
margin-bottom: 10px;
}

0 comments on commit 94c3adc

Please sign in to comment.