Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use CSS for muted-blocking animation #138

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

Use CSS for muted-blocking animation #138

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b1f8767
Use CSS for muted-blocking animation
danirabbit Mar 3, 2020
d909632
Style more often and faster
danirabbit Mar 3, 2020
addc78e
revert volume 0 because false positives
danirabbit Mar 3, 2020
5cbe401
Merge branch 'master' into muted-blocking-animation
cassidyjames Apr 6, 2020
6972c24
Merge branch 'master' into muted-blocking-animation
danirabbit Jul 13, 2020
03c574a
Merge branch 'master' into muted-blocking-animation
May 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions data/indicator.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,16 @@
* Boston, MA 02110-1301 USA.
*/

.volume-icon {
transition: cubic-bezier(0.4, 0.0, 0.2, 1) 3s;
}

.blocking .volume-icon {
animation: volume-blocking 0.4s ease-in-out 1;
color: @warning_color;
transition: cubic-bezier(0.4, 0.0, 0.2, 1) 200ms;
}

.mic-icon {
animation: none;
min-width: 24px;
Expand All @@ -30,6 +40,14 @@
-gtk-icon-source: -gtk-icontheme("microphone-sensitivity-muted-symbolic");
}

@keyframes volume-blocking {
0% { -gtk-icon-transform: rotate(20deg); }
25% { -gtk-icon-transform: rotate(-20deg); }
50% { -gtk-icon-transform: rotate(10deg); }
75% { -gtk-icon-transform: rotate(-10deg); }
100% { -gtk-icon-transform: rotate(5deg); }
}
Comment on lines +43 to +49
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like it in general, but the rotation feels weird to me since that icon is not visually weighted in the center. What about a side-to-side wiggle?

Suggested change
@keyframes volume-blocking {
0% { -gtk-icon-transform: rotate(20deg); }
25% { -gtk-icon-transform: rotate(-20deg); }
50% { -gtk-icon-transform: rotate(10deg); }
75% { -gtk-icon-transform: rotate(-10deg); }
100% { -gtk-icon-transform: rotate(5deg); }
}
@keyframes volume-blocking {
20% { -gtk-icon-transform: translateX(4px); }
40% { -gtk-icon-transform: translateX(-4px); }
60% { -gtk-icon-transform: translateX(2px); }
80% { -gtk-icon-transform: translateX(-2px); }
100% { -gtk-icon-transform: translateX(1px); }
}


@keyframes microphone-disabled {
0% { -gtk-icon-source: -gtk-icontheme("audio-input-microphone-symbolic"); }
10% { -gtk-icon-source: -gtk-icontheme("microphone-sensitivity-muted-10-symbolic"); opacity: 0.94; }
Expand Down
40 changes: 11 additions & 29 deletions src/Indicator.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ public class Sound.Indicator : Wingpanel.Indicator {
private Services.VolumeControlPulse volume_control;

private bool open = false;
private bool mute_blocks_sound = false;
private uint sound_was_blocked_timeout_id;

private double max_volume = 1.0;
Expand Down Expand Up @@ -67,7 +66,7 @@ public class Sound.Indicator : Wingpanel.Indicator {
volume_control.notify["mic-volume"].connect (on_mic_volume_change);
volume_control.notify["mute"].connect (on_mute_change);
volume_control.notify["micMute"].connect (on_mic_mute_change);
volume_control.notify["is-playing"].connect (on_is_playing_change);
volume_control.notify["is-playing"].connect (style_blocking);
volume_control.notify["is-listening"].connect (update_mic_visibility);

Notify.init ("wingpanel-indicator-sound");
Expand Down Expand Up @@ -133,6 +132,8 @@ public class Sound.Indicator : Wingpanel.Indicator {
volume_scale.scale_widget.set_value (volume);
display_widget.icon_name = get_volume_icon (volume);
}

style_blocking ();
}

private void on_mic_volume_change () {
Expand All @@ -148,12 +149,9 @@ public class Sound.Indicator : Wingpanel.Indicator {

string volume_icon = get_volume_icon (volume_control.volume.volume);
display_widget.icon_name = volume_icon;
volume_scale.icon = volume_icon;

if (volume_control.mute) {
volume_scale.icon = "audio-volume-muted-symbolic";
} else {
volume_scale.icon = volume_icon;
}
style_blocking ();
}

private void on_mic_mute_change () {
Expand All @@ -167,28 +165,12 @@ public class Sound.Indicator : Wingpanel.Indicator {
}
}

private void on_is_playing_change () {
if (!volume_control.mute) {
mute_blocks_sound = false;
return;
}
if (volume_control.is_playing) {
mute_blocks_sound = true;
} else if (mute_blocks_sound) {
/* Continue to show the blocking icon five seconds after a player has tried to play something */
if (sound_was_blocked_timeout_id > 0) {
Source.remove (sound_was_blocked_timeout_id);
}

sound_was_blocked_timeout_id = Timeout.add_seconds (5, () => {
mute_blocks_sound = false;
sound_was_blocked_timeout_id = 0;
display_widget.icon_name = get_volume_icon (volume_control.volume.volume);
return false;
});
private void style_blocking () {
if (volume_control.is_playing && volume_control.mute) {
display_widget.get_style_context ().add_class ("blocking");
} else {
display_widget.get_style_context ().remove_class ("blocking");
}

display_widget.icon_name = get_volume_icon (volume_control.volume.volume);
}

private void on_volume_icon_scroll_event (Gdk.EventScroll e) {
Expand Down Expand Up @@ -223,7 +205,7 @@ public class Sound.Indicator : Wingpanel.Indicator {

private unowned string get_volume_icon (double volume) {
if (volume <= 0 || this.volume_control.mute) {
return this.mute_blocks_sound ? "audio-volume-muted-blocking-symbolic" : "audio-volume-muted-symbolic";
return "audio-volume-muted-symbolic";
} else if (volume <= 0.3) {
return "audio-volume-low-symbolic";
} else if (volume <= 0.7) {
Expand Down
4 changes: 4 additions & 0 deletions src/Widgets/DisplayWidget.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ public class DisplayWidget : Gtk.Grid {
var volume_icon = new Gtk.Image ();
volume_icon.pixel_size = 24;

var volume_style_context = volume_icon.get_style_context ();
volume_style_context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
volume_style_context.add_class ("volume-icon");

var mic_icon = new Gtk.Spinner ();
mic_icon.margin_end = 18;

Expand Down