refactor: parse track titles for styles, update date formatting, and adjust UI transition animations in music production views

resources/views/front/music-productions/index.blade.php

@@ -103,22 +103,32 @@
         @foreach($productions as $index => $production)
           @php
             $variant = $variants[$index % count($variants)];
-            $categoryLabel = $production->translate('client_name') ?: __('music_productions.card_category_default');
             $detailUrl = route('music-productions.show', $production->slug);
+            
+            $fullTitle = $production->translate('title');
+            $titlePart = $fullTitle;
+            $stylePart = '';
+            if (preg_match('/^(.*?)\s*\((.*?)\)\s*$/u', $fullTitle, $matches)) {
+                $titlePart = trim($matches[1]);
+                $stylePart = trim($matches[2]);
+            }
+            if (empty($stylePart)) {
+                $stylePart = $production->translate('client_name') ?: __('music_productions.card_category_default');
+            }
           @endphp
           <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full {{ $variant['filter'] }} px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
             <div class="player-container">
               <div class="player" data-player data-playlist="prod-{{ $production->id }}" data-track="0">
                 <div class="player__content">
-                  <div class="player__artist">{{ $production->translate('client_name') ?: __('music_productions.card_category_default') }}</div>
+                  <div class="player__artist" title="{{ $titlePart }}">{{ $titlePart }}</div>
-                  <div class="player__album">
+                  <div class="player__album" title="{{ $stylePart }}">{{ $stylePart }}</div>
+                  <div class="player__track">
                     @if($production->production_date)
-                      {{ $production->production_date->format('Y') }}
+                      {{ $production->production_date->format('d.m.Y') }}
                     @else
                       &nbsp;
                     @endif
                   </div>
-                  <div class="player__track">{{ $production->translate('title') }}</div>
                 </div>
 
                 <a href="{{ $detailUrl }}" class="album" data-album>
@@ -317,8 +327,8 @@
   --color-white: #fff;
   --color-yellow: #f0f39c;
   --color-yellow-light: #fff99e;
-  --transition-time: 250ms;
+  --transition-time: 550ms;
-  --transition-method: ease-in-out;
+  --transition-method: cubic-bezier(0.34, 1.56, 0.64, 1);
   --album-size: 260px;
   --vinyl-offset: 15px;
   --vinyl-size: calc(var(--album-size) - var(--vinyl-offset));
@@ -418,9 +428,7 @@
 
 .player .player__track::before,
 .player .player__track::after {
-  content: '"';
+  content: none;
-  font-size: 14px;
-  vertical-align: middle;
 }
 
 .album {

resources/views/front/music-productions/show.blade.php

@@ -1,6 +1,80 @@
 @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]">
@@ -11,7 +85,10 @@
             <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">{{ $production->translate('title') }}</h1>
+          <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>
@@ -45,15 +122,15 @@
           <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">{{ $production->translate('client_name') ?: __('music_productions.card_category_default') }}</div>
+                  <div class="player__artist has-fade-in" title="{{ $titlePart }}">{{ $titlePart }}</div>
-                  <div class="player__album has-fade-in">
+                  <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('Y') }}
+                      {{ $production->production_date->format('d.m.Y') }}
                     @else
                       &nbsp;
                     @endif
                   </div>
-                  <div class="player__track has-fade-in">{{ $production->translate('title') }}</div>
 
                   <div class="album" data-album>
                     <div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
@@ -210,8 +287,8 @@
   --color-white: #fff;
   --color-yellow: #f0f39c;
   --color-yellow-light: #fff99e;
-  --transition-time: 250ms;
+  --transition-time: 550ms;
-  --transition-method: ease-in-out;
+  --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));
@@ -259,7 +336,7 @@
 
 .player .player__content {
   background-color: var(--color-white);
-  height: 100%;
+  height: 135%;
   padding: 70px 20px 0 20px;
   position: relative;
   text-align: left;