Time to do an update.
This commit is contained in:
parent
70c8a87e15
commit
0b0697bb42
22 changed files with 4352 additions and 268 deletions
283
mix.php
283
mix.php
|
|
@ -9,7 +9,6 @@ use DJMixHosting\Mix;
|
|||
use DJMixHosting\Mixshow;
|
||||
use DJMixHosting\Playcount;
|
||||
|
||||
|
||||
$db = new Database($config);
|
||||
$mixFound = false;
|
||||
if (isset($_GET['mix']) && $_GET['mix'] != "") {
|
||||
|
|
@ -32,8 +31,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'PUT') {
|
|||
$playcount->updatePlaycount();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
require_once 'includes/header.php'; ?>
|
||||
<section>
|
||||
<div class="container py-5">
|
||||
|
|
@ -42,7 +39,7 @@ require_once 'includes/header.php'; ?>
|
|||
<nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
|
||||
<ol class="breadcrumb mb-0">
|
||||
<li class="breadcrumb-item"><a href="/"><?php echo $locale['home']; ?></a></li>
|
||||
<li class="breadcrumb-item"><a href="/mixes.php"><?php echo $locale['mixes']; ?></a></li>
|
||||
<li class="breadcrumb-item"><a href="/mix"><?php echo $locale['mixes']; ?></a></li>
|
||||
<li class="breadcrumb-item active"
|
||||
aria-current="page"><?php
|
||||
if (isset($mix) && $mix->get_name() != "") {
|
||||
|
|
@ -81,11 +78,21 @@ require_once 'includes/header.php'; ?>
|
|||
if ($mix->is_download_only()) {
|
||||
echo "<a href='/mix/" . $mix->get_slug() . "/download" . "' class='btn btn-primary'>" . $locale['download'] . "</a>";
|
||||
} else {
|
||||
echo "<audio controls controlsList='nodownload'>";
|
||||
$url = $mix->get_url();
|
||||
echo "<source src='" . $url . "' type='audio/mpeg'>";
|
||||
echo $locale['audioNotSupported'];
|
||||
echo "</audio>";
|
||||
?>
|
||||
<div id="audio-player">
|
||||
<audio id="audio" src="<?php echo $mix->get_url(); ?>"></audio>
|
||||
<div class="player-controls">
|
||||
<button id="play-pause-btn">
|
||||
<i class="fas fa-play" style="font-size: 12px;"></i>
|
||||
</button>
|
||||
<input type="range" id="seek-bar" value="0">
|
||||
</div>
|
||||
<div id="time-display">
|
||||
<span id="current-time">0:00</span> / <span id="duration">0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -93,9 +100,12 @@ require_once 'includes/header.php'; ?>
|
|||
</div>
|
||||
</div>
|
||||
<div class="card mb-4">
|
||||
<div class="card-body bg-body-secondary text-center">
|
||||
<a href="#" class="btn btn-secondary w-100 mb-2"
|
||||
id="shareBtn"><?php echo $locale['share']; ?></a>
|
||||
<div class="card-body bg-body-secondary text-center ">
|
||||
<button type="button" id="shareBtn" class="w-100 mb-2 btn btn-secondary"
|
||||
data-bs-toggle="modal" data-bs-target="#shareModal">
|
||||
<?php echo $locale['share']; ?>
|
||||
</button>
|
||||
|
||||
<?php if (!$mix->is_download_only()) : ?>
|
||||
<a href="<?php
|
||||
|
||||
|
|
@ -375,61 +385,194 @@ require_once 'includes/header.php'; ?>
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="shareModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2><?php echo $locale['share']; ?></h2>
|
||||
<a href="#" id="copyLinkBtn" class="btn btn-secondary w-100 mb-2">Copy URL</a>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode('https://utahsdjs.com/mix/' . $_GET['mix']); ?>"
|
||||
target="_blank" class="btn btn-primary w-100 mb-2">Share to Facebook</a>
|
||||
<a href="https://twitter.com/intent/tweet?url=<?php echo urlencode('https://utahsdjs.com/mix/' . $_GET['mix']); ?>"
|
||||
target="_blank" class="btn btn-info w-100 mb-2">Share to X (Twitter)</a>
|
||||
<a href="https://www.instagram.com/" target="_blank" class="btn btn-danger w-100">Share to Instagram</a>
|
||||
<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">Copy URL</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()">Share to
|
||||
Facebook</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()">Share to X (formerly Twitter)</a>
|
||||
<a href="https://www.instagram.com/" target="_blank" class="btn btn-danger w-100"
|
||||
onclick="hideModal()">Share to Instagram</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
// Get the modal
|
||||
var modal = document.getElementById("shareModal");
|
||||
|
||||
// Get the button that opens the modal
|
||||
var btn = document.getElementById("shareBtn");
|
||||
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';
|
||||
|
||||
// Get the <span> element that closes the modal
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
|
||||
// Get the copy link button
|
||||
var copyLinkBtn = document.getElementById("copyLinkBtn");
|
||||
|
||||
// Get the URL to be copied
|
||||
var urlToCopy = window.location.href;
|
||||
|
||||
// When the user clicks the button, open the modal
|
||||
btn.onclick = function () {
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
// When the user clicks on <span> (x), close the modal
|
||||
span.onclick = function () {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
window.onclick = function (event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// When the user clicks the copy link button, copy the URL to the clipboard
|
||||
copyLinkBtn.onclick = function () {
|
||||
navigator.clipboard.writeText(urlToCopy).then(function () {
|
||||
alert('URL copied to clipboard');
|
||||
}, function (err) {
|
||||
alert('Failed to copy URL: ', err);
|
||||
shareBtn.addEventListener('click', function () {
|
||||
shareModal.show();
|
||||
});
|
||||
}
|
||||
|
||||
copyLinkBtn.onclick = function () {
|
||||
navigator.clipboard.writeText(urlToCopy).then(function () {
|
||||
alert('URL copied to clipboard');
|
||||
shareModal.hide();
|
||||
}, function (err) {
|
||||
alert('Failed to copy URL: ' + 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->get_id(); ?>'}),
|
||||
})
|
||||
.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->get_name(); ?>",
|
||||
"byArtist": {
|
||||
"@type": "MusicGroup",
|
||||
"name": "<?php
|
||||
$djs = $mix->get_djs();
|
||||
echo $djs[0]->getName();
|
||||
?>",
|
||||
"image": "<?php echo $djs[0]->getImg(); ?>"
|
||||
},
|
||||
"inAlbum": {
|
||||
"@type": "MusicAlbum",
|
||||
"name": "<?php echo $mix->get_name(); ?>"
|
||||
},
|
||||
"genre": "<?php
|
||||
$genre = new Genre($mix->get_genres()[0], $db);
|
||||
echo $genre->get_name();
|
||||
?>",
|
||||
"url": "<?php echo "https://utahsdjs.com/mix/" . $mix->get_slug(); ?>",
|
||||
"image": "<?php echo $mix->get_cover(); ?>",
|
||||
|
||||
"duration": "<?php echo $mix->get_duration()['S']; ?>",
|
||||
<?php
|
||||
// if recorded is empty, use created; if created is empty, use 2008-01-01;
|
||||
if (empty($mix->get_recorded())) {
|
||||
if (empty($mix->get_created())) {
|
||||
$recorded = '2008-01-01 00:00:00';
|
||||
} else {
|
||||
$recorded = $mix->get_created();
|
||||
}
|
||||
} else {
|
||||
$recorded = $mix->get_recorded();
|
||||
|
||||
} ?>
|
||||
|
||||
"datePublished": "<?php echo $recorded; ?>",
|
||||
"description": "<?php
|
||||
|
||||
if (empty($mix->get_description())) {
|
||||
$description = 'Listen to ' . $mix->get_name() . ' on Utah\'s DJs.';
|
||||
}
|
||||
echo $mix->get_description(); ?>",
|
||||
"interactionStatistic": {
|
||||
"@type": "InteractionCounter",
|
||||
"interactionType": "https://schema.org/ListenAction",
|
||||
"userInteractionCount": "<?php echo $mix->get_plays() + $mix->get_downloads() ?>",
|
||||
"url": "<?php echo "https://utahsdjs.com/mix/" . $mix->get_slug() . "/download"; ?>"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</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);
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
audio.addEventListener('loadedmetadata', function() {
|
||||
seekBar.attr('max', audio.duration);
|
||||
duration.text(formatTime(audio.duration));
|
||||
});
|
||||
|
||||
playPauseBtn.click(togglePlayPause);
|
||||
|
||||
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('ended', function() {
|
||||
playPauseIcon.removeClass('fa-pause').addClass('fa-play');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<?php else: ?>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
@ -446,27 +589,5 @@ require_once 'includes/header.php'; ?>
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// 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->get_id(); ?>'}),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php require_once 'includes/footer.php'; ?>
|
||||
Loading…
Add table
Add a link
Reference in a new issue