Upload artwork using drag and drop or click to browse using track edit.

This commit is contained in:
Codenift 2019-10-25 10:30:33 -04:00
parent 7701d0f438
commit a65ab11d9f
6 changed files with 334 additions and 3 deletions

View File

@ -251,6 +251,69 @@ class FileDataHelper {
return $get_img;
}
/**
* Upload artwork
*
* @param string $trackid
* @param string $data
*
* @return string Path to artwork
*/
public static function uploadArtwork($trackid, $data)
{
$file = Application_Model_StoredFile::RecallById($trackid);
$md = $file->getMetadata();
$storDir = Application_Model_MusicDir::getStorDir();
$fp = $storDir->getDirectory();
$dbAudioPath = $md["MDATA_KEY_FILEPATH"];
$fullpath = $fp . $dbAudioPath;
$base64 = @$data;
$mime = explode(';', $base64)[0];
$audioPath = dirname($fullpath);
$dbPath = dirname($dbAudioPath);
$path_parts = pathinfo($fullpath);
$file = $path_parts['filename'];
//Save Data URI
if (file_put_contents($audioPath . "/" . $file, $base64)) {
$get_img = $dbPath . "/" . $file;
} else {
Logging::error("Could not save Data URI");
}
$rfile = $audioPath . "/" . $file;
if ($mime == "data:image/png") {
$ext = 'png';
} elseif ($mime == "data:image/gif") {
$ext = 'gif';
} elseif ($mime == "data:image/bmp") {
$ext = 'bmp';
} else {
$ext = 'jpg';
}
if (file_exists($rfile)) {
self::resizeImage($rfile, $rfile . '-32.jpg', $ext, 32, 100);
self::resizeImage($rfile, $rfile . '-64.jpg', $ext, 64, 100);
self::resizeImage($rfile, $rfile . '-128.jpg', $ext, 128, 100);
self::resizeImage($rfile, $rfile . '-256.jpg', $ext, 256, 100);
self::resizeImage($rfile, $rfile . '-512.jpg', $ext, 512, 100);
self::imgToDataURI($rfile . '-32.jpg', $rfile . '-32');
self::imgToDataURI($rfile . '-64.jpg', $rfile . '-64');
self::imgToDataURI($rfile . '-128.jpg', $rfile . '-128');
self::imgToDataURI($rfile . '-256.jpg', $rfile . '-256');
} else {
Logging::error("The file $rfile does not exist");
}
return $get_img;
}
/**
* Render image
* Used in API to render JPEG

View File

@ -400,6 +400,12 @@ class LibraryController extends Zend_Controller_Action
} else {
$serialized[$j["name"]] = $j["value"];
}
if ($j["name"] == "artwork_uploaded") {
if ($j["value"] != null || $j["value"] != ''){
$serialized["artwork"] = FileDataHelper::uploadArtwork($file_id, $j["value"] );
}
}
}
// Sanitize any wildly incorrect metadata before it goes to be validated.

View File

@ -22,13 +22,21 @@ class Application_Form_EditAudioMD extends Zend_Form
$artwork = new Zend_Form_Element_Hidden('artwork');
$artwork->setFilters(array('StringTrim'))
->setValidators(array(
new Zend_Validate_StringLength(array('max' => 512))
new Zend_Validate_StringLength(array('max' => 2048))
));
$file_id->addDecorator('HtmlTag', array('tag' => 'div', 'style' => 'display:none'));
$file_id->removeDecorator('Label');
$file_id->setAttrib('class', 'artwork');
$this->addElement($artwork);
// Add artwork uploaded hidden field
$artwork_uploaded = new Zend_Form_Element_Hidden('artwork_uploaded');
$artwork_uploaded->class = 'input_text artwork_uploaded_'. $p_id;
$file_id->addDecorator('HtmlTag', array('tag' => 'div', 'style' => 'display:none'));
$file_id->removeDecorator('Label');
$file_id->setAttrib('class', 'artwork_uploaded');
$this->addElement($artwork_uploaded);
// Add title field
$track_title = new Zend_Form_Element_Text('track_title');
$track_title->class = 'input_text';

View File

@ -19,7 +19,16 @@
</div>
</div>
<div class="track-edit-left">
<?php echo '<img width="140" height="140" src="' . $get_artwork .'">'; ?>
<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" data-id="<?php echo($this->id); ?>" accept=".png, .jpg, .jpeg" />
<label for="artworkUpload"></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>
</div>
<div style="height: 160px;"></div>

View File

@ -4284,3 +4284,94 @@ li .ui-state-hover {
.track-edit-right {
margin-left: 160px;
}
/* Artwork Upload in Tracks Edit */
.artwork-upload {
position: relative;
max-width: 205px;
}
.artwork-upload .artwork-edit {
position: absolute;
z-index: 1;
top: 0;
}
.artwork-upload .artwork-edit input {
display: none;
}
.artwork-upload .artwork-edit input + label {
display: inline-block;
width: 140px;
height: 140px;
margin: 1px;
border-radius: 1px;
border: 1px solid transparent;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
font-weight: normal;
transition: all 0.2s ease-in-out;
}
.artwork-upload .artwork-edit input + label:hover {
background: rgba(0, 0, 0, 0.40);
border-color: #d6d6d6;
}
.artwork-upload .artwork-edit input + label:after {
color: #757575;
position: absolute;
top: 10px;
left: 0;
right: 0;
text-align: center;
margin: auto;
}
.artwork-upload .artwork-preview {
width: 140px;
height: 140px;
position: relative;
border-radius: 1px;
border: 2px solid #F8F8F8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.artwork-upload .artwork-preview > div {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
/* Drag and Drop Artwork */
body.droppable .artwork-upload .artwork-preview {
border: 2px dashed lightblue;
z-index: 9999;
}
.profile {
width: 50%;
}
.profile-avatar-wrap {
width: 33.33%;
float: left;
margin: 0 20px 5px 0;
position: relative;
pointer-events: none;
border: 5px solid transparent;
}
.profile-avatar-wrap:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.profile-avatar-wrap img {
width: 100%;
display: block;
}
.location {
text-transform: uppercase;
color: #999;
letter-spacing: 1px;
margin: 0 0 10px 0;
font-size: 90%;
}

View File

@ -1601,6 +1601,70 @@ var validationTypes = {
};
function readArtworkURL(input, id) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.artwork-preview-'+id).css('background-image', 'url('+e.target.result +')');
$('.artwork-preview-'+id).hide();
$('.artwork-preview-'+id).fadeIn(500);
$('.artwork_uploaded_'+id).val(function() {
return e.target.result;
});
}
reader.readAsDataURL(input.files[0]);
}
}
// Resample Artwork
var resampleImg = (function (canvas) {
function resampleImg(img, width, height, onresample) {
var load = typeof img == "string",
i = load || img;
if (load) {
i = new Image;
i.onload = onload;
i.onerror = onerror;
}
i._onresample = onresample;
i._width = width;
i._height = height;
load ? (i.src = img) : onload.call(img);
}
function onerror() {
throw ("not found: " + this.src);
}
function onload() {
var img = this,
width = img._width,
height = img._height,
onresample = img._onresample;
var minValue = Math.min(img.height, img.width);
width == null && (width = round(img.width * height / img.height));
height == null && (height = round(img.height * width / img.width));
delete img._onresample;
delete img._width;
delete img._height;
canvas.width = width;
canvas.height = height;
context.drawImage(img,0,0,minValue,minValue,0,0,width,height);
onresample(canvas.toDataURL("image/jpeg"));
}
var context = canvas.getContext("2d"),
round = Math.round;
return resampleImg;
}(this.document.createElement("canvas")));
$(document).ready(function() {
if (window.location.href.indexOf("showbuilder") > -1) {
AIRTIME.library.initPodcastDatatable();
@ -1613,5 +1677,95 @@ $(document).ready(function() {
$(window).resize(function() {
resizeAdvancedSearch();
});
});
// image upload by clicking on the artwork container
$(document).on('change', '.artworkUpload', 'input', function(event) {
event.preventDefault();
event.stopPropagation();
var id = $(this).attr('data-id');
readArtworkURL(this, id);
});
// image upload by dragging onto the artwork container
$.event.props.push('dataTransfer');
(function() {
var s;
var Artwork = {
settings: {
body: $("body")
},
init: function() {
s = Artwork.settings;
Artwork.bindUIActions();
},
bindUIActions: function() {
var timer;
s.body.on('dragover', '.artwork-upload', function(event) {
event.preventDefault();
event.stopPropagation();
clearTimeout(timer);
Artwork.showDroppableArea();
return false;
});
s.body.on('dragleave', '.artwork-upload', function(event) {
event.preventDefault();
event.stopPropagation();
timer = setTimeout(function() {
Artwork.hideDroppableArea();
}, 200);
});
s.body.on('drop', '.artwork-upload', function(event) {
event.preventDefault();
event.stopPropagation();
var id = $(this).attr('data-id');
Artwork.handleDrop(event.dataTransfer.files, id);
});
},
showDroppableArea: function() {
s.body.addClass("droppable");
},
hideDroppableArea: function() {
s.body.removeClass("droppable");
},
handleDrop: function(files, id) {
Artwork.hideDroppableArea();
var file = files[0];
if (typeof file !== 'undefined' && file.type.match('image.*')) {
Artwork.resizeImage(file, 512, function(data) {
Artwork.placeImage(data, id);
});
} else {
alert("The file is not an image.");
}
},
resizeImage: function(file, size, callback) {
var fileTracker = new FileReader;
fileTracker.onload = function() {
resampleImg(this.result, size, size, callback);
}
fileTracker.readAsDataURL(file);
fileTracker.onabort = function() {
alert("Upload aborted!");
}
fileTracker.onerror = function() {
alert("File could not be read.");
}
},
placeImage: function(data, id) {
$('.artwork-preview-'+id).css('background-image', 'url('+ data +')');
$('.artwork-preview-'+id).hide();
$('.artwork-preview-'+id).fadeIn(500);
$('.artwork_uploaded_'+id).val(function() {
return data;
});
}
}
Artwork.init();
})();
});