Ajout de youtube + spotify

This commit is contained in:
stiti 2024-05-26 17:44:28 +02:00
parent 9798f648d4
commit 2bcedf4f24
7 changed files with 179 additions and 48 deletions

View File

@ -32,12 +32,18 @@
</header>
<img src="data:image/jpeg;base64,<?php echo base64_encode($musique->cover); ?>" alt="Couverture de l'album">
<footer class="short-text">
<a href="<?php echo base_url('index.php/artiste/index/'.$musique->artist_id); ?>">
<a href="<?php echo base_url('index.php/artiste/index/'.$musique->artist_id); ?>" class="artist-name">
<?php echo $musique->artistName; ?>
</a> -
<a href="<?php echo base_url('index.php/albums/view/'.$musique->album_id); ?>">
<a href="<?php echo base_url('index.php/albums/view/'.$musique->album_id); ?>" class="album-name">
<?php echo $musique->album_name; ?>
</a>
<div class="music-links">
<!-- Lien Spotify -->
<a href="https://open.spotify.com/search/<?php echo urlencode($musique->name . ' ' . $musique->artistName); ?>" class="spotify" target="_blank">Écouter sur Spotify</a>
<!-- Lien YouTube -->
<a href="https://www.youtube.com/results?search_query=<?php echo urlencode($musique->name . ' ' . $musique->artistName); ?>" class="youtube" target="_blank">Regarder sur YouTube</a>
</div>
</footer>
</article>
</div>

View File

@ -3,70 +3,79 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo base_url('assets/css/search_results.css'); ?>">
<title>Résultats de la recherche</title>
</head>
<body>
<h2>Résultats de la recherche pour "<?php echo htmlspecialchars($query, ENT_QUOTES, 'UTF-8'); ?>"</h2>
<h2 class="search-title">Résultats de la recherche pour "<?php echo htmlspecialchars($query, ENT_QUOTES, 'UTF-8'); ?>"</h2>
<?php if (!empty($error)): ?>
<p><?php echo $error; ?></p>
<p class="error-message"><?php echo $error; ?></p>
<?php endif; ?>
<?php if (!empty($musiques)): ?>
<h3>Musiques</h3>
<ul>
<?php foreach($musiques as $musique): ?>
<li>
<?php echo htmlspecialchars($musique->name, ENT_QUOTES, 'UTF-8'); ?> -
<a href="<?php echo site_url('artiste/'.$musique->artist_id); ?>">
<?php echo htmlspecialchars($musique->artistName, ENT_QUOTES, 'UTF-8'); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<div class="section">
<h3 class="section-title">Musiques</h3>
<ul class="music-list">
<?php foreach($musiques as $musique): ?>
<li>
<?php echo htmlspecialchars($musique->name, ENT_QUOTES, 'UTF-8'); ?> -
<a href="<?php echo site_url('artiste/'.$musique->artist_id); ?>">
<?php echo htmlspecialchars($musique->artistName, ENT_QUOTES, 'UTF-8'); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php if (!empty($albums)): ?>
<h3>Albums</h3>
<ul>
<?php foreach($albums as $album): ?>
<li>
<a href="<?php echo site_url('albums/view/'.$album->id); ?>">
<?php echo htmlspecialchars($album->name, ENT_QUOTES, 'UTF-8'); ?>
</a>
-
<a href="<?php echo site_url('artiste/'.$musique->artist_id); ?>">
<?php echo htmlspecialchars($musique->artistName, ENT_QUOTES, 'UTF-8'); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<div class="section">
<h3 class="section-title">Albums</h3>
<ul class="album-list">
<?php foreach($albums as $album): ?>
<li>
<a href="<?php echo site_url('albums/view/'.$album->id); ?>">
<?php echo htmlspecialchars($album->name, ENT_QUOTES, 'UTF-8'); ?>
</a>
-
<a href="<?php echo site_url('artiste/'.$musique->artist_id); ?>">
<?php echo htmlspecialchars($musique->artistName, ENT_QUOTES, 'UTF-8'); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php if (!empty($genres)): ?>
<h3>Genres</h3>
<ul>
<?php foreach($genres as $genre): ?>
<li><?php echo htmlspecialchars($genre->name, ENT_QUOTES, 'UTF-8'); ?></li>
<?php endforeach; ?>
</ul>
<div class="section">
<h3 class="section-title">Genres</h3>
<ul class="genre-list">
<?php foreach($genres as $genre): ?>
<li><?php echo htmlspecialchars($genre->name, ENT_QUOTES, 'UTF-8'); ?></li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php if (!empty($artistes)): ?>
<h3>Artistes</h3>
<ul>
<?php foreach($artistes as $artiste): ?>
<li>
<a href="<?php echo site_url('artiste/'.$artiste->id); ?>">
<?php echo htmlspecialchars($artiste->name, ENT_QUOTES, 'UTF-8'); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<div class="section">
<h3 class="section-title">Artistes</h3>
<ul class="artist-list">
<?php foreach($artistes as $artiste): ?>
<li>
<a href="<?php echo site_url('artiste/'.$artiste->id); ?>">
<?php echo htmlspecialchars($artiste->name, ENT_QUOTES, 'UTF-8'); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php if (empty($musiques) && empty($albums) && empty($genres) && empty($artistes)): ?>
<p>Aucun résultat trouvé.</p>
<p class="no-results">Aucun résultat trouvé.</p>
<?php endif; ?>
</body>

View File

@ -35,7 +35,7 @@ a {
a:hover {
text-decoration: underline;
}
/* Styles pour les boutons de pagination */
.pagination {
text-align: center;
margin-top: 20px;
@ -59,3 +59,18 @@ a:hover {
.pagination .active {
background-color: #29043e;
}
.music-links {
margin-top: 10px;
}
.music-links a {
display: inline-block;
margin-right: 10px;
color: #560d61;
text-decoration: none;
}
.music-links a:hover {
text-decoration: underline;
}

View File

@ -0,0 +1,62 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
.search-title {
color: #6a0dad;
text-align: center;
margin-top: 20px;
}
.error-message {
color: #f44336;
text-align: center;
}
.section {
margin-bottom: 30px;
}
.section-title {
color: #6a0dad;
font-size: 1.5em;
}
ul {
padding: 0;
}
ul li {
margin-bottom: 10px;
}
ul li a {
color: #6a0dad;
text-decoration: none;
transition: color 0.3s ease;
}
ul li a:hover {
color: #4a0772;
}
.no-results {
text-align: center;
color: #777; /* Grey */
}
/* Responsive styles */
@media screen and (max-width: 768px) {
ul li {
width: 45%;
}
}
@media screen and (max-width: 576px) {
ul li {
width: 100%;
}
}

View File

@ -135,3 +135,42 @@ header.short-text a {
background-color: #6a0080;
}
.music-links {
margin-top: 10px;
}
.music-links a {
display: inline-block;
margin-right: 10px;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease;
}
.spotify {
background-color: #5bab15;
}
.youtube {
background-color: #c51414;
}
.spotify:hover{
background-color: #3c6915;
}
.youtube:hover {
background-color: #7a1818;
}
.artist-name,
.album-name {
display: inline-block;
margin-right: 10px;
padding: 5px 10px;
border-radius: 5px;
background-color: #7300ff;
color: #fff;
transition: background-color 0.3s ease;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB