티스토리 수익 글 보기
var MIXUP_PLAYER_ID = ‘mixup-player’;
var MIXUP_PLAYER_UI_ID = ‘mixup-player-ui’;
var MIXUP_PLAYER_CONTROLS_ID = ‘mixup-player-controls’;
var MIXUP_PLAYER_BUTTON_CONTAINER_ID = ‘mixup-player-button-container’;
var MIXUP_PLAYER_TIME_DISPLAY_ID = ‘mixup-player-time-display’;
var MIXUP_PLAYER_SCRUBBER_ID = ‘mixup-player-scrubber’;
var MIXUP_PLAYER_LOADED_ID = ‘mixup-player-loaded’;
var MIXUP_PLAYER_POSITION_ID = ‘mixup-player-position’;
var MIXUP_PLAYER_SCRUBBER_CLICKER_ID = ‘mixup-player-scrubber-clicker’;
var MIXUP_PLAYER_PLAY_PAUSE_BUTTON_ID = ‘mixup-player-playpause’;
var MIXUP_PLAYER_PREVIOUS_BUTTON_ID = ‘mixup-player-previous’;
var MIXUP_PLAYER_NEXT_BUTTON_ID = ‘mixup-player-next’;
var MIXUP_PLAYER_VOLUME_CONTAINER_ID = ‘mixup-player-volume-container’;
var MIXUP_PLAYER_VOLUME_CONTROL_CONTAINER_ID = ‘mixup-player-volume-control-container’;
var MIXUP_PLAYER_VOLUME_CONTROL_ID = ‘mixup-player-volume-control’;
var MIXUP_PLAYER_VOLUME_TOGGLE_ID = ‘mixup-player-volume-toggle’;
var MIXUP_BUTTON_CLASS = ‘mixup-button’;
var MIXUP_PLAYLIST_ID = ‘mixup-playlist’;
var MIXUP_TRACK_ROW_CLASS = ‘mixup-track-row’;
var MIXUP_TRACK_BUTTON_CLASS = ‘mixup-track-button’;
var MIXUP_TRACK_PLAY_PAUSE_BUTTON_CLASS = ‘mixup-track-playpause’;
var MIXUP_INFO_BUTTON_CLASS = ‘mixup-info’;
var MIXUP_ACTION_BUTTON_CLASS = ‘menuup_hook’;
var MIXUP_CURRENT_TRACK_CLASS = ‘mixup-current-track’;
var mPlayer = null;
var MixupPlayer = Class.create();
MixupPlayer.prototype = {
playlist: [],
volume: 0.5,
playlist_cursor: 0,
playing: false,
paused: false,
audio: null,
initialize: function (playlist, options) {
console.log(“initialize with playlist”);
// console.log(playlist);
this.playlist = playlist;
this.audio = new Audio();
this.audio.volume = this.volume;
this.audio.controls = false;
mPlayer = this;
},
render: async function () {
var self = this; // Store reference to ‘this’ as ‘self’ for use inside the async block
var output = ‘, which is this play button can be found within
var current = document.getElementById(id).parentElement.parentElement;
current.className = MIXUP_TRACK_ROW_CLASS + ‘ ‘ + MIXUP_CURRENT_TRACK_CLASS;
},
_togglePlayButtonIcon: function () {
var className;
if (this._needsStart() || this.paused) {
className = ‘fas fa-play-circle’;
} else {
className = ‘fas fa-pause-circle’;
}
// reset all track play buttons
var trackButtons = document.getElementsByClassName(MIXUP_TRACK_PLAY_PAUSE_BUTTON_CLASS);
trackButtons.forEach(function (item) {
item.firstChild.className = ‘fas fa-play-circle’;
});
// set player play button icon
var playerPlayButton = document.getElementById(MIXUP_PLAYER_PLAY_PAUSE_BUTTON_ID);
playerPlayButton.firstChild.className = className;
// set track play button icon
var currentTrackPlayButton = document.getElementById(this._trackId(
this.playlist[this.playlist_cursor],
this.playlist_cursor
));
currentTrackPlayButton.firstChild.className = className;
},
_renderPlayer: function () {
var controls = this._renderPlayerControls();
var scrubber = this._renderScrubber();
return ‘‘;
this.playlist.forEach(function(item, index) {
var awardinfo = ”;
var userEntry = data.find(user => user[item.user_name] !== undefined);
if (userEntry) {
// Access the user details once found
var userData = userEntry[item.user_name];
awardinfo = userData.emerald_award;
console.log(“item u for pl: ” + item.user_name + ” has award: ” + awardinfo);
}
var linePL = self._renderTrack(item, index, awardinfo);
output += self._renderTrack(item, index, awardinfo);
});
output += ‘
‘;
console.log(“table output: “);
console.log(output);
return output; // Now it returns after fetch completes
} catch (error) {
console.error(‘Error fetching data:’, error);
return ”; // Handle errors or return empty table on failure
}
},
/* var output = ‘‘;
fetch(‘https://ccmixter.org/_dbsc/emeralds.php’)
.then(response => response.json()) // Parse the response as JSON
.then(data => {
// console.log(data); // The JSON data is now in this ‘data’ variable
var self = this;
var output = ‘‘;
this.playlist.forEach(function (item, index) {
var awardinfo = ”;
var userEntry = data.find(user => user[item.user_name] !== undefined);
if (userEntry) {
// Access the user details once found
var userData = userEntry[item.user_name];
var awardinfo = userData.emerald_award ;
console.log( “item u for pl” + item.user_name+ “has award called” + awardinfo );
}
var linePL = self._renderTrack(item, index, awardinfo) ;
// console.log( linePL) ;
output += self._renderTrack(item, index, awardinfo);
});
output += ‘
‘;
console.log(“table output: “) ;
console.log(output) ;
return output;
})
.catch(error => {
console.error(‘Error fetching data:’, error);
});
// output += ‘
‘;
// return output;
},
*/
_renderTrack: function (track, index, emeraldAward ) {
console.log(” render track with em award” + emeraldAward) ;
var output = ‘ ‘;
output += ‘‘ + this._renderTrackPlayButton(track, index) + ‘ ‘;
output += ‘‘ ;
if ( emeraldAward != ” ) output += “” + emeraldAward + ‘‘;
output += ‘ ‘ ;
// output += ‘‘ + this._renderTrackName(track) + ‘
‘ + emeraldAward+ ‘ ‘;
output += ‘‘ + this._renderTrackName(track) + ‘ ‘;
output += ‘‘ + this._renderActionButtons(track) + ‘ ‘;
output += ‘ ‘;
return output;
},
_renderTrackPlayButton: function (track, index) {
return ‘‘;
},
_renderTrackName: function (track) {
var output = this._link(track.artist_page_url, track.user_real_name) + ‘ remix of ‘;
output += this._link(track.mixee_page_url, track.mixee_name) + ‘ ‘ + ‘
‘; output += this._link(track.file_page_url, ‘“’ + track.upload_name + ‘”’); return output; }, _renderActionButtons: function (track) { var output = this._link(null, ‘‘, ‘_plinfo_’ + track.upload_id, MIXUP_TRACK_BUTTON_CLASS + ‘ ‘ + MIXUP_INFO_BUTTON_CLASS) + ‘ ‘; output += this._link(null, ‘‘, ‘_plaction_’ + track.upload_id, MIXUP_TRACK_BUTTON_CLASS + ‘ ‘ + MIXUP_ACTION_BUTTON_CLASS); return output; }, _trackId: function (track, index) { return ‘_plplay_’ + track.upload_id + ‘_’ + index; }, _trackAudio: function () { console.log(this.playlist); console.log(“and the fplay url..”); console.log(this.playlist[this.playlist_cursor].fplay_url); return this.playlist[this.playlist_cursor].fplay_url; }, _calculateTotalValue: function (length) { var minutes = Math.floor(length / 60); var seconds = Math.round(length – minutes * 60); var time = minutes + ‘:’ + (seconds < 10 ? '0' + seconds : seconds); return time; }, _calculateCurrentValue: function (currentTime) { var hour = parseInt(currentTime / 3600) % 24; var minute = parseInt(currentTime / 60) % 60; var seconds = (currentTime % 60).toFixed(); var time = minute + ":" + (seconds < 10 ? '0' + seconds : seconds); if (hour > 0) { time = hour + ‘:’ + time; } return time; }, _link: function (url, label, id, cl) { if (id === undefined) { id = ”; } if (cl === undefined) { cl = ”; } if (url === null) { return ‘‘ + label + ‘‘; } return ‘‘ + label + ‘‘; } };
‘;
output += self._renderPlayer(); // Add the player HTML
// Now, return a promise that will resolve once the playlist is rendered
return (async function() {
const playlistHTML = await self._renderPlaylist(); // Use ‘self’ instead of ‘this’
var ploutput = playlistHTML;
output += ploutput; // Append playlist HTML
output += ‘
‘;
console.log(output); // Log the final output
return output; // Return the final output
})();
},
/*
render: function () {
var output = ‘‘;
output += this._renderPlayer();
(async function() {
const playlistHTML = await this._renderPlaylist();
var ploutput = playlistHTML; // Example usage
})();
// ploutput = this._renderPlaylist();
// console.log(“render fxn ploutput”) ;
console.log(ploutput) ;
output += ploutput ;
output += ‘
‘;
return output;
},
*/
hookEvents: function () {
this._hookPlayerPlayButton();
this._hookTrackPlayButtons();
this._hookPreviousButton();
this._hookNextButton();
this._hookArrowKeys();
this._hookSpaceBar();
this._hookScrubber();
this._hookVolumeControls();
},
_needsStart: function () {
return (!this.playing && !this.paused);
},
_hookPlayerPlayButton: function () {
var self = this;
var button = document.getElementById(MIXUP_PLAYER_PLAY_PAUSE_BUTTON_ID);
button.addEventListener(“click”, function (e) {
e.preventDefault();
self._onPlayButtonClick(self.playlist_cursor);
});
},
_hookTrackPlayButtons: function () {
var self = this;
var playButtons = document.getElementsByClassName(MIXUP_TRACK_PLAY_PAUSE_BUTTON_CLASS);
playButtons.forEach(function (button) {
button.addEventListener(“click”, function (e) {
e.preventDefault();
var currentTrackIndex = this.parentNode.parentNode.attributes[‘data-index’].value;
self._onPlayButtonClick(currentTrackIndex);
});
});
},
_hookPreviousButton: function () {
var self = this;
var button = document.getElementById(MIXUP_PLAYER_PREVIOUS_BUTTON_ID);
button.addEventListener(“click”, function (e) {
e.preventDefault();
self._previous();
});
},
_hookArrowKeys: function () {
var self = this;
window.addEventListener(“keydown”, function (e) {
if (e.keyCode === 37) {
self._previous();
}
if (e.keyCode === 39) {
self._next();
}
if (e.keyCode === 38) {
e.preventDefault();
if (self.audio.volume < 1) {
var newVolume = (Number.parseFloat(self.audio.volume) + Number.parseFloat(0.1)).toFixed(1);
self.audio.volume = self.volume = (newVolume > 1) ? 1 : newVolume;
self._setVolumeDisplay(self.audio.volume);
}
}
if (e.keyCode === 40) {
e.preventDefault();
if (self.audio.volume > 0) {
var newVolume = (Number.parseFloat(self.audio.volume) – Number.parseFloat(0.1)).toFixed(1);
self.audio.volume = self.volume = (newVolume < 0) ? 0 : newVolume;
self._setVolumeDisplay(self.audio.volume);
}
}
});
},
_hookSpaceBar: function () {
var self = this;
window.addEventListener("keydown", function (e) {
if (e.keyCode === 32) {
e.preventDefault();
self._onPlayButtonClick(self.playlist_cursor);
}
});
},
_hookNextButton: function () {
var self = this;
var button = document.getElementById(MIXUP_PLAYER_NEXT_BUTTON_ID);
button.addEventListener("click", function (e) {
e.preventDefault();
self._next();
});
},
_hookScrubber: function () {
var self = this;
var scrubber = document.getElementById(MIXUP_PLAYER_SCRUBBER_CLICKER_ID);
scrubber.addEventListener("click", function (e) {
var rect = e.target.getBoundingClientRect();
var width = Math.round(rect.width);
var clickX = Math.round(e.pageX - rect.x);
var percent = clickX / width;
var bufferedDuration = self.audio.buffered.end(0);
var newPosition = bufferedDuration * percent;
self.audio.currentTime = newPosition;
});
},
_hookVolumeControls: function () {
this._hookVolumeControl();
this._hookVolumeToggle();
},
_hookVolumeControl: function () {
var self = this;
var volumeControlContainer = document.getElementById(MIXUP_PLAYER_VOLUME_CONTROL_CONTAINER_ID);
self._setVolumeDisplay(this.audio.volume);
volumeControlContainer.addEventListener('click', function (e) {
var rect = e.currentTarget.getBoundingClientRect();
var width = Math.round(rect.width);
var clickX = Math.round(e.pageX - rect.x);
var newVolume = clickX / width;
self.audio.volume = self.volume = newVolume;
self._setVolumeDisplay(newVolume);
}, true);
},
_hookVolumeToggle: function () {
var self = this;
var toggle = document.getElementById(MIXUP_PLAYER_VOLUME_TOGGLE_ID);
toggle.addEventListener('click', function (e) {
e.preventDefault();
if (self.audio.volume === 0) {
self.audio.volume = self.volume;
e.currentTarget.firstChild.className = 'fas fa-volume-up';
} else {
self.audio.volume = 0;
e.currentTarget.firstChild.className = 'fas fa-volume-off';
}
self._setVolumeDisplay(self.audio.volume);
});
},
_onPlayButtonClick: function (index) {
if (this._needsStart() || (this.playlist_cursor !== index)) {
this._start(index);
} else {
if (this.paused) {
this._unpause();
} else {
this._pause();
}
}
},
_start: function (index) {
var self = this;
var loaded = document.getElementById(MIXUP_PLAYER_LOADED_ID);
var scrubber = document.getElementById(MIXUP_PLAYER_SCRUBBER_CLICKER_ID);
var position = document.getElementById(MIXUP_PLAYER_POSITION_ID);
this.playlist_cursor = index;
this.audio.src = this._trackAudio();
this.audio.preload = 'auto';
this.paused = false;
this.playing = true;
this._highlightCurrent();
this._togglePlayButtonIcon();
this.audio.play();
this.audio.addEventListener("timeupdate", function (e) {
if (e.target.buffered.length > 0) {
var percentLoaded = Math.round((e.target.buffered.end(0) / e.target.duration) * 100);
var currentPosition = Math.round((e.target.currentTime / e.target.duration) * 100);
var timeDisplay = document.getElementById(MIXUP_PLAYER_TIME_DISPLAY_ID);
loaded.setAttribute(‘style’, ‘width: ‘ + percentLoaded + ‘%’);
scrubber.setAttribute(‘style’, ‘width: ‘ + percentLoaded + ‘%’);
position.setAttribute(‘style’, ‘width: ‘ + currentPosition + ‘%’);
timeDisplay.innerText = self._calculateCurrentValue(self.audio.currentTime) + ‘ / ‘ + self._calculateTotalValue(self.audio.duration);
}
});
function endedHandler(e) {
self.audio.removeEventListener(‘ended’, endedHandler);
self._next();
}
this.audio.addEventListener(“ended”, endedHandler);
},
_previous: function () {
var index;
if (parseInt(this.playlist_cursor) === 0) {
index = this.playlist.length – 1;
} else {
index = parseInt(this.playlist_cursor) – 1;
}
this._start(index);
},
_next: function () {
var index;
if (parseInt(this.playlist_cursor) === this.playlist.length – 1) {
index = 0;
} else {
index = parseInt(this.playlist_cursor) + 1;
}
this._start(index);
},
_pause: function () {
this.paused = true;
this._togglePlayButtonIcon();
this.audio.pause();
},
_unpause: function () {
this.paused = false;
this._togglePlayButtonIcon();
this.audio.play();
},
_setVolumeDisplay: function (volume) {
var volumeControl = document.getElementById(MIXUP_PLAYER_VOLUME_CONTROL_ID);
volumeControl.setAttribute(‘style’, ‘width: ‘ + Math.round(volume * 100) + ‘%’);
},
_highlightCurrent: function () {
// before we highlight current tack’s table row
// let’s make sure all rows are cleared
var rows = document.getElementsByClassName(MIXUP_TRACK_ROW_CLASS);
rows.forEach(function (item) {
item.className = MIXUP_TRACK_ROW_CLASS;
});
var id = this._trackId(
this.playlist[this.playlist_cursor],
this.playlist_cursor
);
// The ‘ + controls + scrubber + ‘
‘;
},
_renderPlayerControls: function () {
var volumeControl = this._renderVolumeControl();
var playerButtons = this._renderPlayerButtons();
var playerTimeDisplay = this._renderPlayerTimeDisplay();
return ‘‘ + volumeControl + playerButtons + playerTimeDisplay + ‘
‘;
},
_renderVolumeControl: function () {
var control = ‘‘;
var controlContainer = ‘‘ + control + ‘
‘;
var toggle = ‘‘;
var flex = ‘‘ + controlContainer + ‘ ‘ + toggle + ‘
‘;
return ‘‘ + flex + ‘
‘;
},
_renderPlayerButtons: function () {
var prevButton = ‘‘;
var nextButton = ‘‘;
var playButton = ‘‘;
return ‘‘ + prevButton + ‘ ‘ + playButton + ‘ ‘ + nextButton + ‘
‘;
},
_renderPlayerTimeDisplay: function () {
return ‘‘;
},
_renderScrubber: function () {
return ‘‘;
},
_renderPlaylist: async function () {
// Fetch the data using await
try {
const response = await fetch(‘https://ccmixter.org/_dbsc/emeralds.php’);
const data = await response.json();
var self = this;
var output = ‘
‘ + emeraldAward+ ‘
‘; output += this._link(track.file_page_url, ‘“’ + track.upload_name + ‘”’); return output; }, _renderActionButtons: function (track) { var output = this._link(null, ‘‘, ‘_plinfo_’ + track.upload_id, MIXUP_TRACK_BUTTON_CLASS + ‘ ‘ + MIXUP_INFO_BUTTON_CLASS) + ‘ ‘; output += this._link(null, ‘‘, ‘_plaction_’ + track.upload_id, MIXUP_TRACK_BUTTON_CLASS + ‘ ‘ + MIXUP_ACTION_BUTTON_CLASS); return output; }, _trackId: function (track, index) { return ‘_plplay_’ + track.upload_id + ‘_’ + index; }, _trackAudio: function () { console.log(this.playlist); console.log(“and the fplay url..”); console.log(this.playlist[this.playlist_cursor].fplay_url); return this.playlist[this.playlist_cursor].fplay_url; }, _calculateTotalValue: function (length) { var minutes = Math.floor(length / 60); var seconds = Math.round(length – minutes * 60); var time = minutes + ‘:’ + (seconds < 10 ? '0' + seconds : seconds); return time; }, _calculateCurrentValue: function (currentTime) { var hour = parseInt(currentTime / 3600) % 24; var minute = parseInt(currentTime / 60) % 60; var seconds = (currentTime % 60).toFixed(); var time = minute + ":" + (seconds < 10 ? '0' + seconds : seconds); if (hour > 0) { time = hour + ‘:’ + time; } return time; }, _link: function (url, label, id, cl) { if (id === undefined) { id = ”; } if (cl === undefined) { cl = ”; } if (url === null) { return ‘‘ + label + ‘‘; } return ‘‘ + label + ‘‘; } };