Skip to content

Commit

Permalink
add custom lyrics & use api to build lyrics
Browse files Browse the repository at this point in the history
  • Loading branch information
@kkuepper
kkuepper committed Nov 15, 2024
1 parent 28fa6f2 commit 7f37482
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 25 deletions.
48 changes: 32 additions & 16 deletions admin/app/scripts/controllers/relations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ angular.module('bmmApp')
$scope.toggleRecord = function() {
$scope.recording = !$scope.recording;
};
$scope.lyricsSearch = "";
var clock = function() {
$timeout(function() {
if ($scope.recording) {
Expand Down Expand Up @@ -251,6 +252,36 @@ angular.module('bmmApp')

};

$scope.lyrics = {
searchTerm: '',
searchResults: [],
selectedTitle: null
};

$scope.$watch('lyrics.searchTerm', function(term) {
console.log("watch triggered");
if (term!=='') {
_api.lyricsSearch(term).done(function(data) {
$scope.$apply(function() {
$scope.lyrics.searchResults = data;
});
});
} else {
$scope.lyrics.searchResults = [];
}
});

$scope.activateLyrics = function(lyrics) {
console.log("activate", $scope.$parent);
$scope.$parent.model.lyrics_id = lyrics.id;
$scope.lyrics.selectedTitle = lyrics.song_title;
};

$scope.deleteLyrics = function() {
$scope.$parent.model.lyrics_id = null;
$scope.lyrics.selectedTitle = null;
}

$scope.addContributor = function(contributor) {
$scope.createContributor(contributor).then(function(data) {
$scope.$apply(function() {
Expand Down Expand Up @@ -421,18 +452,8 @@ angular.module('bmmApp')
})
.done(function(response){
if (response.result.content) {
var newLyrics = '';
for (var property in response.result.content) {
var content = response.result.content[property].content;
for(var i = 0; i < content.length; i++){
newLyrics += content[i]+'\n';
}
newLyrics += '\n';
}
$rootScope.songtreasures.lyricsStatus = 'available';
$rootScope.songtreasures.lyricsAvailable = true;
$rootScope.songtreasures.newLyrics = newLyrics;
console.log('new lyrics', $rootScope.songtreasures.newLyrics);
}
else {
$rootScope.songtreasures.lyricsStatus = 'not available';
Expand Down Expand Up @@ -515,12 +536,7 @@ angular.module('bmmApp')
});
}
if ($rootScope.songtreasures.replaceLyrics && $rootScope.songtreasures.lyricsAvailable) {
$.each($scope.$parent.model.translations, function (index, item) {
if (item.language === model.original_language) {
item.searchable_transcription = $rootScope.songtreasures.newLyrics;
console.log('replaced lyrics', item.searchable_transcription);
}
});
$scope.$parent.replaceLyrics = true;
}

$rootScope.songtreasures.loading = true;
Expand Down
25 changes: 23 additions & 2 deletions admin/app/scripts/controllers/track.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ angular.module('bmmApp')
'exegesis',
'video'
];
$scope.replaceLyrics = false;

// We have these default values hardcoded for the website as well for a nice UX
// When these have to be changed, API-PHP should be changed as well
Expand Down Expand Up @@ -102,8 +103,8 @@ angular.module('bmmApp')
cover_upload: null,
rel: [],
analytics: false,
analyticsData: {
}
analyticsData: {},
lyricsData: {}
};
return;
}
Expand Down Expand Up @@ -140,6 +141,7 @@ angular.module('bmmApp')
$scope.$apply(function() {
$scope.model = model;
findAvailableTranslations();
$scope.getLyrics();

_api.getTags().then(function(tags) {
$scope.podcastTags = tags;
Expand Down Expand Up @@ -175,6 +177,17 @@ angular.module('bmmApp')
});
};

$scope.getLyrics = function() {
if ($scope.model.lyrics_id) {
_api.getLyrics($scope.model.lyrics_id)
.done(function (response) {
$scope.lyricsData = response;
});
}
else
$scope.lyricsData = {};
};

$scope.getAnalytics();

var saveModel = function() {
Expand Down Expand Up @@ -269,12 +282,20 @@ angular.module('bmmApp')
saveModel(); //After saving the model we redirect to the newly created track so there is no need to fetchModel
} else {
saveModel().done(function() {

if ($scope.replaceLyrics)
_api.replaceLyrics($scope.model.id);

$scope.status = _init.translation.states.saveSucceedFetchingNewData;
$scope.$apply();
$scope.fetchModel().done(function(model) {
getWaitings();
$scope.$apply(function() { //Model-watcher updates status to changed
$scope.model = model;

if ($scope.lyricsData.id !== $scope.model.lyrics_id) {
$scope.getLyrics();
}
findAvailableTranslations();
$timeout(function() { //Secure that watcher is fired
$scope.status = _init.translation.states.saved; //Update status
Expand Down
23 changes: 23 additions & 0 deletions admin/app/views/pages/relations.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,29 @@ <h4>{{init.translation.page.editor.active}}</h4>
</button>
<div class="trash" style="float: right" ng-click="deleteReference($index,'songbooks')">x</div>
</li>
<br/><br/>
<h4>Custom Lyrics</h4>
<li
ng-if="$parent.model.lyrics_id"
class="no-hover"
style="width: 100%; display: inline-block">
<span>
{{lyrics.selectedTitle ? lyrics.selectedTitle : $parent.lyricsData.song_title}}
</span>
<div class="trash"
style="float: right"
ng-click="deleteLyrics()">x</div>
</li>
<li>
<input type="text" ng-model="lyrics.searchTerm" style="width: 100%">
<li ng-repeat="lyric in lyrics.searchResults"
style="width: 100%; display: inline-block"
ng-click="activateLyrics(lyric)">
<span>
{{lyric.song_title}}
</span>
</li>
</li>
</ul>
<ul style="width: 50%; float: left; padding:.5em">
<h4>{{init.translation.page.editor.available}}</h4>
Expand Down
19 changes: 12 additions & 7 deletions admin/app/views/pages/track.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,18 +301,23 @@ <h3>{{init.translation.page.editor.analytics}}</h3>
ng-controller="RelationsCtrl"
style="width: 100%;"></div>

<div class="foldbox">
<div class="foldbox" ng-if="model.subtype == 'song' || model.subtype == 'singsong'">
<div class="header" ng-click="lyrics=!lyrics">
<h3>{{model.subtype == "song" || model.subtype == "singsong" ? init.translation.page.editor.lyrics : init.translation.page.editor.transcription}}</h3>
<h3>{{ init.translation.page.editor.lyrics }}</h3>
</div>
<div class="body" ng-class="{'visible': lyrics}">
<ul>
<li style="background: white; padding: 10px" ng-repeat="language in model.translations" ng-if="language.searchable_transcription && language.searchable_transcription.length > 0">
<ul ng-if="lyricsData.id && lyricsData.verses.length > 0">
<li style="background: white; padding: 10px">

<div ng-if="language.transcription_segments">
<div ng-repeat="segment in language.transcription_segments">{{segment.text}}</div>
<div>
<h4>{{lyricsData.song_title}}</h4>
<br/>
<div ng-repeat="verse in lyricsData.verses">
<div style="white-space: pre-wrap; opacity: 0.5">{{verse.title}}</div>
<div style="white-space: pre-wrap;">{{verse.text}}</div>
<br/>
</div>
</div>
<div ng-if="!language.transcription_segments" style="white-space: pre-wrap;">{{language.searchable_transcription}}</div>
</li>
</ul>
</div>
Expand Down
21 changes: 21 additions & 0 deletions common/app/scripts/services/_api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1236,6 +1236,27 @@ angular.module('bmmLibApp')
})
};

factory.getLyrics = function(lyricsId) {
return factory.addToQueue({
method: 'GET',
url: serverUrl + 'lyrics/'+lyricsId,
})
};

factory.lyricsSearch = function(term) {
return factory.addToQueue({
method: 'GET',
url: serverUrl + 'lyrics/search/'+term,
})
};

factory.replaceLyrics = function(trackId) {
return factory.addToQueue({
method: 'POST',
url: serverUrl + 'track/'+trackId+'/replaceLyrics/',
})
};

return factory;

});

0 comments on commit 7f37482

Please sign in to comment.