Still converting to bootstrap 5. Updated media player
This commit is contained in:
+22
-23
@@ -6,36 +6,35 @@
|
||||
<audio id="lms-mp-audio">
|
||||
</audio>
|
||||
<div class="container">
|
||||
<div class="Lms-player-seek-container">
|
||||
<div class="p-1 my-1 position-relative">
|
||||
<input id="lms-mp-seek" class="Lms-player-seek-common Lms-player-seek" type="range" min="0" max="100" step="1" value="0"/>
|
||||
<div class="progress Lms-player-seek-common Lms-player-progress">
|
||||
<div id="lms-mp-progress" class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
|
||||
</div>
|
||||
<div class="progress Lms-player-seek-common bg-secondary rounded">
|
||||
<div id="lms-mp-progress" class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-5 col-sm-3 col-md-2 Lms-player-controls">
|
||||
<i id="lms-mp-previous" class="fa fa-fw fa-step-backward Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-playpause" class="fa fa-fw fa-play Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-next" class="fa fa-fw fa-step-forward Lms-player-btn Lms-btn Lms-player-btn-controls"></i>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="d-inline-flex me-2">
|
||||
<button id="lms-mp-previous" class="btn btn-outline-primary border-0 d-none d-sm-block">
|
||||
<i class="fa fa-fw fa-step-backward"/>
|
||||
</button>
|
||||
<button id="lms-mp-playpause" class="btn btn-outline-primary border-0">
|
||||
<i class="fa fa-fw fa-play"/>
|
||||
</button>
|
||||
<button id="lms-mp-next" class="btn btn-outline-primary border-0">
|
||||
<i class="fa fa-fw fa-step-forward"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden-xs hidden-sm col-md-2">
|
||||
<div class="Lms-player-volume">
|
||||
<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-btn Lms-player-btn-volume"></i>
|
||||
<span class="Lms-player-volume-slider-container">
|
||||
<input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8" class="Lms-player-volume-slider"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-none d-md-block">
|
||||
<i id="lms-mp-volume" class="fa fa-fw fa-volume-up"></i>
|
||||
<input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8"/>
|
||||
</div>
|
||||
<div class="col-xs-7 col-sm-7 col-md-6">
|
||||
<div class="Lms-player-text-center">
|
||||
${title class="Lms-player-text Lms-trackname text-primary"}
|
||||
</div>
|
||||
<div class="Lms-player-text-center">
|
||||
${release class="Lms-btn Lms-player-text Lms-releasename text-primary"}<span class="hidden-xs"><small>${artist class="Lms-btn Lms-player-text Lms-artistname text-muted"}</small></span>
|
||||
</div>
|
||||
<div class="flex-fill text-center text-truncate">
|
||||
${title class="d-block text-truncate"}
|
||||
${release class="text-decoration-none text-truncate link-success"}
|
||||
</div>
|
||||
<div class="hidden-xs col-sm-2 col-md-2 Lms-player-duration text-muted">
|
||||
<span id="lms-transcoding-active" class="Lms-player-btn Lms-btn" data-toggle="tooltip" title="${tr:Lms.Player.transcoding-active}" style="visibility:hidden"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></span>
|
||||
<div class="d-none d-sm-block text-muted text-nowrap">
|
||||
<span id="lms-transcoding-active" title="${tr:Lms.Player.transcoding-active}" style="visibility:hidden"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></span>
|
||||
<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,17 +9,17 @@
|
||||
|
||||
<message id="Lms.PlayQueue.template">
|
||||
<div class="mb-3">
|
||||
<div class="d-inline-block me-2" data-toggle="tooltip" title="${tr:Lms.PlayQueue.clear}">
|
||||
<div class="d-inline-block me-2" title="${tr:Lms.PlayQueue.clear}">
|
||||
${clear-btn class="btn btn-secondary"}
|
||||
</div>
|
||||
<div class="d-inline-block me-2" data-toggle="tooltip" title="${tr:Lms.PlayQueue.shuffle}">
|
||||
<div class="d-inline-block me-2" title="${tr:Lms.PlayQueue.shuffle}">
|
||||
${shuffle-btn class="btn btn-secondary"}
|
||||
</div>
|
||||
<div class="btn-group me-2">
|
||||
${repeat-btn class="btn-check"}
|
||||
<label class="btn btn-outline-info" data-toggle="tooltip" title="${tr:Lms.PlayQueue.repeat}" for="${id:repeat-btn}">${tr:Lms.PlayQueue.template.repeat-btn}</label>
|
||||
<label class="btn btn-outline-info" title="${tr:Lms.PlayQueue.repeat}" for="${id:repeat-btn}">${tr:Lms.PlayQueue.template.repeat-btn}</label>
|
||||
${radio-btn class="btn-check"}
|
||||
<label class="btn btn-outline-info" data-toggle="tooltip" title="${tr:Lms.PlayQueue.radio-mode}" for="${id:radio-btn}">${tr:Lms.PlayQueue.template.radio-btn}</label>
|
||||
<label class="btn btn-outline-info" title="${tr:Lms.PlayQueue.radio-mode}" for="${id:radio-btn}">${tr:Lms.PlayQueue.template.radio-btn}</label>
|
||||
</div>
|
||||
${nb-tracks}
|
||||
</div>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
</div>
|
||||
${</if-has-old-password>}
|
||||
<div class="col-lg-6">
|
||||
<label class="col-lg-3 control-label" for="${id:password}">
|
||||
<label class="form-label" for="${id:password}">
|
||||
${tr:Lms.password-new}
|
||||
</label>
|
||||
${password class="form-control"}
|
||||
@@ -158,7 +158,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<label class="col-lg-3 control-label" for="${id:password-confirm}">
|
||||
<label class="form-label" for="${id:password-confirm}">
|
||||
${tr:Lms.password-confirm}
|
||||
</label>
|
||||
${password-confirm class="form-control"}
|
||||
|
||||
Reference in New Issue
Block a user