feat(legacy): visual cue point editor (#2947)
A visual cue point editor in the track editor view. This view displays the track as a waveform and allows you to set where the in- and out-cue points are set. These cue points determine the start and end points of the track. --------- Co-authored-by: Thomas Göttgens <tgoettgens@mail.com> Co-authored-by: Kyle Robbertze <paddatrapper@users.noreply.github.com>
This commit is contained in:
Thomas Göttgens
GitHub
parent
71b20ae3c9
commit
da02e74f21
20 changed files with 9420 additions and 43 deletions
|
|
@ -1,39 +1,186 @@
|
|||
<?php $get_artwork = FileDataHelper::getArtworkData($this->artwork, 256); ?>
|
||||
<?php $get_artwork = FileDataHelper::getArtworkData($this->artwork, 256);
|
||||
|
||||
$baseUrl = Config::getBasePath();
|
||||
|
||||
$get_replay_gain = Application_Model_Preference::getReplayGainModifier();
|
||||
if (!Application_Model_Preference::GetEnableReplayGain() ) {
|
||||
$get_replay_gain = 0;
|
||||
}
|
||||
$analogMeter = true;
|
||||
?>
|
||||
<div class="ui-widget ui-widget-content block-shadow simple-formblock clearfix padded-strong edit-md-dialog">
|
||||
<div class="track-edit-header" style="top:15px">
|
||||
<?php if ($this->permissionDenied) { ?> <h3><?php echo _("You do not have permission to edit this track.") ?></h3> <?php } ?>
|
||||
<?php
|
||||
/*
|
||||
if ($this->permissionDenied) {
|
||||
echo(_("Viewing "));
|
||||
} else {
|
||||
echo(_("Editing "));
|
||||
} */
|
||||
?>
|
||||
<div class="track-edit-right-wrapper">
|
||||
<div class="track-edit-right">
|
||||
<div class="inner_track_editor_title" style="width: 100%;">
|
||||
<h2 style="line-height: 26px !important;"><span class="title_obj_name"><?php echo ($this->title); ?></span></h2>
|
||||
<h3 style="line-height: 2px !important;"><span class=""><?php echo ($this->artist_name); ?></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="track-edit-left">
|
||||
<div class="artwork-upload" data-id="<?php echo ($this->id); ?>">
|
||||
<div class="artwork-edit">
|
||||
<input type='file' class="artworkUpload artwork-uploaded-<?php echo ($this->id); ?>" id="artworkUpload-<?php echo ($this->id); ?>" data-id="<?php echo ($this->id); ?>" accept=".png, .jpg, .jpeg" />
|
||||
<label for="artworkUpload-<?php echo ($this->id); ?>"></label>
|
||||
</div>
|
||||
<div id="artwork-preview" class="artwork-preview">
|
||||
<div class="artwork-preview-<?php echo ($this->id); ?>" id="artworkPreview" style="background-image: url(<?php echo $get_artwork; ?>);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="delete-artwork" data-id="<?php echo ($this->id); ?>" style="font-size: 11px;">Remove</a>
|
||||
<div class="track-edit-header" style="top:15px">
|
||||
<?php if ($this->permissionDenied) { ?> <h3><?php echo _("You do not have permission to edit this track.") ?></h3> <?php } ?>
|
||||
<?php
|
||||
/*
|
||||
if ($this->permissionDenied) {
|
||||
echo(_("Viewing "));
|
||||
} else {
|
||||
echo(_("Editing "));
|
||||
} */
|
||||
?>
|
||||
<div class="track-edit-right-wrapper">
|
||||
<div class="track-edit-right">
|
||||
<div class="inner_track_editor_title" style="width: 100%;">
|
||||
<h2 style="line-height: 26px !important;"><span class="title_obj_name"><?php echo ($this->title); ?></span></h2>
|
||||
<h3 style="line-height: 2px !important;"><span class=""><?php echo ($this->artist_name); ?></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 160px;"></div>
|
||||
<?php echo $this->form; ?>
|
||||
<div class="track-edit-left">
|
||||
<div class="artwork-upload" data-id="<?php echo ($this->id); ?>">
|
||||
<div class="artwork-edit">
|
||||
<input type='file' class="artworkUpload artwork-uploaded-<?php echo ($this->id); ?>" id="artworkUpload-<?php echo ($this->id); ?>" data-id="<?php echo ($this->id); ?>" accept=".png, .jpg, .jpeg" />
|
||||
<label for="artworkUpload-<?php echo ($this->id); ?>"></label>
|
||||
</div>
|
||||
<div id="artwork-preview" class="artwork-preview">
|
||||
<div class="artwork-preview-<?php echo ($this->id); ?>" id="artworkPreview" style="background-image: url(<?php echo $get_artwork; ?>);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="delete-artwork" data-id="<?php echo ($this->id); ?>" style="font-size: 11px;">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 160px;"></div>
|
||||
<?php echo $this->form; ?>
|
||||
<div class="collapsible-header closed"><span class="arrow-icon"></span><?php echo _("Visual Waveform Editor"); ?></div>
|
||||
<div class="visual-waveform-editor" style="clear:both;padding:18px 24px 0 0;">
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<div class="col-sm-7">
|
||||
<div class="btn-toolbar track-toolbar">
|
||||
<div class="btn-group" title="Play Controls">
|
||||
<button class="btn btn-control-player btn-new control-play-btn" id="track-play-<?php echo $this->id; ?>" onClick="wavesurfer['t<?php echo $this->id; ?>'].playPause();" style="background-color:#555555; border-top-left-radius: 5px; border-bottom-left-radius: 5px;">
|
||||
<i class="icon-white icon-play"></i>
|
||||
</button>
|
||||
<button class="btn btn-control-player btn-new control-playedit-btn" id="track-playedit-<?php echo $this->id; ?>" onClick="" style="background-color:#555555; border-top-right-radius: 5px; border-bottom-right-radius: 5px">
|
||||
<i class="icon-white icon-step-backward"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group" title="Playhead">
|
||||
<div class="btn track-timer" style="border-radius: 5px">
|
||||
<input class="track-timer-input" id="tracktimerinput-<?php echo $this->id; ?>" val="0.000" style="font-size:15px; font-weight:500;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group" title="Cue Controls">
|
||||
<img src="<?php echo $baseUrl.'css/img/icon_cut_white.png';?>" style="top:6px;margin-right:5px;">
|
||||
<button class="btn btn-control-player btn-new" id="cuein-set-<?php echo $this->id; ?>" style="background-color:#00e640; border-top-left-radius: 5px; border-bottom-left-radius: 5px;">
|
||||
<i class="icon-white icon-chevron-right"></i>
|
||||
</button>
|
||||
<button class="btn btn-control-player btn-new" id="cueout-set-<?php echo $this->id; ?>" style="background-color:#f22613; border-top-right-radius: 5px; border-bottom-right-radius: 5px">
|
||||
<i class="icon-white icon-chevron-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group pull-right zoom-container" title="Zoom">
|
||||
<i class="icon-white icon-zoom-out" style="margin-top: -24px;"></i>
|
||||
<input id="zoom-slider-<?php echo $this->id; ?>" class="input-slider" data-height="26" data-width="120" data-action="zoom-<?php echo $this->id; ?>" type="range" min="20" max="290" data-sprites="50" data-src="<?php echo $baseUrl.'css/images/slider.png'; ?>" value="0" />
|
||||
<i class="icon-white icon-zoom-in" style="margin-top: -24px;"></i>
|
||||
</div>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="track-waveform-<?php echo $this->id; ?>"></div>
|
||||
<div id="timeline-<?php echo $this->id; ?>"></div>
|
||||
</div>
|
||||
<input type="hidden" id="volume-<?php echo $this->id; ?>" type="range" min="0" max="1" value="1" step="0.1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
//waveform
|
||||
var track_id = <?php echo $this->id; ?>;
|
||||
var selector_id = "#track-waveform-"+<?php echo $this->id; ?>;
|
||||
var url = baseUrl + 'api/get-media/file/<?php echo $this->id; ?>';
|
||||
var cuein = '<?php echo $this->cuein; ?>';
|
||||
var cueout = '<?php echo $this->cueout; ?>';
|
||||
var gain_level = deciSteps(<?php echo $this->replay_gain; ?>);
|
||||
var default_gain = <?php echo $get_replay_gain; ?>;
|
||||
var eTrack = renderWaveform(track_id, selector_id, url, cuein, cueout, gain_level, default_gain);
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
$(".collapsible-header")
|
||||
.off("click")
|
||||
.on("click", function () {
|
||||
$(this).toggleClass("visible");
|
||||
$(".visual-waveform-editor").toggle();
|
||||
$(".editor_pane_wrapper").animate({
|
||||
scrollTop: $(".collapsible-header").offset().top * 2
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// Counter field edit
|
||||
$(document).on('change', '#tracktimerinput-<?php echo $this->id; ?>', 'input', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var val = $(this).val();
|
||||
eTrack.setCurrentTime(val);
|
||||
}).on('keypress keydown', '#tracktimerinput-<?php echo $this->id; ?>', 'input', function(event) {
|
||||
if (event.key === 'Enter' || event.keyCode === 13 || event.keyCode === 10) {
|
||||
var val = $(this).val();
|
||||
eTrack.setCurrentTime(val);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.stopImmediatePropagation();
|
||||
return false;
|
||||
}
|
||||
})
|
||||
|
||||
//Gain Knob
|
||||
$("#volume-<?php echo $this->id; ?>").val(deciSteps(<?php echo $this->replay_gain; ?>));
|
||||
|
||||
$(document).on('change', '.cuein_<?php echo $this->id; ?>', 'input', function(event) {
|
||||
console.log('cuein input');
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var val = $(this).val();
|
||||
var a = val.split(':');
|
||||
var startseconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
|
||||
console.log(startseconds);
|
||||
var region = eTrack.regions.list[track_id];
|
||||
region.update({start: startseconds});
|
||||
$('#track-playedit-'+track_id).attr('onClick', 'wavesurfer["t'+ track_id +'"].play('+ region.start +', '+ region.end +');');
|
||||
});
|
||||
|
||||
$(document).on('change', '.cueout_<?php echo $this->id; ?>', 'input', function(event) {
|
||||
console.log('cueout input');
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var val = $(this).val();
|
||||
var b = val.split(':');
|
||||
var endseconds = (+b[0]) * 60 * 60 + (+b[1]) * 60 + (+b[2]);
|
||||
var region = eTrack.regions.list[track_id];
|
||||
region.update({end: endseconds});
|
||||
$('#track-playedit-'+track_id).attr('onClick', 'wavesurfer["t'+ track_id +'"].play('+ region.start +', '+ region.end +');');
|
||||
});
|
||||
|
||||
$(document).on('click', '#cuein-set-<?php echo $this->id; ?>', 'button', function(event) {
|
||||
console.log('cuein button');
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var val = eTrack.getCurrentTime();
|
||||
var region = eTrack.regions.list[track_id];
|
||||
region.update({start: val});
|
||||
document.getElementsByClassName("cuein_"+track_id)[0].value = toHHMMSS(region.start);
|
||||
$('#track-playedit-'+track_id).attr('onClick', 'wavesurfer["t'+ track_id +'"].play('+ region.start +', '+ region.end +');');
|
||||
});
|
||||
|
||||
$(document).on('click', '#cueout-set-<?php echo $this->id; ?>', 'button', function(event) {
|
||||
console.log('cueout button')
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var val = eTrack.getCurrentTime();
|
||||
var region = eTrack.regions.list[track_id];
|
||||
region.update({end: val});
|
||||
document.getElementsByClassName("cueout_"+track_id)[0].value = toHHMMSS(region.end);
|
||||
$('#track-playedit-'+track_id).attr('onClick', 'wavesurfer["t'+ track_id +'"].play('+ region.start +', '+ region.end +');');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue