fergalmoran/dss.web
1
0
Fork 0
mirror of https://github.com/fergalmoran/dss.web.git synced 2026-02-15 12:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Genres done

Browse Source
This commit is contained in:
Fergal Moran
2015-12-19 21:32:49 +00:00
parent 0784b2d1cd
commit e9cd230591
7 changed files with 184 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/app/app.js
View File

@@ -10,6 +10,7 @@ angular.module('dssWebApp', [
'angular-loading-bar',
'js-data',
'ui.bootstrap',
'ui.select',
'dialogs.main',
'infinite-scroll',
'angularFileUpload',

3
client/app/views/mixes/mixes.directive.html
View File

@@ -26,6 +26,9 @@
<div class="row">
<aside>By <a ui-sref="root.user({user: mix.user.slug})">{{mix.user.display_name}}</a></aside>
</div>
<div class="row genre-wrapper">
<span class="btn genre-btn" ng-repeat="g in mix.genres">{{g.description}}</span>
</div>
<div class="row">
<div class="btn-group mix-tools" role="group" aria-label="Default button group">
<button ng-click="shareFacebook()" type="button" class="btn"

15
client/app/views/mixes/mixes.less
View File

@@ -113,16 +113,27 @@
background-attachment: scroll;
background-size: cover;
}
.widget-image-container {
width: 74px;
height: 74px;
position: absolute!important;
position: absolute !important;
top: 50%;
left: 65%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
cursor: pointer;
}
.genre-wrapper {
margin-top: 12px;
}
.genre-btn {
margin-bottom: 1px;
margin-top: 1px;
margin-left: 1px;
margin-right: 1px;
}

337
client/app/views/mixes/upload/upload.controller.js
View File

@@ -2,204 +2,171 @@
angular.module('dssWebApp')
.controller('MixUploadCtrl',
function ($scope, $rootScope, $location, $state, $timeout, mix, dialogs, SocketService, jwtHelper,
Session, MixModel, LoginService, ImageUploadService, SERVER_CONFIG, AUTH_EVENTS) {
function ($scope, $rootScope, $location, $state, $timeout, $http, mix, dialogs, SocketService, jwtHelper,
Session, MixModel, LoginService, ImageUploadService, SERVER_CONFIG, AUTH_EVENTS) {
$scope.mix = mix;
$scope.waveformHeader = '(drag & drop or click & browse)';
$scope.waveformFooter = '';
$scope.sending = false;
var uploadStates = {
VIRGIN: 0,
AUDIO_SENDING: 1,
AUDIO_SENT: 2,
EDIT_MODE: 3
};
$scope.uploadStates = uploadStates;
var _uploadHash = generateUUID();
var processingStates = {
VIRGIN: 0,
PROCESSED: 1
};
$scope.processingStates = processingStates;
function generateUUID() {
var d = new Date().getTime();
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
}
function _checkRedirect() {
$scope.mix = mix;
$scope.waveformHeader = '(drag & drop or click & browse)';
$scope.waveformFooter = '';
$scope.sending = false;
if ($scope.detailsEntered && $scope.uploadState >= uploadStates.AUDIO_SENT &&
$scope.processingState == processingStates.PROCESSED) {
MixModel.refresh($scope.mix.slug).then(function (m) {
$state.go('root.user.mix', {user: m.user.slug, slug: m.slug});
$scope.multipleDemo = {};
$scope.multipleDemo.colors = ['Blue', 'Red'];
var uploadStates = {
VIRGIN: 0,
AUDIO_SENDING: 1,
AUDIO_SENT: 2,
EDIT_MODE: 3
};
$scope.uploadStates = uploadStates;
var _uploadHash = generateUUID();
var processingStates = {
VIRGIN: 0,
PROCESSED: 1
};
$scope.processingStates = processingStates;
function generateUUID() {
var d = new Date().getTime();
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
}
}
function _registerProcessingCallback() {
SocketService.registerHandler('user:process', function (message) {
console.log("Received user:process message: ", message);
if (message.type === 'waveform' && message.target === _uploadHash) {
$scope.waveformHeader = "Waveform generated.";
$scope.processingState = processingStates.PROCESSED;
$scope.$apply();
_checkRedirect();
}
});
}
if ($rootScope.currentUser) {
_registerProcessingCallback();
} else {
$rootScope.$on(AUTH_EVENTS.loginSuccess, function (data) {
_registerProcessingCallback();
});
}
if (!$scope.mix) {
$scope.detailsEntered = false;
$scope.mix = {
title: '',
description: '',
uid: _uploadHash,
genres: [],
is_downloadable: true,
is_featured: false,
is_private: false,
image: 'assets/images/placeholders/upload-placeholder.png'
};
$scope.uploadState = uploadStates.VIRGIN;
$scope.processingState = processingStates.VIRGIN;
} else {
$scope.detailsEntered = true;
$scope.uploadState = uploadStates.EDIT_MODE;
$scope.processingState = processingStates.PROCESSED;
_uploadHash = $scope.mix.uid;
}
$scope.saveMix = function () {
$scope.$broadcast('show-errors-check-validity');
if ($scope.uploadForm.$valid) {
$scope.sending = true;
$.each($('#genres', this.el).select2('data'), function (i, item) {
$scope.mix.genres.push({'slug': item.slug, 'description': item.description})
});
if ($scope.uploadState != uploadStates.EDIT_MODE) {
MixModel.create($scope.mix).then(function (result) {
_processResult(result);
});
} else {
MixModel.update($scope.mix.slug, $scope.mix).then(function (result) {
console.log('Updated mix', result);
_processResult(result);
function _checkRedirect() {
$scope.sending = false;
if ($scope.detailsEntered && $scope.uploadState >= uploadStates.AUDIO_SENT &&
$scope.processingState == processingStates.PROCESSED) {
MixModel.refresh($scope.mix.slug).then(function (m) {
$state.go('root.user.mix', {user: m.user.slug, slug: m.slug});
});
}
var _processResult = function (result) {
$scope.mix = result;
$timeout(function () {
$scope.waveformFooter = "Waveform processing is taking longer than expected.<br />" +
"Your mix should be available <a ui-sref='root.user.mix({user: currentUser.slug, mix: mix.slug})'>Here</a>";
}
function _registerProcessingCallback() {
SocketService.registerHandler('user:process', function (message) {
console.log("Received user:process message: ", message);
if (message.type === 'waveform' && message.target === _uploadHash) {
$scope.waveformHeader = "Waveform generated.";
$scope.processingState = processingStates.PROCESSED;
$scope.$apply();
}, 120000);
var imageFile = document.getElementById('mix-image-fileinput').files[0];
if (imageFile) {
ImageUploadService.uploadMixImage(_uploadHash, imageFile, function (result) {
$scope.detailsEntered = true;
_checkRedirect();
});
} else {
$scope.detailsEntered = true;
_checkRedirect();
}
};
});
}
if ($rootScope.currentUser) {
_registerProcessingCallback();
} else {
$scope.uploadForm.$dirty = true;
$rootScope.$on(AUTH_EVENTS.loginSuccess, function (data) {
_registerProcessingCallback();
});
}
};
//TODO: refactor dropzone out to a directive
$('#dss-file-upload').dropzone({
addRemoveLinks: true,
acceptedFiles: '.mp3',
url: SERVER_CONFIG.apiUrl + '/_upload/',
dictDefaultMessage: '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload ' +
'<span class="smaller-80 grey">(or click)</span> <br /> <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
maxFilesize: 512,
sending: function (file, xhr, formData) {
xhr.setRequestHeader('Session-Id', Session.getSession())
xhr.setRequestHeader('Upload-Hash', _uploadHash);
$scope.uploadState = uploadStates.AUDIO_SENDING;
$scope.$apply();
},
uploadprogress: function (e, progress, bytesSent) {
$scope.uploadProgress = Math.round(progress);
$scope.uploadProgressStyle = {'width': progress + '%'};
$scope.$apply();
},
complete: function (file) {
if (file.status !== 'error') {
$scope.waveformHeader = "Generating waveform.";
$scope.uploadState = uploadStates.AUDIO_SENT;
$scope.$apply();
_checkRedirect();
} else {
var dlg = dialogs.create('app/dialogs/alert/alertDialog.html', 'AlertDialogCtrl', {
title: "Error",
body: "There was an error uploading the audio file. Maybe try again later?"
if (!$scope.mix) {
$scope.detailsEntered = false;
$scope.mix = {
title: '',
description: '',
uid: _uploadHash,
genres: [],
is_downloadable: true,
is_featured: false,
is_private: false,
image: 'assets/images/placeholders/upload-placeholder.png'
};
$scope.uploadState = uploadStates.VIRGIN;
$scope.processingState = processingStates.VIRGIN;
} else {
$scope.detailsEntered = true;
$scope.uploadState = uploadStates.EDIT_MODE;
$scope.processingState = processingStates.PROCESSED;
_uploadHash = $scope.mix.uid;
}
$scope.saveMix = function () {
$scope.$broadcast('show-errors-check-validity');
if ($scope.uploadForm.$valid) {
$scope.sending = true;
/*
$.each($('#genres', this.el).select2('data'), function (i, item) {
$scope.mix.genres.push({'slug': item.slug, 'description': item.description})
});
}
}
});
$('#genres').select2({
placeholder: 'Start typing and choose from list or create your own.',
minimumInputLength: 3,
multiple: true,
ajax: {
url: SERVER_CONFIG.apiUrl + '/genre',
dataType: 'json',
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return {
results: data.results
};
}
},
id: function (genre) {
return genre.slug;
},
formatResult: function (genre) {
return genre.description;
},
formatSelection: function (genre) {
return '<div class="select2-user-result">' + genre.description + '</div>';
},
initSelection: function (_this) {
return function (element, callback) {
var genres, result;
console.log('MixEditView: genres:initSelection');
result = [];
genres = _this.model.get('genres');
if (genres !== undefined) {
genres.each(function (data) {
return result.push({
id: data.get('id'),
description: data.get('description')
});
*/
if ($scope.uploadState != uploadStates.EDIT_MODE) {
MixModel.create($scope.mix).then(function (result) {
_processResult(result);
});
} else {
MixModel.update($scope.mix.slug, $scope.mix).then(function (result) {
console.log('Updated mix', result);
_processResult(result);
});
}
return callback(result);
};
}
var _processResult = function (result) {
$scope.mix = result;
$timeout(function () {
$scope.waveformFooter = "Waveform processing is taking longer than expected.<br />" +
"Your mix should be available <a ui-sref='root.user.mix({user: currentUser.slug, mix: mix.slug})'>Here</a>";
$scope.$apply();
}, 120000);
var imageFile = document.getElementById('mix-image-fileinput').files[0];
if (imageFile) {
ImageUploadService.uploadMixImage(_uploadHash, imageFile, function (result) {
$scope.detailsEntered = true;
_checkRedirect();
});
} else {
$scope.detailsEntered = true;
_checkRedirect();
}
};
} else {
$scope.uploadForm.$dirty = true;
}
};
//TODO: refactor dropzone out to a directive
$('#dss-file-upload').dropzone({
addRemoveLinks: true,
acceptedFiles: '.mp3',
url: SERVER_CONFIG.apiUrl + '/_upload/',
dictDefaultMessage: '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload ' +
'<span class="smaller-80 grey">(or click)</span> <br /> <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
maxFilesize: 512,
sending: function (file, xhr, formData) {
xhr.setRequestHeader('Session-Id', Session.getSession())
xhr.setRequestHeader('Upload-Hash', _uploadHash);
$scope.uploadState = uploadStates.AUDIO_SENDING;
$scope.$apply();
},
uploadprogress: function (e, progress, bytesSent) {
$scope.uploadProgress = Math.round(progress);
$scope.uploadProgressStyle = {'width': progress + '%'};
$scope.$apply();
},
complete: function (file) {
if (file.status !== 'error') {
$scope.waveformHeader = "Generating waveform.";
$scope.uploadState = uploadStates.AUDIO_SENT;
$scope.$apply();
_checkRedirect();
} else {
var dlg = dialogs.create('app/dialogs/alert/alertDialog.html', 'AlertDialogCtrl', {
title: "Error",
body: "There was an error uploading the audio file. Maybe try again later?"
});
}
}
});
$scope.refreshGenres = function (search) {
$http.get(SERVER_CONFIG.apiUrl + '/genre/?q=' + search)
.then(function (results) {
$scope.genreSearchResults = results.data.results;
});
};
});
});

13
client/app/views/mixes/upload/upload.html
View File

@@ -112,10 +112,17 @@
</div>
</div>
<div id="genres-area" class="form-group">
<label for="genres" class="col-sm-3 control-label">Genres</label>
<label class="col-sm-3 control-label">Genres</label>
<div class="col-sm-6">
<input id="genres" style="width:98%" ng-model="mix.genres"/>
<ui-select multiple ng-model="mix.genres" theme="bootstrap" ng-disabled="disabled"
style="width: 300px;">
<ui-select-match placeholder="Start typing...">{{$item.description}}</ui-select-match>
<ui-select-choices repeat="genre in genreSearchResults"
refresh="refreshGenres($select.search)"
refresh-delay="0">
<div ng-bind-html="genre.description | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</div>
<div id="submit-area" class="form-group form-actions">

5
client/index.html
View File

@@ -24,6 +24,7 @@
<link rel="stylesheet" href="bower_components/angular-smilies/dist/angular-smilies.css" />
<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css" />
<link rel="stylesheet" href="bower_components/smalot-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="bower_components/ui-select/dist/select.css" />
<!-- endbower -->
<!-- endbuild -->
@@ -33,10 +34,10 @@
<link rel="stylesheet" href="assets/animations.css">
<link rel="stylesheet" href="assets/zoom/audioplayer.css">
<link rel="stylesheet" href="assets/zoom/style.css">
<link rel="stylesheet" href="assets/select2/select2.css"/>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="assets/site/css/site.css">
<link rel="stylesheet" href="assets/site/css/themes.css">
<link rel="stylesheet" href="assets/select2/select2.css">
<!-- injector:css -->
<link rel="stylesheet" href="app/components/footer/player.css">
@@ -121,6 +122,7 @@
<script src="bower_components/js-data/dist/js-data.js"></script>
<script src="bower_components/js-data-http/dist/js-data-http.js"></script>
<script src="bower_components/js-data-angular/dist/js-data-angular.js"></script>
<script src="bower_components/ui-select/dist/select.js"></script>
<!-- endbower -->
<script src="socket.io-client/socket.io.js"></script>
<!-- endbuild -->
@@ -138,7 +140,6 @@
<script src="assets/slimscroll/jquery.slimscroll.js"></script>
<script src="assets/dropzone/dropzone.js"></script>
<script src="assets/slider.js"></script>
<script src="assets/select2/select2.js"></script>
<!-- injector:js -->
<script src="app/components/chatbar/chatbar.controller.js"></script>
<script src="app/components/comments/comments.directive.js"></script>