Mercurial > libervia-templates

view sat_templates/templates/bulma/components/media_player.html @ 400:140690a18b63

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
call: group call design: Design for group call (which is used for both group call and A/V conferences) has been improved to: - have a working fullscreen button; - have a better display of peer users in grid, with responsive design; - have a nicer design for peer user, and adding avatar/nickname as overlay on the bottom of the video stream; - add a way to (un)pin a peer user, which make is appear on the whole width on top of the grid. rel 448 HG<S-Insert>: changed sat_templates/templates/bulma/call/group_peer.html
author Goffi <goffi@goffi.org>
date Tue, 06 Aug 2024 23:50:17 +0200
parents 742c59641bf5
children
line wrap: on
line source

<div class="media_player">
    <div class="media_elt"></div>
    <div class="media_overlay_play is-flex has-items-centered">
        <span class="icon">
            <i class="icon-play-circled"></i>
        </span>
    </div>
    <div class="media_controls columns is-mobile has-items-vcentered">
        <div class="column is-narrow click_to_play">
            <span class="icon is-medium">
                <i class="icon-play media_play is-size-4"></i>
                <i class="icon-pause media_pause is-size-4"></i>
            </span>
        </div>
        <div class="column">
            <progress class="progress" value="0"></progress>
        </div>
        <div class="column is-narrow click_to_change_timer_mode">
            <div class="content timer">
                0:00/0:00
            </div>
        </div>
        <div class="column is-narrow click_to_change_volume">
            <span class="icon is-medium">
                <i class="icon-volume-up media_sound_on is-size-4"></i>
                <i class="icon-volume-off media_sound_off is-size-4"></i>
            </span>
        </div>
        <div class="column is-narrow click_to_fullscreen">
            <span class="icon is-medium">
                <i class="icon-resize-full media_resize_full is-size-4"></i>
                <i class="icon-resize-small media_resize_small is-size-4"></i>
            </span>
        </div>
    </div>
</div>