diff --git a/css/video-page.css b/css/video-page.css index 824bb9c..7b3cbd4 100644 --- a/css/video-page.css +++ b/css/video-page.css @@ -239,6 +239,55 @@ white-space: pre-line; } +.truncated-description, .full-description { + position: relative; + padding-bottom: 40px; +} + +.truncated-description { + position: relative; +} + +.truncated-description::after { + content: ''; + position: absolute; + bottom: 40px; + left: 0; + right: 0; + height: 60px; + background: linear-gradient(transparent, #fff); + pointer-events: none; +} + +.show-more-btn, .show-less-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + background-color: #f5f5f5; + border: 1px solid #e0e0e0; + color: var(--primary-red); + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; + padding: 8px 16px; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + transition: all 0.2s; + border-radius: 20px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + width: auto; + min-width: 120px; +} + +.show-more-btn:hover, .show-less-btn:hover { + background-color: #f0f0f0; + box-shadow: 0 3px 6px rgba(0,0,0,0.15); + transform: translateX(-50%) translateY(-2px); +} + /* Licence de la vidéo */ .video-licence { background-color: #f9f9f9; diff --git a/video.php b/video.php index 290e51e..22825d3 100644 --- a/video.php +++ b/video.php @@ -26,6 +26,7 @@ if (empty($videoData) || isset($videoData['error'])) { 'title' => $videoData['name'], 'url' => PEERTUBE_URL . '/videos/embed/' . $videoData['uuid'], 'description' => $videoData['description'] ?? '', + 'truncatedDescription' => $videoData['truncatedDescription'] ?? '', 'channel' => $videoData['channel']['displayName'], 'channelId' => $videoData['channel']['id'], 'channelHandle' => $videoData['channel']['name'], @@ -257,7 +258,30 @@ if (empty($videoData) || isset($videoData['error'])) {
- + +
+ + +
+ + + +
@@ -484,6 +508,24 @@ if (empty($videoData) || isset($videoData['error'])) {