Address changes.

This commit is contained in:
Cody Cook 2025-02-22 17:20:19 -08:00
commit 635b3ddcbc
59 changed files with 7249 additions and 2745 deletions

491
mix.php
View file

@ -39,6 +39,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'PUT') {
require_once 'includes/header.php'; ?>
<section>
<div class="container py-5">
<!-- breadcrumbs -->
<div class="row">
<div class="col">
<nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
@ -57,10 +58,13 @@ require_once 'includes/header.php'; ?>
</nav>
</div>
</div>
<!-- end of breadcrumbs -->
<?php if ($mixFound): ?>
<?php if ($mixFound) { ?>
<div class="row">
<!-- start column -->
<div class="col-lg-4">
<!-- cover card -->
<div class="card mb-4">
<div class="card-body bg-body-secondary text-center">
<?php
@ -74,9 +78,10 @@ require_once 'includes/header.php'; ?>
echo "<h2 class='text-muted mb-4 fs-6'>" . $mix->getDescription() . "</h2>";
}
?>
</p>
</div>
</div>
<!-- end cover card -->
<!-- player card -->
<div class="card mb-4">
<div class="card-body bg-body-secondary text-center">
<?php
@ -96,9 +101,11 @@ require_once 'includes/header.php'; ?>
<span id="current-time">0:00</span> / <span id="duration">0:00</span>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
<!-- end player card -->
<!-- action card -->
<div class="card mb-4">
<div class="card-body bg-body-secondary text-center ">
<button type="button" id="shareBtn" class="w-100 mb-2 btn btn-secondary"
@ -116,9 +123,12 @@ require_once 'includes/header.php'; ?>
<?php endif; ?>
</div>
</div>
<!-- end action card -->
</div>
<!-- end column -->
<!-- start info column -->
<div class="col-lg-8">
<!-- start info card -->
<div class="card mb-4">
<div class="card-body bg-body-secondary">
<div class="row">
@ -294,7 +304,7 @@ require_once 'includes/header.php'; ?>
<?php echo $mix->getPlaycount(); ?>
</div>
</div>
<?php if ($mix->getUpdated() != ""): ?>
<?php if ($mix->getUpdated() != "") { ?>
<hr>
<div class="row">
<div class="col-sm-3">
@ -305,208 +315,160 @@ require_once 'includes/header.php'; ?>
<?php echo $mix->getUpdated(); ?>
</div>
</div>
<script>
<?php } ?>
</div>
</div>
<!-- end info card -->
<!-- start tracklist -->
<?php if ($mix->getTracklist() != []) { ?>
<div class='card mb-4 bg-body-secondary'>
<div class='card-body '>
<p class='mb-4'><span
class='text-primary font-italic me-1'><?php echo $locale['tracklist']; ?></span>
</p>
<ul class='list-group list-group-flush rounded-3 bg-body-secondary'>
<?php $tracklist = $mix->getTracklist();
foreach ($tracklist as $track) {
echo "<li class='list-group-item bg-body-secondary d-flex justify-content-between align-items-center'>";
echo $track;
echo "</li>";
}
?>
</ul>
</div>
</div>
<?php } ?>
<!-- end tracklist -->
document.addEventListener('DOMContentLoaded', function () {
const audioElement = document.querySelector('audio');
</div>
<!-- end info column -->
<!-- modals -->
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: '<?php echo addslashes($mix->getName()); ?>',
artist: '<?php
$djs = $mix->getDJs();
$djCount = count($djs);
$i = 0;
$djnamelist = [];
foreach ($djs as $dj) {
$djnamelist[] = $dj->getName();
$i++;
}
echo addslashes(implode(", ", $djnamelist));?>',
album: '<?php echo addslashes($mix->getName()); ?>',
artwork: [
{
src: '<?php echo $mix->getCover('small'); ?>',
sizes: '96x96',
type: 'image/jpeg'
},
{
src: '<?php echo $mix->getCover('large'); ?>',
sizes: '128x128',
type: 'image/jpeg'
}
]
});
// Define action handlers
navigator.mediaSession.setActionHandler('play', function () {
audioElement.play();
});
navigator.mediaSession.setActionHandler('pause', function () {
audioElement.pause();
});
audioElement.addEventListener('timeupdate', () => {
// Update the position state
navigator.mediaSession.setPositionState({
duration: audioElement.duration,
playbackRate: audioElement.playbackRate,
position: audioElement.currentTime
});
});
}
});
</script>
<?php endif; ?>
<div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="shareModalLabel"><?php echo $locale['share']; ?></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<?php
$url = 'https://utahsdjs.com/mix/' . $_GET['mix'];
$utm_params = '?utm_source=website&utm_medium=share_modal&utm_campaign=sharing';
$share_url = urlencode($url . $utm_params);
?>
<a href="#" id="copyLinkBtn"
class="btn btn-secondary w-100 mb-2"><?php echo $locale['copyurl']; ?></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $share_url; ?>"
target="_blank" class="btn btn-primary w-100 mb-2"
onclick="hideModal()"><?php echo $locale['sharetofb']; ?></a>
<a href="https://twitter.com/intent/tweet?url=<?php echo $share_url; ?>"
target="_blank" class="btn btn-dark w-100 mb-2"
onclick="hideModal()"><?php echo $locale['sharetotwitter']; ?></a>
</div>
</div>
</div>
</div>
<?php
if ($mix->getTracklist() != []) {
echo "<div class='card mb-4 bg-body-secondary'>";
echo "<div class='card-body '>";
echo "<p class='mb-4'><span class='text-primary font-italic me-1'>" . $locale['tracklist'] . "</span></p>";
echo "<ul class='list-group list-group-flush rounded-3 bg-body-secondary'>";
$tracklist = $mix->getTracklist();
foreach ($tracklist as $track) {
echo "<li class='list-group-item bg-body-secondary d-flex justify-content-between align-items-center'>";
echo $track;
echo "</li>";
}
echo "</ul>";
echo "</div>";
echo "</div>";
}
<!-- end modals -->
?>
<script>
</div>
</div>
</div>
<div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="shareModalLabel"><?php echo $locale['share']; ?></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?php
$url = 'https://utahsdjs.com/mix/' . $_GET['mix'];
$utm_params = '?utm_source=website&utm_medium=share_modal&utm_campaign=sharing';
$share_url = urlencode($url . $utm_params);
?>
<a href="#" id="copyLinkBtn"
class="btn btn-secondary w-100 mb-2"><?php echo $locale['copyurl']; ?></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $share_url; ?>"
target="_blank" class="btn btn-primary w-100 mb-2"
onclick="hideModal()"><?php echo $locale['sharetofb']; ?></a>
<a href="https://twitter.com/intent/tweet?url=<?php echo $share_url; ?>"
target="_blank" class="btn btn-dark w-100 mb-2"
onclick="hideModal()"><?php echo $locale['sharetotwitter']; ?></a>
</div>
</div>
</div>
</div>
document.addEventListener('DOMContentLoaded', function () {
const shareBtn = document.getElementById('shareBtn');
const shareModal = new bootstrap.Modal(document.getElementById('shareModal'));
const copyLinkBtn = document.getElementById("copyLinkBtn");
const urlToCopy = window.location.href + '?utm_source=website&utm_medium=share_modal&utm_campaign=sharing';
<script>
document.addEventListener('DOMContentLoaded', function () {
var shareBtn = document.getElementById('shareBtn');
var shareModal = new bootstrap.Modal(document.getElementById('shareModal'));
var copyLinkBtn = document.getElementById("copyLinkBtn");
var urlToCopy = window.location.href + '?utm_source=website&utm_medium=share_modal&utm_campaign=sharing';
shareBtn.addEventListener('click', function () {
shareModal.show();
});
copyLinkBtn.onclick = function () {
navigator.clipboard.writeText(urlToCopy).then(function () {
alert('<?php echo $locale['urlcopiedtoclipboard'];?>');
shareModal.hide();
}, function (err) {
alert('<?php echo $locale['failedtocopyurl'];?>: ' + err);
});
}
window.hideModal = function () {
shareModal.hide();
}
});
// when the audio is played, send a PUT request to the page to update the playcount
document.addEventListener('DOMContentLoaded', function () {
const audioElement = document.querySelector('audio');
audioElement.addEventListener('play', function () {
fetch(window.location.href, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({mix: '<?php echo $mix->getId(); ?>'}),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
shareBtn.addEventListener('click', function () {
shareModal.show();
});
});
});
</script>
copyLinkBtn.onclick = function () {
navigator.clipboard.writeText(urlToCopy).then(function () {
alert('<?php echo $locale['urlcopiedtoclipboard'];?>');
shareModal.hide();
}, function (err) {
alert('<?php echo $locale['failedtocopyurl'];?>: ' + err);
});
}
window.hideModal = function () {
shareModal.hide();
}
});
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "MusicRecording",
"name": "<?php echo $mix->getName(); ?>",
// when the audio is played, send a PUT request to the page to update the playcount
document.addEventListener('DOMContentLoaded', function () {
const audioElement = document.querySelector('audio');
audioElement.addEventListener('play', function () {
fetch(window.location.href, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({mix: '<?php echo $mix->getId(); ?>'}),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
});
});
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "MusicRecording",
"name": "<?php echo $mix->getName(); ?>",
"byArtist": {
"@type": "MusicGroup",
"name": "<?php
$djs = $mix->getDJs();
echo $djs[0]->getName();
?>",
$djs = $mix->getDJs();
echo $djs[0]->getName();
?>",
"image": "<?php echo $djs[0]->getImg(); ?>"
},
"inAlbum": {
"@type": "MusicAlbum",
"name": "<?php echo $mix->getName(); ?>"
},
},<?php
// genre could be blank so we need to check if it is empty
if (!empty($mix->getGenres())) {
?>
"genre": "<?php
$genre = new Genre($mix->getGenres()[0], $db);
echo $genre->get_name();
?>",
"url": "<?php echo "https://utahsdjs.com/mix/" . $mix->getSlug(); ?>",
$genre = new Genre($mix->getGenres()[0], $db);
echo $genre->get_name();
?>",<?php } ?>
"url": "<?php echo "https://utahsdjs.com/mix/" . $mix->getSlug(); ?>",
"image": "<?php echo $mix->getCover(); ?>",
"duration": "<?php echo $mix->getDuration()['S']; ?>",
<?php
// if recorded is empty, use created; if created is empty, use 2008-01-01;
if (empty($mix->getRecorded())) {
if (empty($mix->getCreated())) {
$recorded = '2008-01-01 00:00:00';
} else {
$recorded = $mix->getCreated();
}
} else {
$recorded = $mix->getRecorded();
<?php
// if recorded is empty, use created; if created is empty, use 2008-01-01;
if (empty($mix->getRecorded())) {
if (empty($mix->getCreated())) {
$recorded = '2008-01-01 00:00:00';
} else {
$recorded = $mix->getCreated();
}
} else {
$recorded = $mix->getRecorded();
} ?>
} ?>
"datePublished": "<?php echo $recorded; ?>",
"datePublished": "<?php echo $recorded; ?>",
"description": "<?php
if (empty($mix->getDescription())) {
$description = 'Listen to ' . $mix->getName() . ' on Utah\'s DJs.';
}
echo $mix->getDescription(); ?>",
if (empty($mix->getDescription())) {
$description = 'Listen to ' . $mix->getName() . ' on Utah\'s DJs.';
}
echo $mix->getDescription(); ?>",
"interactionStatistic": {
"@type": "InteractionCounter",
"interactionType": "https://schema.org/ListenAction",
@ -516,77 +478,128 @@ require_once 'includes/header.php'; ?>
}
</script>
<script>
$(document).ready(function () {
const audio = $('#audio')[0];
const playPauseBtn = $('#play-pause-btn');
const playPauseIcon = playPauseBtn.find('i');
const seekBar = $('#seek-bar');
const currentTime = $('#current-time');
const duration = $('#duration');
</script>
<script>
$(document).ready(function () {
const audio = $('#audio')[0];
const playPauseBtn = $('#play-pause-btn');
const playPauseIcon = playPauseBtn.find('i');
const seekBar = $('#seek-bar');
const currentTime = $('#current-time');
const duration = $('#duration');
function formatTime(seconds) {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
seconds = Math.floor(seconds % 60);
function formatTime(seconds) {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
seconds = Math.floor(seconds % 60);
if (hours > 0) {
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
} else {
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
}
if (hours > 0) {
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
} else {
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
}
function togglePlayPause() {
if (audio.paused) {
audio.play();
playPauseIcon.removeClass('fa-play').addClass('fa-pause');
} else {
audio.pause();
playPauseIcon.removeClass('fa-pause').addClass('fa-play');
}
}
function togglePlayPause() {
if (audio.paused) {
audio.play();
playPauseIcon.removeClass('fa-play').addClass('fa-pause');
} else {
audio.pause();
playPauseIcon.removeClass('fa-pause').addClass('fa-play');
}
}
audio.addEventListener('loadedmetadata', function () {
seekBar.attr('max', audio.duration);
duration.text(formatTime(audio.duration));
});
audio.addEventListener('loadedmetadata', function () {
seekBar.attr('max', audio.duration);
duration.text(formatTime(audio.duration));
});
playPauseBtn.click(togglePlayPause);
playPauseBtn.click(togglePlayPause);
seekBar.on('input', function () {
const time = seekBar.val();
audio.currentTime = time;
});
seekBar.on('input', function () {
const time = seekBar.val();
audio.currentTime = time;
});
audio.addEventListener('timeupdate', function () {
seekBar.val(audio.currentTime);
currentTime.text(formatTime(audio.currentTime));
});
audio.addEventListener('timeupdate', function () {
seekBar.val(audio.currentTime);
currentTime.text(formatTime(audio.currentTime));
});
audio.addEventListener('ended', function () {
playPauseIcon.removeClass('fa-pause').addClass('fa-play');
});
});
</script>
audio.addEventListener('ended', function () {
playPauseIcon.removeClass('fa-pause').addClass('fa-play');
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const audioElement = document.querySelector('audio');
<?php else: ?>
<div class="row">
<div class="col">
<div class="alert alert-danger" role="alert">
<?php echo $locale['mixNotFound']; ?>
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: '<?php echo addslashes($mix->getName()); ?>',
artist: '<?php
$djs = $mix->getDJs();
$djCount = count($djs);
$i = 0;
$djnamelist = [];
foreach ($djs as $dj) {
$djnamelist[] = $dj->getName();
$i++;
}
echo addslashes(implode(", ", $djnamelist));?>',
album: '<?php echo addslashes($mix->getName()); ?>',
artwork: [
{
src: '<?php echo $mix->getCover('small'); ?>',
sizes: '96x96',
type: 'image/jpeg'
},
{
src: '<?php echo $mix->getCover('large'); ?>',
sizes: '128x128',
type: 'image/jpeg'
}
]
});
// Define action handlers
navigator.mediaSession.setActionHandler('play', function () {
audioElement.play();
});
navigator.mediaSession.setActionHandler('pause', function () {
audioElement.pause();
});
audioElement.addEventListener('timeupdate', () => {
// Update the position state
navigator.mediaSession.setPositionState({
duration: audioElement.duration,
playbackRate: audioElement.playbackRate,
position: audioElement.currentTime
});
});
}
});
</script>
<?php }
else { ?>
<div class="row">
<div class="col">
<div class="alert alert-danger" role="alert">
<?php echo $locale['mixNotFound']; ?>
</div>
</div>
</div>
</div>
<?php }
?>
</div>
<?php endif;
?>
</div>
</section>
<?php require_once 'includes/footer.php'; ?>
<?php require_once 'includes/footer.php';