add video display to artist page

venix12 · Nov 27, 2023 · d8259f1 · d8259f1
1 parent 293fca2
commit d8259f1
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 73 deletions.
diff --git a/app/Models/Artist.php b/app/Models/Artist.php
@@ -27,6 +27,7 @@
  * @property string|null $twitter
  * @property \Carbon\Carbon|null $updated_at
  * @property int|null $user_id
+ * @property string|null $video_url
  * @property int $visible
  * @property string|null $website
  * @property string|null $youtube

diff --git a/database/migrations/2023_11_27_173516_add_video_url_on_artists.php b/database/migrations/2023_11_27_173516_add_video_url_on_artists.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('artists', function (Blueprint $table) {
+            $table->string('video_url')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('multiplayer_scores_high', function (Blueprint $table) {
+            $table->dropColumn('video_url');
+        });
+    }
+};
diff --git a/resources/css/bem/artist.less b/resources/css/bem/artist.less
@@ -3,15 +3,19 @@
 
 .artist {
   @_top: artist;
-  &__index {
-    background-color: @osu-colour-b4;
-    padding: 10px;
-    .default-box-shadow();
-    display: flex;
-    justify-content: space-around;
-    flex-direction: row;
-    flex-wrap: wrap;
-    overflow: hidden;
+
+  &__admin-note {
+    background-color: @osu-colour-h2;
+    color: black;
+    font-weight: bold;
+    padding: 20px;
+    margin-bottom: 10px;
+
+    text-align: center;
+
+    @media @desktop {
+      .default-box-shadow();
+    }
   }
 
   &__badge-wrapper {
@@ -33,38 +37,6 @@
     }
   }
 
-  &__admin-note {
-    background-color: @osu-colour-h2;
-    color: black;
-    font-weight: bold;
-    padding: 20px;
-    margin-bottom: 10px;
-
-    text-align: center;
-
-    @media @desktop {
-      .default-box-shadow();
-    }
-  }
-
-  &__name {
-    white-space: nowrap;
-    color: @osu-colour-l1;
-    font-size: @font-size--title-small-3;
-    font-weight: bold;
-    margin-top: 5px;
-    display: block;
-    &:hover {
-      color: white;
-    }
-  }
-
-  &__track-count {
-    color: @osu-colour-f1;
-    font-size: 12px;
-    text-align: center;
-  }
-
   &__description {
     .default-gutter-v2();
     background-color: @osu-colour-b5;
@@ -88,10 +60,60 @@
     }
   }
 
-  &__portrait-wrapper {
-    width: 200px;
-    height: 200px;
-    position: relative;
+  &__index {
+    background-color: @osu-colour-b4;
+    padding: 10px;
+    .default-box-shadow();
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow: hidden;
+  }
+
+  &__label-overlay {
+    width: 64px;
+    height: 64px;
+    background-size: cover;
+    bottom: 0;
+    right: 0;
+    position: absolute;
+    border-radius: 4px 0 3px 0;
+    .at2x-simple-var(--artist-label-overlay);
+  }
+
+  &__links-area {
+    margin: 0 auto 10px auto;
+    width: 270px;
+    padding: 10px;
+
+    @media @desktop {
+      .default-box-shadow();
+      background: @osu-colour-b5;
+    }
+
+    &--albums {
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      @media @mobile {
+        display: none;
+      }
+    }
+  }
+
+  &__name {
+    white-space: nowrap;
+    color: @osu-colour-l1;
+    font-size: @font-size--title-small-3;
+    font-weight: bold;
+    margin-top: 5px;
+    display: block;
+    &:hover {
+      color: white;
+    }
   }
 
   &__portrait {
@@ -125,37 +147,22 @@
     }
   }
 
-  &__label-overlay {
-    width: 64px;
-    height: 64px;
-    background-size: cover;
-    bottom: 0;
-    right: 0;
-    position: absolute;
-    border-radius: 4px 0 3px 0;
-    .at2x-simple-var(--artist-label-overlay);
+  &__portrait-wrapper {
+    width: 200px;
+    height: 200px;
+    position: relative;
   }
 
-  &__links-area {
-    margin: 0 auto 10px auto;
-    width: 270px;
-    padding: 10px;
-
-    @media @desktop {
-      .default-box-shadow();
-      background: @osu-colour-b5;
-    }
-
-    &--albums {
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+  &__track-count {
+    color: @osu-colour-f1;
+    font-size: 12px;
+    text-align: center;
+  }
 
-      @media @mobile {
-        display: none;
-      }
-    }
+  &__video {
+    margin: 20px auto 0;
+    border-radius: @border-radius-large;
+    overflow: hidden;
   }
 
   &__white-link {

diff --git a/resources/views/artists/show.blade.php b/resources/views/artists/show.blade.php
@@ -46,6 +46,14 @@
                     <h1>{{ $artist->name }}</h1>
 
                     {!! markdown($artist->description) !!}
+
+                    @if ($artist->video_url !== null)
+                        <div class="artist__video">
+                            <div class="u-embed-wide">
+                                <iframe src="{{ $artist->video_url }}" allowfullscreen></iframe>
+                            </div>
+                        </div>
+                    @endif
                 </div>
                 @if (count($json['albums']) > 0)
                     <div class="artist__albums">