mirror of
https://github.com/IrosTheBeggar/mStream.git
synced 2025-10-27 07:31:02 +00:00
replay gain
This commit is contained in:
IrosTheBeggar
parent
05f4a8d66b
commit
07cbb19c43
@ -242,8 +242,14 @@
|
||||
<div class="col s12 m8 l9">
|
||||
<div class="card data-card hide-on-small-only">
|
||||
<div class="card-content">
|
||||
<p><b>Title:</b> {{ (meta.title) ? meta.title : '' }}</p>
|
||||
<p><b>Artist:</b> {{ (meta.artist) ? meta.artist : '' }}</p>
|
||||
<p>
|
||||
<b>Title:</b>
|
||||
<span class="pointer" v-on:click="goToArtist">{{ (meta.title) ? meta.title : '' }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<b>Artist:</b>
|
||||
<span class="pointer" v-on:click="goToAlbum">{{ (meta.artist) ? meta.artist : '' }}</span>
|
||||
</p>
|
||||
<p><b>Album:</b> {{ (meta.album) ? meta.album : '' }}</p>
|
||||
<p><b>Year:</b> {{ (meta.year) ? meta.year : '' }}</p>
|
||||
</div>
|
||||
@ -256,11 +262,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="left button-block-1">
|
||||
<svg v-on:click="toggleAutoDJ" v-bind:class="{ 'aux-button-active': playerStats.autoDJ }" class="center" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" style="width:25px;webkit-logical-width:25px;webkit-logical-height:25px;user-select:none;transform-origin:12.5px 12.5px;r:0;perspective-origin:12.5px 12.5px;overflow-y:hidden;overflow-x:hidden;inline-size:25px;height:25px;d:none;block-size:25px;background:0% 0%/auto padding-box border-box" overflow="hidden" display="block" ><g transform="translate(-.938 19.85)" style="y:0;user-select:none;transform:matrix(1,0,0,1,-.9375,19.85);perspective-origin:0 0"><g class="ld" style="y:0;x:0;user-select:none;transform-origin:7.9375px 0;transform:none;r:0;perspective-origin:0 0;line-height:31.4286px;font:400 22px/31.4286px 'Varela Round','century gothic',verdana;d:none"><text style="y:0;user-select:none;r:0;perspective-origin:7.9375px 0;line-height:31.4286px;font:400 22px/31.4286px Arial" white-space="nowrap" display="block">D</text></g></g><g transform="translate(14.938 19.85)" style="y:0;user-select:none;transform:matrix(1,0,0,1,14.9375,19.85);perspective-origin:0 0"><g class="ld" style="y:0;x:0;user-select:none;transform-origin:5.5px 0;transform:none;r:0;perspective-origin:0 0;line-height:31.4286px;font:400 22px/31.4286px 'Varela Round','century gothic',verdana;d:none"><text style="y:0;user-select:none;r:0;perspective-origin:5.5px 0;line-height:31.4286px;font:400 22px/31.4286px Arial" white-space="nowrap" display="block">J</text></g></g></svg>
|
||||
<svg class="pointer margin-lr" v-on:click="toggleRepeat" v-bind:class="{ 'aux-button-active': playerStats.shouldLoop }" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" width="25" height="25"><path d="M17 2v3H6C4.3 5 3 6.3 3 8v6.813l2-1.626V8c0-.6.4-1 1-1h11v3l5-4-5-4zm4 7.188l-2 1.624V16c0 .6-.4 1-1 1H7v-3l-5 4 5 4v-3h11c1.7 0 3-1.3 3-3V9.187z"/></svg>
|
||||
<svg class="pointer margin-lr" v-on:click="toggleShuffle" v-bind:class="{ 'aux-button-active': playerStats.shuffle }" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" width="25" height="25"><path d="M17 2v3h-2.813c-1.1 0-2.187.588-2.687 1.688L6.594 16.5c-.1.3-.482.5-.782.5H2v2h3.813c1.1 0 2.187-.587 2.687-1.688L13.406 7.5c.1-.3.481-.5.781-.5H17v3l5-4-5-4zM2 5v2h3.813c.3 0 .675.194.875.594l1.718 3.312L9.5 8.687l-1-2C7.9 5.588 6.912 5 5.812 5H2zm9.594 8.094L10.5 15.313l1 2c.5 1 1.488 1.687 2.688 1.687H17v3l5-4-5-4v3h-2.813c-.3 0-.675-.194-.874-.594l-1.72-3.312z"/></svg>
|
||||
<svg class="auto-dj" v-on:click="toggleAutoDJ" v-bind:class="{ 'aux-button-active': playerStats.autoDJ }" class="center" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" style="width:25px;webkit-logical-width:25px;webkit-logical-height:25px;user-select:none;transform-origin:12.5px 12.5px;r:0;perspective-origin:12.5px 12.5px;overflow-y:hidden;overflow-x:hidden;inline-size:25px;height:25px;d:none;block-size:25px;background:0% 0%/auto padding-box border-box" overflow="hidden" display="block" ><g transform="translate(-.938 19.85)" style="y:0;user-select:none;transform:matrix(1,0,0,1,-.9375,19.85);perspective-origin:0 0"><g class="ld" style="y:0;x:0;user-select:none;transform-origin:7.9375px 0;transform:none;r:0;perspective-origin:0 0;line-height:31.4286px;font:400 22px/31.4286px 'Varela Round','century gothic',verdana;d:none"><text style="y:0;user-select:none;r:0;perspective-origin:7.9375px 0;line-height:31.4286px;font:400 22px/31.4286px Arial" white-space="nowrap" display="block">D</text></g></g><g transform="translate(14.938 19.85)" style="y:0;user-select:none;transform:matrix(1,0,0,1,14.9375,19.85);perspective-origin:0 0"><g class="ld" style="y:0;x:0;user-select:none;transform-origin:5.5px 0;transform:none;r:0;perspective-origin:0 0;line-height:31.4286px;font:400 22px/31.4286px 'Varela Round','century gothic',verdana;d:none"><text style="y:0;user-select:none;r:0;perspective-origin:5.5px 0;line-height:31.4286px;font:400 22px/31.4286px Arial" white-space="nowrap" display="block">J</text></g></g></svg>
|
||||
</div>
|
||||
<div class="right button-block-1">
|
||||
<div v-on:click="toggleReplayGain" title="ReplayGain" class="rpg">
|
||||
<div v-show="replayGainToggle === true" id="rg-pregain-info">{{playerStats.replayGainPreGainDb}}db</div>
|
||||
<svg v-show="replayGainToggle === false" id="rg-status" v-bind:class="{ 'aux-button-active': playerStats.replayGain }" class="center" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" style="width:35px;webkit-logical-width:35px;webkit-logical-height:25px;user-select:none;transform-origin:12.5px 12.5px;r:0;perspective-origin:12.5px 12.5px;overflow-y:hidden;overflow-x:hidden;inline-size:35px;height:25px;d:none;block-size:25px;background:0% 0%/auto padding-box border-box" overflow="hidden" display="block" fill="#fff"><g transform="translate(-.938 19.85)" style="y:0;user-select:none;transform:matrix(1,0,0,1,-.9375,19.85);perspective-origin:0 0"><g class="ld" style="y:0;x:0;user-select:none;transform-origin:7.9375px 0;transform:none;r:0;perspective-origin:0 0;line-height:31.4286px;font:400 22px/31.4286px 'Varela Round','century gothic',verdana;d:none"><text style="y:0;user-select:none;r:0;perspective-origin:7.9375px 0;line-height:31.4286px;font:400 22px/31.4286px Arial" white-space="nowrap" display="block">R</text></g></g><g transform="translate(14.938 19.85)" style="y:0;user-select:none;transform:matrix(1,0,0,1,14.9375,19.85);perspective-origin:0 0"><g class="ld" style="y:0;x:0;user-select:none;transform-origin:5.5px 0;transform:none;r:0;perspective-origin:0 0;line-height:31.4286px;font:400 22px/31.4286px 'Varela Round','century gothic',verdana;d:none"><text style="y:0;user-select:none;r:0;perspective-origin:5.5px 0;line-height:31.4286px;font:400 22px/31.4286px Arial" white-space="nowrap" display="block">G</text></g></g></svg>
|
||||
</div>
|
||||
|
||||
<svg v-if="playerStats.volume === 0" class="pointer margin-lr" v-on:click="toggleMute" xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 24 24" width="25"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 9v6h4l5 5V4l-5 5H7z"/></svg>
|
||||
<svg v-else-if="playerStats.volume < 50" class="pointer margin-lr" v-on:click="toggleMute" xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 24 24" width="25"><path d="M0 0h24v24H0z" fill="none"/><path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/></svg>
|
||||
<svg v-else class="pointer margin-lr" v-on:click="toggleMute" xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 24 24" width="25"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
|
||||
|
||||
@ -476,5 +476,45 @@ function downloadFileplaylist(el) {
|
||||
document.getElementById('downform').innerHTML = '';
|
||||
}
|
||||
|
||||
function getArtistz(el) {
|
||||
const artist = el.getAttribute('data-artist');
|
||||
programState.push({
|
||||
state: 'artist',
|
||||
name: artist,
|
||||
previousScroll: document.getElementById('filelist').scrollTop,
|
||||
// previousSearch: document.getElementById('search_folders').value
|
||||
});
|
||||
|
||||
getArtistsAlbums(artist)
|
||||
}
|
||||
|
||||
async function getArtistsAlbums(artist, cb) {
|
||||
setBrowserRootPanel(false, 'Albums',);
|
||||
// document.getElementById('directoryName').innerHTML = 'Artist: ' + artist;
|
||||
document.getElementById('filelist').innerHTML = getLoadingSvg();
|
||||
|
||||
try {
|
||||
const response = await MSTREAMAPI.artistAlbums(artist);
|
||||
let albums = '';
|
||||
response.albums.forEach(value => {
|
||||
const albumString = value.name ? value.name : 'SINGLES';
|
||||
// 'value.name === null ? artist : null' is some clever shit that only passes in artist info when the album is null
|
||||
// This is so we get the singles for this artist
|
||||
// If the album is specified, we don't want to limit by artist
|
||||
albums += renderAlbum(value.name, value.name === null ? artist : null, albumString, value.album_art_file, value.year);
|
||||
currentBrowsingList.push({ type: 'album', name: value.name, artist: artist, album_art_file: value.album_art_file })
|
||||
});
|
||||
|
||||
document.getElementById('filelist').innerHTML = albums;
|
||||
|
||||
// update lazy load plugin
|
||||
// ll.update();
|
||||
}catch (err) {
|
||||
document.getElementById('filelist').innerHTML = '<div>Server call failed</div>';
|
||||
return boilerplateFailure(err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
loadFileExplorer();
|
||||
init();
|
||||
@ -452,7 +452,7 @@ body {
|
||||
|
||||
.button-block-1 {
|
||||
margin-top: 8px;
|
||||
width: 160px;
|
||||
width: 180px;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
@ -679,4 +679,27 @@ body {
|
||||
|
||||
.fixed-action-btn {
|
||||
z-index: 4000 !important;
|
||||
}
|
||||
|
||||
#rg-pregain-info {
|
||||
font-weight: 800;
|
||||
font-size: 16px;
|
||||
font-family: 'Jura', sans-serif;
|
||||
width: 34px;
|
||||
transition: opacity 0.25s;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#rg-status {
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.rpg {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.auto-dj {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
@ -247,7 +247,6 @@ const VUEPLAYERCORE = (() => {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
new Vue({
|
||||
el: '#mstream-player',
|
||||
data: {
|
||||
@ -256,6 +255,19 @@ const VUEPLAYERCORE = (() => {
|
||||
positionCache: MSTREAMPLAYER.positionCache,
|
||||
meta: MSTREAMPLAYER.playerStats.metadata,
|
||||
lastVol: 100,
|
||||
replayGainToggle: false
|
||||
},
|
||||
created: function () {
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
const localVol = localStorage.getItem("volume");
|
||||
if (localVol !== null && !isNaN(localVol)) {
|
||||
MSTREAMPLAYER.changeVolume(parseInt(localVol));
|
||||
}
|
||||
MSTREAMPLAYER.setReplayGainActive(localStorage.getItem("replayGain") == "true");
|
||||
|
||||
const rgPregain = Number(localStorage.getItem("replayGainPreGainDb"));
|
||||
MSTREAMPLAYER.setReplayGainPreGainDb(rgPregain === NaN ? 0 : rgPregain);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentTime: function() {
|
||||
@ -300,6 +312,9 @@ const VUEPLAYERCORE = (() => {
|
||||
let percentage = (x / rect.width) * 100;
|
||||
if (percentage > 100) { percentage = 100; } // It's possible to 'drag' the progress bar to get over 100 percent
|
||||
MSTREAMPLAYER.changeVolume(percentage);
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
localStorage.setItem("volume", percentage);
|
||||
}
|
||||
},
|
||||
seekTo: function(event) {
|
||||
const rect = this.$refs.progressWrapper.getBoundingClientRect();
|
||||
@ -325,6 +340,17 @@ const VUEPLAYERCORE = (() => {
|
||||
toggleAutoDJ: function () {
|
||||
MSTREAMPLAYER.toggleAutoDJ();
|
||||
},
|
||||
goToArtist: function() {
|
||||
const el = document.createElement('DIV');
|
||||
el.setAttribute('data-artist', this.meta.artist);
|
||||
getArtistz(el);
|
||||
},
|
||||
goToAlbum: function() {
|
||||
const el = document.createElement('DIV');
|
||||
el.setAttribute('data-album', this.meta.album);
|
||||
el.setAttribute('data-year', this.meta.year);
|
||||
getAlbumsOnClick(el);
|
||||
},
|
||||
toggleMute: function () {
|
||||
if (this.playerStats.volume === 0) {
|
||||
MSTREAMPLAYER.changeVolume(this.lastVol);
|
||||
@ -332,7 +358,43 @@ const VUEPLAYERCORE = (() => {
|
||||
this.lastVol = this.playerStats.volume;
|
||||
MSTREAMPLAYER.changeVolume(0);
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleReplayGain: function () {
|
||||
// With a series of clicks, allow the user to first activate ReplayGain, then progress through a list of
|
||||
// settings for the desired level of pre-gain, and then finally disable ReplayGain again.
|
||||
if (replayGainInfoTimeout) { clearTimeout(replayGainInfoTimeout); }
|
||||
|
||||
var pregainInfoElement = document.getElementById('rg-pregain-info')
|
||||
var rgStatusElement = document.getElementById('rg-status')
|
||||
|
||||
if (!this.playerStats.replayGain) {
|
||||
MSTREAMPLAYER.setReplayGainPreGainDb(replayGainPreGainSettings[0]);
|
||||
MSTREAMPLAYER.setReplayGainActive(true);
|
||||
} else {
|
||||
const settingsIdx = replayGainPreGainSettings.indexOf(this.playerStats.replayGainPreGainDb);
|
||||
if (settingsIdx == -1 || settingsIdx >= replayGainPreGainSettings.length - 1) {
|
||||
MSTREAMPLAYER.setReplayGainActive(false);
|
||||
// pregainInfoElement.style.opacity = "0.0";
|
||||
// rgStatusElement.style.opacity = "1.0";
|
||||
this.replayGainToggle = false;
|
||||
} else {
|
||||
MSTREAMPLAYER.setReplayGainPreGainDb(replayGainPreGainSettings[settingsIdx + 1]);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.playerStats.replayGain) {
|
||||
this.replayGainToggle = true;
|
||||
|
||||
replayGainInfoTimeout = setTimeout(() => {
|
||||
this.replayGainToggle = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
localStorage.setItem("replayGain", this.playerStats.replayGain);
|
||||
localStorage.setItem("replayGainPreGainDb", this.playerStats.replayGainPreGainDb);
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user