Ümit Tunç
862 lines
26 KiB
PHP
862 lines
26 KiB
PHP
@extends('layouts.site')
|
|
|
|
@section('content')
|
|
@php
|
|
$fullTitle = $production->translate('title');
|
|
$titlePart = $fullTitle;
|
|
$stylePart = '';
|
|
if (preg_match('/^(.*?)\s*\((.*?)\)\s*$/u', $fullTitle, $matches)) {
|
|
$titlePart = trim($matches[1]);
|
|
$stylePart = trim($matches[2]);
|
|
}
|
|
|
|
$contentHtml = $production->translate('content');
|
|
|
|
$isYoutubeFormat = false;
|
|
if (stripos($contentHtml, 'Provided to YouTube') !== false || stripos($contentHtml, 'Auto-generated by YouTube') !== false) {
|
|
$isYoutubeFormat = true;
|
|
}
|
|
|
|
$trackNameParsed = null;
|
|
$styleParsed = null;
|
|
$distributor = null;
|
|
$contributors = [];
|
|
$label = null;
|
|
$releasedOn = null;
|
|
$remainingLines = [];
|
|
|
|
if ($isYoutubeFormat) {
|
|
$rawText = strip_tags(str_replace(['<p>', '</p>', '<br>', '<br />', '<br/>'], ["\n", "\n", "\n", "\n", "\n"], $contentHtml));
|
|
$lines = array_filter(array_map('trim', explode("\n", $rawText)));
|
|
|
|
foreach ($lines as $line) {
|
|
if (empty($line)) continue;
|
|
|
|
if (preg_match('/Provided to YouTube by\s+(.+)/i', $line, $m)) {
|
|
$distributor = trim($m[1]);
|
|
}
|
|
elseif (strpos($line, '·') !== false) {
|
|
$parts = array_map('trim', explode('·', $line));
|
|
if (count($parts) > 0) {
|
|
$trackPart = $parts[0];
|
|
if (preg_match('/^(.*?)\s*\((.*?)\)\s*$/u', $trackPart, $tm)) {
|
|
$trackNameParsed = trim($tm[1]);
|
|
$styleParsed = trim($tm[2]);
|
|
} else {
|
|
$trackNameParsed = $trackPart;
|
|
}
|
|
|
|
for ($i = 1; $i < count($parts); $i++) {
|
|
$contributors[] = $parts[$i];
|
|
}
|
|
}
|
|
}
|
|
elseif (preg_match('/℗\s*(.+)/u', $line, $m)) {
|
|
$label = trim($m[1]);
|
|
}
|
|
elseif (preg_match('/Released on:\s*(.+)/i', $line, $m)) {
|
|
$releasedOn = trim($m[1]);
|
|
}
|
|
elseif (stripos($line, 'Auto-generated by YouTube') !== false) {
|
|
// Skip line
|
|
}
|
|
elseif (stripos($line, 'YouTube\'da İzle') !== false || stripos($line, 'Watch on YouTube') !== false) {
|
|
// Skip line
|
|
}
|
|
else {
|
|
$normLine = trim(strtolower($line));
|
|
$normTitle = trim(strtolower($production->translate('title')));
|
|
if ($normLine === $normTitle || ($trackNameParsed && $normLine === trim(strtolower($trackNameParsed)))) {
|
|
continue;
|
|
}
|
|
$remainingLines[] = $line;
|
|
}
|
|
}
|
|
}
|
|
@endphp
|
|
|
|
<section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 pb-36 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-60 lg:pb-60 md:pb-60 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-10/12 lg:w-8/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="post-header">
|
|
@if($production->client_name)
|
|
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#74788d] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
|
|
<span>{{ $production->translate('client_name') }}</span>
|
|
</div>
|
|
@endif
|
|
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">{{ $titlePart }}</h1>
|
|
@if($stylePart || $styleParsed)
|
|
<p class="lead !text-[1.15rem] !mb-4 font-semibold text-[#747ed1]">{{ $stylePart ?: $styleParsed }}</p>
|
|
@endif
|
|
@if($production->production_date)
|
|
<p class="lead !leading-[1.65] text-[.9rem] font-medium text-[#60697b]">
|
|
<i class="uil uil-calendar-alt before:content-['\e9ba'] !mr-1"></i>
|
|
{{ $production->production_date->format('d.m.Y') }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<article class="!mt-[-12.5rem]">
|
|
@php
|
|
$videoId = null;
|
|
if ($production->youtube_video_id) {
|
|
$videoId = $production->youtube_video_id;
|
|
} elseif ($production->youtube_url) {
|
|
if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $production->youtube_url, $match)) {
|
|
$videoId = $match[1];
|
|
}
|
|
}
|
|
@endphp
|
|
|
|
{{-- Vinyl Player Mockup --}}
|
|
@if($production->cover_image_url)
|
|
<div class="player-container flex justify-center !mb-12 xl:!mb-16">
|
|
<div class="player player--open" id="detail-vinyl-player" data-player>
|
|
<div class="player__content">
|
|
<div class="player__artist has-fade-in" title="{{ $titlePart }}">{{ $titlePart }}</div>
|
|
<div class="player__album has-fade-in" title="{{ $stylePart ?: ($production->translate('client_name') ?: __('music_productions.card_category_default')) }}">{{ $stylePart ?: ($production->translate('client_name') ?: __('music_productions.card_category_default')) }}</div>
|
|
<div class="player__track has-fade-in">
|
|
@if($production->production_date)
|
|
{{ $production->production_date->format('d.m.Y') }}
|
|
@else
|
|
|
|
@endif
|
|
</div>
|
|
|
|
<div class="album" data-album>
|
|
<div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
|
|
<div class="vinyl">
|
|
<div class="vinyl__shadow"></div>
|
|
<div class="vinyl__circle">
|
|
<div class="vinyl__center" style="--center-bg: url('{{ $production->cover_image_url }}')"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player__controls has-fade-in">
|
|
@if($prev)
|
|
<a href="{{ route('music-productions.show', $prev->slug) }}" class="player__controls-item player__controls-item--prev" title="{{ __('music_productions.prev') }}"></a>
|
|
@else
|
|
<div class="player__controls-item player__controls-item--prev opacity-30 cursor-not-allowed"></div>
|
|
@endif
|
|
|
|
<div class="player__controls-item player__controls-item--play" id="play-cd-btn" title="{{ __('music_productions.youtube_watch_on_youtube') }}">
|
|
<div class="rectangle"></div>
|
|
<div class="triangle"></div>
|
|
</div>
|
|
|
|
@if($next)
|
|
<a href="{{ route('music-productions.show', $next->slug) }}" class="player__controls-item player__controls-item--next" title="{{ __('music_productions.next') }}"></a>
|
|
@else
|
|
<div class="player__controls-item player__controls-item--next opacity-30 cursor-not-allowed"></div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Hidden Background YouTube Player --}}
|
|
@if($videoId)
|
|
<div id="hidden-youtube-player-container" style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; left: -9999px;">
|
|
<div id="hidden-youtube-player"></div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Content & Meta --}}
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xl:w-10/12 xl:!ml-[8.33333333%] lg:w-10/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h2 class="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-4">{{ __('music_productions.project_details') }}</h2>
|
|
<div class="flex flex-wrap mx-0">
|
|
{{-- Content column --}}
|
|
<div class="xl:w-9/12 lg:w-9/12 md:w-9/12 w-full flex-[0_0_auto] max-w-full">
|
|
<div class="music-production-content prose max-w-none">
|
|
{!! $production->translate('content') !!}
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Sidebar - Date & Client --}}
|
|
<div class="metadata-table w-full max-w-2xl mx-auto my-6">
|
|
<table class="w-full border border-gray-200 rounded-md overflow-hidden">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th class="px-4 py-2 text-left font-medium text-gray-700">Field</th>
|
|
<th class="px-4 py-2 text-left font-medium text-gray-700">Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white">
|
|
<tr class="border-t">
|
|
<td class="px-4 py-2">Track</td>
|
|
<td class="px-4 py-2">{{ $trackNameParsed ?? $titlePart }}</td>
|
|
</tr>
|
|
@if($styleParsed)
|
|
<tr class="border-t">
|
|
<td class="px-4 py-2">Style</td>
|
|
<td class="px-4 py-2">{{ $styleParsed }}</td>
|
|
</tr>
|
|
@endif
|
|
@if(!empty($contributors))
|
|
<tr class="border-t">
|
|
<td class="px-4 py-2">Contributors</td>
|
|
<td class="px-4 py-2">{{ implode(', ', $contributors) }}</td>
|
|
</tr>
|
|
@endif
|
|
@if($releasedOn)
|
|
<tr class="border-t">
|
|
<td class="px-4 py-2">Released on</td>
|
|
<td class="px-4 py-2">{{ $releasedOn }}</td>
|
|
</tr>
|
|
@endif
|
|
@if($distributor)
|
|
<tr class="border-t">
|
|
<td class="px-4 py-2">Distributor</td>
|
|
<td class="px-4 py-2">{{ $distributor }}</td>
|
|
</tr>
|
|
@endif
|
|
@if($label)
|
|
<tr class="border-t">
|
|
<td class="px-4 py-2">Label</td>
|
|
<td class="px-4 py-2">{{ $label }}</td>
|
|
</tr>
|
|
@endif
|
|
@if($production->spotify_url)
|
|
<tr class="border-t">
|
|
<td class="px-4 py-2">Spotify</td>
|
|
<td class="px-4 py-2"><a href="{{ $production->spotify_url }}" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">{{ __('music_productions.spotify_listen_on_spotify') }}</a></td>
|
|
</tr>
|
|
@endif
|
|
@if($production->youtube_url)
|
|
<tr class="border-t">
|
|
<td class="px-4 py-2">YouTube</td>
|
|
<td class="px-4 py-2"><a href="{{ $production->youtube_url }}" target="_blank" rel="noopener noreferrer" class="text-red-600 underline">{{ __('music_productions.youtube_watch_on_youtube') }}</a></td>
|
|
</tr>
|
|
@endif
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Gallery --}}
|
|
@php
|
|
$gallery = $production->gallery;
|
|
@endphp
|
|
@if(!empty($gallery) && is_array($gallery) && count($gallery) > 0)
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[25px]">
|
|
@foreach($gallery as $galleryImage)
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
|
<figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
|
|
<a href="{{ asset('storage/' . $galleryImage) }}" data-glightbox data-gallery="music-production-gallery">
|
|
<img class="transition-all duration-[0.35s] ease-in-out group-hover:scale-105 !rounded-[.4rem] w-full" src="{{ asset('storage/' . $galleryImage) }}" alt="{{ $production->translate('title') }}">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Post Navigation (Prev / Next) --}}
|
|
<div class="wrapper !bg-[#ffffff]">
|
|
<div class="container py-10">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[-15px] xl:!mt-0 lg:!mt-0 md:!mt-0">
|
|
<div class="xl:w-8/12 lg:w-8/12 md:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full self-center text-center xl:text-left lg:text-left md:text-left navigation">
|
|
@if($prev)
|
|
<a href="{{ route('music-productions.show', $prev->slug) }}" class="btn btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 !mr-[.25rem] hover:translate-y-[-0.15rem]">
|
|
<i class="uil uil-arrow-left before:content-['\e949']"></i> {{ __('music_productions.prev') }}
|
|
</a>
|
|
@endif
|
|
@if($next)
|
|
<a href="{{ route('music-productions.show', $next->slug) }}" class="btn btn-soft-ash !rounded-[50rem] btn-icon btn-icon-end hover:translate-y-[-0.15rem] !mb-0">
|
|
{{ __('music_productions.next') }} <i class="uil uil-arrow-right before:content-['\e94c']"></i>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
<aside class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full max-md:!mt-[15px] sidebar text-center xl:text-right lg:text-right md:text-right">
|
|
<a href="{{ route('music-productions.index') }}" class="btn btn-soft-primary !rounded-[50rem] btn-icon btn-icon-start hover:translate-y-[-0.15rem] !mb-0">
|
|
<i class="uil uil-apps before:content-['\e93e']"></i> {{ __('music_productions.back_to_list') }}
|
|
</a>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* --- Vinyl Player Styles --- */
|
|
:root {
|
|
--color-black: #000;
|
|
--color-gray: #5e6062;
|
|
--color-white: #fff;
|
|
--color-yellow: #f0f39c;
|
|
--color-yellow-light: #fff99e;
|
|
--transition-time: 550ms;
|
|
--transition-method: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--album-size: 310px;
|
|
--vinyl-offset: 20px;
|
|
--vinyl-size: calc(var(--album-size) - var(--vinyl-offset));
|
|
--vinyl-center-size: 130px;
|
|
}
|
|
|
|
.player-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px 0;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.player {
|
|
color: var(--color-gray);
|
|
font-family: 'Raleway', 'Outfit', sans-serif;
|
|
height: var(--album-size);
|
|
line-height: 1.2;
|
|
position: relative;
|
|
width: var(--album-size);
|
|
transition: all var(--transition-time) var(--transition-method);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.player::after {
|
|
transform: rotate(-2deg);
|
|
transition: all var(--transition-time) var(--transition-method);
|
|
background: #777;
|
|
bottom: 12px;
|
|
box-shadow: 0 15px 23px rgba(0, 0, 0, 0.3);
|
|
content: '';
|
|
height: 10px;
|
|
left: 2%;
|
|
opacity: 0;
|
|
padding-left: 5%;
|
|
position: absolute;
|
|
width: 96%;
|
|
z-index: 5;
|
|
}
|
|
|
|
.player--open::after {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.player .player__content {
|
|
background-color: var(--color-white);
|
|
height: 135%;
|
|
padding: 70px 20px 0 20px;
|
|
position: relative;
|
|
text-align: left;
|
|
width: 100%;
|
|
z-index: 10;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
border: 1px solid rgba(8, 60, 130, 0.05);
|
|
}
|
|
|
|
.player .player__artist {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
max-width: 180px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #343f52;
|
|
}
|
|
|
|
.player .player__album {
|
|
font-size: 15px;
|
|
font-weight: 300;
|
|
margin-bottom: 20px;
|
|
max-width: 180px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #a4aec6;
|
|
}
|
|
|
|
.player .player__track {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
margin-bottom: 20px;
|
|
max-width: 180px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #60697b;
|
|
}
|
|
|
|
.player .player__track::before,
|
|
.player .player__track::after {
|
|
content: '"';
|
|
font-size: 16px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.player--open {
|
|
border-radius: 8px;
|
|
height: 320px;
|
|
position: relative;
|
|
width: 440px;
|
|
}
|
|
|
|
.player__controls {
|
|
position: absolute;
|
|
bottom: 25px;
|
|
left: 20px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
width: 180px;
|
|
z-index: 15;
|
|
}
|
|
|
|
.player__controls-item {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
height: 26px;
|
|
margin-right: 15px;
|
|
position: relative;
|
|
width: 26px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.player__controls-item--play {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.player__controls-item--play .rectangle,
|
|
.player__controls-item--play .triangle {
|
|
height: 26px;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 26px;
|
|
}
|
|
|
|
.player__controls-item--play .rectangle {
|
|
z-index: 5;
|
|
}
|
|
|
|
.player__controls-item--play .rectangle::before,
|
|
.player__controls-item--play .rectangle::after {
|
|
transition: all 0.3s ease;
|
|
background-color: #e31e24;
|
|
content: '';
|
|
height: 100%;
|
|
width: 50%;
|
|
}
|
|
|
|
.player--playing .player__controls-item--play .rectangle::before,
|
|
.player--playing .player__controls-item--play .rectangle::after {
|
|
width: 30%;
|
|
}
|
|
|
|
.player__controls-item--play .rectangle::before {
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.player__controls-item--play .rectangle::after {
|
|
float: right;
|
|
}
|
|
|
|
.player__controls-item--play .triangle {
|
|
z-index: 10;
|
|
}
|
|
|
|
.player__controls-item--play .triangle::before,
|
|
.player__controls-item--play .triangle::after {
|
|
transition: all 0.3s ease;
|
|
background-color: transparent;
|
|
border-bottom: 13px solid transparent;
|
|
border-right: 26px solid #fff;
|
|
border-top: 13px solid transparent;
|
|
content: '';
|
|
height: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.player__controls-item--play .triangle::before {
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
.player--playing .player__controls-item--play .triangle::before {
|
|
transform: translate(0, -100%);
|
|
}
|
|
|
|
.player__controls-item--play .triangle::after {
|
|
transform: translate(0, 50%);
|
|
}
|
|
|
|
.player--playing .player__controls-item--play .triangle::after {
|
|
transform: translate(0, 100%);
|
|
}
|
|
|
|
.player__controls-item--play:hover .rectangle::before,
|
|
.player__controls-item--play:hover .rectangle::after {
|
|
background-color: #c1181d;
|
|
}
|
|
|
|
.player__controls-item--next,
|
|
.player__controls-item--prev {
|
|
width: 32px;
|
|
}
|
|
|
|
.player__controls-item--next::before,
|
|
.player__controls-item--next::after,
|
|
.player__controls-item--prev::before,
|
|
.player__controls-item--prev::after {
|
|
transition: all 0.3s ease;
|
|
border-bottom: 13px solid transparent;
|
|
border-top: 13px solid transparent;
|
|
content: '';
|
|
height: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.player__controls-item--next::before,
|
|
.player__controls-item--next::after {
|
|
border-left: 16px solid #e31e24;
|
|
}
|
|
|
|
.player__controls-item--next::before {
|
|
left: 0;
|
|
}
|
|
|
|
.player__controls-item--next::after {
|
|
left: 10px;
|
|
}
|
|
|
|
.player__controls-item--next:hover::before,
|
|
.player__controls-item--next:hover::after {
|
|
border-left-color: #c1181d;
|
|
}
|
|
|
|
.player__controls-item--prev::before,
|
|
.player__controls-item--prev::after {
|
|
border-right: 16px solid #e31e24;
|
|
}
|
|
|
|
.player__controls-item--prev::before {
|
|
right: 0;
|
|
}
|
|
|
|
.player__controls-item--prev::after {
|
|
right: 10px;
|
|
}
|
|
|
|
.player__controls-item--prev:hover::before,
|
|
.player__controls-item--prev:hover::after {
|
|
border-right-color: #c1181d;
|
|
}
|
|
|
|
.album {
|
|
transform: translateY(-50%);
|
|
transition: all var(--transition-time) var(--transition-method);
|
|
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
|
|
cursor: pointer;
|
|
height: var(--album-size);
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
width: var(--album-size);
|
|
z-index: 100;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.player--open .album {
|
|
cursor: default;
|
|
right: -80px;
|
|
}
|
|
|
|
.album__cover {
|
|
background-color: var(--color-black);
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 100%;
|
|
position: relative;
|
|
width: 100%;
|
|
z-index: 20;
|
|
border-radius: 8px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.vinyl {
|
|
transition: all var(--transition-time) var(--transition-method);
|
|
left: calc(var(--vinyl-offset) / 2);
|
|
position: absolute;
|
|
top: calc(var(--vinyl-offset) / 2);
|
|
height: var(--vinyl-size);
|
|
width: var(--vinyl-size);
|
|
z-index: 10;
|
|
}
|
|
|
|
.vinyl__shadow,
|
|
.vinyl__circle {
|
|
border-radius: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.vinyl__shadow {
|
|
box-shadow: 2px 8px 15px rgba(0, 0, 0, 0.2);
|
|
z-index: 5;
|
|
}
|
|
|
|
.vinyl__circle {
|
|
animation: rotate-vinyl 3s linear infinite both paused;
|
|
background-color: #1e1b1b;
|
|
background-image: radial-gradient(circle, #2c2727 10%, transparent 10%),
|
|
repeating-radial-gradient(circle, #2c2727, #1e1b1b 2px, #2c2727 4px);
|
|
z-index: 10;
|
|
}
|
|
|
|
.player--open .vinyl {
|
|
left: 0 !important;
|
|
}
|
|
|
|
.player--playing .vinyl {
|
|
left: 45% !important;
|
|
}
|
|
|
|
.player--playing .vinyl__circle {
|
|
animation-play-state: running;
|
|
}
|
|
|
|
.vinyl__center {
|
|
transform: translate(-50%, -50%);
|
|
background-color: #292424;
|
|
border-radius: 100%;
|
|
height: var(--vinyl-center-size);
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: var(--vinyl-center-size);
|
|
}
|
|
|
|
.vinyl__center::before,
|
|
.vinyl__center::after {
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 100%;
|
|
content: '';
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
}
|
|
|
|
.vinyl__center::before {
|
|
background-color: #e31e24;
|
|
background-image: var(--center-bg);
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: calc(var(--vinyl-center-size) - 20px);
|
|
width: calc(var(--vinyl-center-size) - 20px);
|
|
z-index: 5;
|
|
}
|
|
|
|
.vinyl__center::after {
|
|
background-color: #fff;
|
|
height: 20px;
|
|
width: 20px;
|
|
z-index: 10;
|
|
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
@keyframes rotate-vinyl {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.has-fade-in {
|
|
transition: all calc(var(--transition-time) * 2) var(--transition-method);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.player--open .has-fade-in {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Content styling */
|
|
.music-production-content p {
|
|
margin-bottom: 1rem;
|
|
line-height: 1.75;
|
|
}
|
|
.music-production-content img {
|
|
border-radius: 0.4rem;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.music-production-content h2,
|
|
.music-production-content h3,
|
|
.music-production-content h4 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Gallery hover effect */
|
|
.cursor-dark figure {
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
.cursor-dark:hover figure {
|
|
box-shadow: 0 0.5rem 2rem rgba(30,34,40,0.12);
|
|
}
|
|
|
|
/* Entrance animation */
|
|
article {
|
|
animation: fadeIn 0.8s ease forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Flatten elements when lightbox is open to fix stacking context issues */
|
|
body.lightbox-open .player-container,
|
|
body.lightbox-open .player {
|
|
transform: none !important;
|
|
perspective: none !important;
|
|
z-index: 1 !important;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Load YouTube Iframe Player API dynamically
|
|
var tag = document.createElement('script');
|
|
tag.src = "https://www.youtube.com/iframe_api";
|
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
|
|
var ytPlayer;
|
|
var isPlayerReady = false;
|
|
|
|
window.onYouTubeIframeAPIReady = function() {
|
|
ytPlayer = new YT.Player('hidden-youtube-player', {
|
|
height: '1',
|
|
width: '1',
|
|
videoId: "{{ $videoId }}",
|
|
playerVars: {
|
|
'autoplay': 0,
|
|
'controls': 0,
|
|
'disablekb': 1,
|
|
'fs': 0,
|
|
'modestbranding': 1,
|
|
'rel': 0,
|
|
'showinfo': 0
|
|
},
|
|
events: {
|
|
'onReady': onPlayerReady,
|
|
'onStateChange': onPlayerStateChange
|
|
}
|
|
});
|
|
}
|
|
|
|
function onPlayerReady(event) {
|
|
isPlayerReady = true;
|
|
|
|
// Check if auto-play was active from previous page
|
|
const autoPlayActive = localStorage.getItem('vinyl_auto_play') === 'true';
|
|
if (autoPlayActive) {
|
|
startPlayback();
|
|
}
|
|
}
|
|
|
|
function onPlayerStateChange(event) {
|
|
const playerEl = document.getElementById('detail-vinyl-player');
|
|
if (!playerEl) return;
|
|
|
|
if (event.data === YT.PlayerState.PLAYING) {
|
|
playerEl.classList.add('player--playing');
|
|
localStorage.setItem('vinyl_auto_play', 'true');
|
|
} else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {
|
|
playerEl.classList.remove('player--playing');
|
|
if (event.data === YT.PlayerState.ENDED) {
|
|
localStorage.setItem('vinyl_auto_play', 'false');
|
|
}
|
|
}
|
|
}
|
|
|
|
function startPlayback() {
|
|
if (isPlayerReady && ytPlayer && typeof ytPlayer.playVideo === 'function') {
|
|
ytPlayer.playVideo();
|
|
}
|
|
}
|
|
|
|
function pausePlayback() {
|
|
if (isPlayerReady && ytPlayer && typeof ytPlayer.pauseVideo === 'function') {
|
|
ytPlayer.pauseVideo();
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const playBtn = document.getElementById('play-cd-btn');
|
|
const playerEl = document.getElementById('detail-vinyl-player');
|
|
|
|
if (playBtn) {
|
|
playBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
if (!isPlayerReady) return;
|
|
|
|
if (playerEl.classList.contains('player--playing')) {
|
|
pausePlayback();
|
|
localStorage.setItem('vinyl_auto_play', 'false');
|
|
} else {
|
|
startPlayback();
|
|
localStorage.setItem('vinyl_auto_play', 'true');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Capture next/prev clicks to persist play state
|
|
const prevBtn = document.querySelector('.player__controls-item--prev');
|
|
const nextBtn = document.querySelector('.player__controls-item--next');
|
|
|
|
[prevBtn, nextBtn].forEach(btn => {
|
|
if (btn && btn.tagName === 'A') {
|
|
btn.addEventListener('click', function() {
|
|
if (playerEl && playerEl.classList.contains('player--playing')) {
|
|
localStorage.setItem('vinyl_auto_play', 'true');
|
|
} else {
|
|
localStorage.setItem('vinyl_auto_play', 'false');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|