SeekBar

This widget is a playback statusbar that contains a Gtk.Scale widget and two labels displaying the current progression and the total duration.

Granite.SeekBar will get the style class .seek-bar

Example

public class SeekBarView : Gtk.Grid {
    private Gtk.Popover preview_popover;
    private Gtk.Label preview_label;

    public SeekBarView () {
        Object (valign: Gtk.Align.CENTER,
                margin: 24);
    }

    construct {
        preview_popover = new Gtk.Popover (this);
        preview_popover.can_focus = false;
        preview_popover.sensitive = false;
        preview_popover.modal = false;
        preview_popover.valign = Gtk.Align.CENTER;

        preview_label = new Gtk.Label ("");
        preview_label.margin = 5;
        preview_popover.add (preview_label);
        preview_popover.show_all ();
        preview_popover.set_visible (false);

        var seek_bar = new Granite.SeekBar (100);

        preview_popover.relative_to = seek_bar.scale;

        seek_bar.scale.motion_notify_event.connect ((event) => {
            update_pointing ((int) event.x);
            if (!seek_bar.is_grabbing) {
                var duration_decimal = (event.x / ((double) event.window.get_width ()));
                var duration_mins = Granite.DateTime.seconds_to_time ((int) (duration_decimal * seek_bar.playback_duration));
                preview_label.label = duration_mins.to_string ();
            }
            return false;
        });

        seek_bar.scale.enter_notify_event.connect (() => {
            preview_popover.set_visible (true);
            return false;
        });

        seek_bar.scale.leave_notify_event.connect (() => {
            preview_popover.set_visible (false);
            return false;
        });

        seek_bar.scale.button_press_event.connect (() => {
            preview_label.margin = 10;
            return false;
        });

        seek_bar.scale.button_release_event.connect (() => {
            preview_label.margin = 5;
            return false;
        });

        seek_bar.scale.change_value.connect ((scroll, new_value) => {
            if (new_value >= 0.0 && new_value <= 1.0) {
                var duration_mins = Granite.DateTime.seconds_to_time ((int) (new_value * seek_bar.playback_duration));
                preview_label.label = duration_mins.to_string ();
            }
            return false;
        });

        add (seek_bar);

        int progress = 0;
        Timeout.add (500, () => {
            if (seek_bar.is_grabbing) {
                return true;
            }

            if (progress >= 10) {
                progress = 0;
                seek_bar.playback_progress = 0.0;
            } else {
                progress += 1;
                seek_bar.playback_progress = progress / 10.0;
            }
            return true;
        });
    }

    private void update_pointing (int x) {
        var pointing = preview_popover.pointing_to;
        pointing.x = x;

        // changing the width properly updates arrow position when popover hits the edge
        if (pointing.width == 0) {
            pointing.width = 2;
            pointing.x -= 1;
        } else {
            pointing.width = 0;
        }

        preview_popover.set_pointing_to (pointing);
    }
}