Skip to content

Commit

Permalink
Song keeps loading until click on loading symbol[BUG] #566
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rello
Rello committed Mar 23, 2022
1 parent 8e43878 commit dada2f9
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 100 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ All notable changes to the Audio Player project will be documented in this file.
### Fixed
- Scan freeze and PHP fread() error #571
- drag and drop hover not accurate #570
- Song keeps loading until click on loading symbol[BUG] #566

## 3.2.4 - 2021-12-27
### Fixed
Expand Down
178 changes: 80 additions & 98 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,7 @@ OCA.Audioplayer.Category = {

document.getElementById('playlist-container').dataset.playlist = category + '-' + categoryItem;
document.querySelector('.albumwrapper').appendChild(itemRows);
OCA.Audioplayer.UI.trackClickHandler(callback);
OCA.Audioplayer.UI.addTitleClickEvents(callback);

if (albumDirectPlay === true) {
document.querySelector('.albumwrapper').getElementsByClassName('title')[0].click();
Expand Down Expand Up @@ -605,50 +605,7 @@ OCA.Audioplayer.UI = {
return li;
},

handleOptionsClicked: function (event) {
OCA.Audioplayer.Sidebar.showSidebar(event);
event.stopPropagation();
},

indicateFavorite: function (fav, id) {
let fav_action;
if (fav === 't') {
fav_action = document.createElement('i');
fav_action.classList.add('icon', 'icon-starred');
} else {
fav_action = document.createElement('i');
fav_action.classList.add('icon', 'icon-star');
}
fav_action.setAttribute('data-trackid', id);
fav_action.addEventListener('click', OCA.Audioplayer.UI.handleStarClicked);
return fav_action;
},

handleStarClicked: function (event) {
OCA.Audioplayer.Core.toggleFavorite(event);
event.stopPropagation();
},

handleViewToggleClicked: function () {
let div = document.getElementById('view-toggle');
let classes = div.classList;
if (classes.contains('icon-toggle-filelist')) {
classes.remove('icon-toggle-filelist');
classes.add('icon-toggle-pictures');
div.innerText = t('audioplayer', 'Album Covers');
OCA.Audioplayer.Backend.setUserValue('view', 'pictures');
} else {
classes.remove('icon-toggle-pictures');
classes.add('icon-toggle-filelist');
div.innerText = t('audioplayer', 'List View');
OCA.Audioplayer.Backend.setUserValue('view', 'filelist');
}
if (document.querySelector('#myCategory .active')) {
OCA.Audioplayer.Category.handleCategoryClicked();
}
},

trackClickHandler: function (callback) {
addTitleClickEvents: function (callback) {
let albumWrapper = document.querySelector('.albumwrapper');
let getcoverUrl = OC.generateUrl('apps/audioplayer/getcover/');
let category = document.getElementById('playlist-container').dataset.playlist.split('-');
Expand All @@ -662,83 +619,31 @@ OCA.Audioplayer.UI = {
}

albumWrapper.addEventListener('click', function (event) {
OCA.Audioplayer.UI.onTitleClick(getcoverUrl, playlist, event.target);
OCA.Audioplayer.UI.handleTitleClicked(getcoverUrl, playlist, event.target);
});
// the callback is used for the the init function to get feedback when all title rows are ready
if (typeof callback === 'function') {
callback();
}
},

onTitleClick: function (coverUrl, playlist, element) {
let canPlayMimeType = OCA.Audioplayer.Core.canPlayMimeType;
let activeLi = element.parentNode;
// if enabled, play sonos and skip the rest of the processing
if (document.getElementById('audioplayer_sonos').value === 'checked') {
OCA.Audioplayer.Sonos.playSonos(element);
OCA.Audioplayer.Backend.setStatistics();
return;
}
if (!canPlayMimeType.includes(activeLi.dataset.mimetype)) {
console.warn(`can't play ${activeLi.dataset.mimetype}`);
return false;
}
if (activeLi.classList.contains('isActive')) {
OCA.Audioplayer.Player.play();
} else {
if (document.getElementById('playlist-container').dataset.playlist !== OCA.Audioplayer.Player.currentPlaylist) {
let playlistItems = document.querySelectorAll('.albumwrapper li');
OCA.Audioplayer.Player.addTracksToSourceList(playlistItems);
OCA.Audioplayer.Player.currentPlaylist = document.getElementById('playlist-container').dataset.playlist;
}
let k = 0, e = activeLi;
while (e = e.previousSibling) {
++k;
}
// when a new title is played, the old playtime will be reset
if (parseInt(OCA.Audioplayer.Core.CategorySelectors[2]) !== parseInt(activeLi.dataset.trackid)) {
OCA.Audioplayer.Player.trackStartPosition = 0;
}
OCA.Audioplayer.Player.currentTrackIndex = k;
OCA.Audioplayer.Player.play();
OCA.Audioplayer.Backend.setStatistics();
}
},

indicateCurrentPlayingTrack: function () {
if (document.getElementById('playlist-container').dataset.playlist === OCA.Audioplayer.Player.currentPlaylist) {

if (document.getElementsByClassName('isActive').length === 1) {
// let currentActive = document.getElementsByClassName('isActive')[0];
// does not work yet, when a song is preselected bot not isActive
//currentActive.querySelector('i.ioc').style.display = 'none';
//currentActive.querySelector('i.icon').style.display = 'block';
document.getElementsByClassName('isActive')[0].classList.remove('isActive');
}

// reset all playing icons
let iocIcon = document.querySelectorAll('.albumwrapper li i.ioc');
for (let i = 0; i < iocIcon.length; ++i) {
//iocIcon[i].style.display = 'none';
}
let iconIcon = document.querySelectorAll('.albumwrapper li i.icon');
for (let j = 0; j < iconIcon.length; ++j) {
//iconIcon[j].style.display = 'block';
}

if (!OCA.Audioplayer.Player.isPaused()) {
//iocIcon[OCA.Audioplayer.Player.currentTrackIndex].classList.remove('ioc-volume-off');
//iocIcon[OCA.Audioplayer.Player.currentTrackIndex].classList.add('ioc-volume-up');
} else {
//iocIcon[OCA.Audioplayer.Player.currentTrackIndex].classList.add('ioc-volume-off');
//iocIcon[OCA.Audioplayer.Player.currentTrackIndex].classList.remove('ioc-volume-up');
}
//iocIcon[OCA.Audioplayer.Player.currentTrackIndex].style.display = 'block';
//iconIcon[OCA.Audioplayer.Player.currentTrackIndex].style.display = 'none';

document.getElementById('nowPlayingText').innerHTML = iocIcon[OCA.Audioplayer.Player.currentTrackIndex].parentElement.parentElement.dataset.title;
document.querySelectorAll('.albumwrapper li')[OCA.Audioplayer.Player.currentTrackIndex].classList.add('isActive');

document.querySelectorAll('.albumwrapper li')[OCA.Audioplayer.Player.currentTrackIndex].scrollIntoView(
{
behavior: 'smooth',
Expand Down Expand Up @@ -787,7 +692,70 @@ OCA.Audioplayer.UI = {
if (document.getElementById('app-sidebar').dataset.trackid !== '') {
OCA.Audioplayer.Sidebar.showSidebar(undefined, OCA.Audioplayer.Player.currentTrackId);
}
},

handleOptionsClicked: function (event) {
OCA.Audioplayer.Sidebar.showSidebar(event);
event.stopPropagation();
},

handleStarClicked: function (event) {
OCA.Audioplayer.Core.toggleFavorite(event);
event.stopPropagation();
},

handleViewToggleClicked: function () {
let div = document.getElementById('view-toggle');
let classes = div.classList;
if (classes.contains('icon-toggle-filelist')) {
classes.remove('icon-toggle-filelist');
classes.add('icon-toggle-pictures');
div.innerText = t('audioplayer', 'Album Covers');
OCA.Audioplayer.Backend.setUserValue('view', 'pictures');
} else {
classes.remove('icon-toggle-pictures');
classes.add('icon-toggle-filelist');
div.innerText = t('audioplayer', 'List View');
OCA.Audioplayer.Backend.setUserValue('view', 'filelist');
}
if (document.querySelector('#myCategory .active')) {
OCA.Audioplayer.Category.handleCategoryClicked();
}
},

handleTitleClicked: function (coverUrl, playlist, element) {
let canPlayMimeType = OCA.Audioplayer.Core.canPlayMimeType;
let activeLi = element.parentNode;
// if enabled, play sonos and skip the rest of the processing
if (document.getElementById('audioplayer_sonos').value === 'checked') {
OCA.Audioplayer.Sonos.playSonos(element);
OCA.Audioplayer.Backend.setStatistics();
return;
}
if (!canPlayMimeType.includes(activeLi.dataset.mimetype)) {
console.warn(`can't play ${activeLi.dataset.mimetype}`);
return false;
}
if (activeLi.classList.contains('isActive')) {
OCA.Audioplayer.Player.play();
} else {
if (document.getElementById('playlist-container').dataset.playlist !== OCA.Audioplayer.Player.currentPlaylist) {
let playlistItems = document.querySelectorAll('.albumwrapper li');
OCA.Audioplayer.Player.addTracksToSourceList(playlistItems);
OCA.Audioplayer.Player.currentPlaylist = document.getElementById('playlist-container').dataset.playlist;
}
let k = 0, e = activeLi;
while (e = e.previousSibling) {
++k;
}
// when a new title is played, the old playtime will be reset
if (parseInt(OCA.Audioplayer.Core.CategorySelectors[2]) !== parseInt(activeLi.dataset.trackid)) {
OCA.Audioplayer.Player.trackStartPosition = 0;
}
OCA.Audioplayer.Player.currentTrackIndex = k;
OCA.Audioplayer.Player.play();
OCA.Audioplayer.Backend.setStatistics();
}
},

showInitScreen: function (mode) {
Expand Down Expand Up @@ -878,6 +846,20 @@ OCA.Audioplayer.UI = {
}
},

indicateFavorite: function (fav, id) {
let fav_action;
if (fav === 't') {
fav_action = document.createElement('i');
fav_action.classList.add('icon', 'icon-starred');
} else {
fav_action = document.createElement('i');
fav_action.classList.add('icon', 'icon-star');
}
fav_action.setAttribute('data-trackid', id);
fav_action.addEventListener('click', OCA.Audioplayer.UI.handleStarClicked);
return fav_action;
},

toggleFavorite: function (target, trackId) {
let queryElem;
if (target.tagName === 'SPAN') {
Expand Down
5 changes: 3 additions & 2 deletions js/player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ OCA.Audioplayer.Player = {
OCA.Audioplayer.UI.indicateCurrentPlayingTrack();
})
.catch(error => {
document.getElementById('playerPlay').classList.replace('icon-loading','icon-loading');
document.getElementById('playerPlay').classList.replace('play-pause','play');
document.getElementById('playerPlay').classList.replace('icon-loading','play-pause');
});
}
},
Expand All @@ -77,6 +76,8 @@ OCA.Audioplayer.Player = {
*/
stop: function () {
this.html5Audio.pause();
document.getElementById('playerPlay').classList.replace('icon-loading','play-pause');
document.getElementById('playerPlay').classList.replace('play','play-pause');
document.getElementById('sm2-bar-ui').classList.remove('playing');
OCA.Audioplayer.UI.indicateCurrentPlayingTrack();
},
Expand Down

0 comments on commit dada2f9

Please sign in to comment.