Add youtube embed support for changelog builds

app/Libraries/BBCodeFromDB.php

···
 
     public function parseYoutube($text)
     {
-        $text = str_replace("[youtube:{$this->uid}]", "<div class='bbcode__video-box'><div class='bbcode__video'><iframe src='https://www.youtube.com/embed/", $text);
-        $text = str_replace("[/youtube:{$this->uid}]", "?rel=0' frameborder='0' allowfullscreen></iframe></div></div>", $text);
+        $text = str_replace("[youtube:{$this->uid}]", "<div class='bbcode__video-box'><div class='u-embed-wide'><iframe src='https://www.youtube.com/embed/", $text);
+        $text = str_replace("[/youtube:{$this->uid}]", "?rel=0' allowfullscreen></iframe></div></div>", $text);
 
         return $text;
     }

app/Transformers/BuildTransformer.php

···
     public function transform(Build $build)
     {
         return [
+            'created_at' => json_time($build->date),
+            'display_version' => $build->displayVersion(),
             'id' => $build->getKey(),
+            'users' => $build->users ?? 0,
             'version' => $build->version,
-            'display_version' => $build->displayVersion(),
-            'users' => $build->users ?? 0,
-            'created_at' => json_time($build->date),
+            'youtube_id' => $build->youtube_id,
         ];
     }
 

database/migrations/2023_06_15_090320_add_youtube_id_to_builds.php

···
+<?php
+
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+declare(strict_types=1);
+
+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('osu_builds', function (Blueprint $table) {
+            $table->string('youtube_id')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('osu_builds', function (Blueprint $table) {
+            $table->dropColumn('youtube_id');
+        });
+    }
+};

resources/css/bbcode.less

···
   &__video-box {
     max-width: 425px;
   }
-
-  &__video {
-    position: relative;
-    padding-bottom: 75%;
-
-    & iframe {
-      position: absolute;
-      left: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-    }
-  }
 }

resources/css/bem-index.less

···
 @import "bem/discrete-bar";
 @import "bem/download-page";
 @import "bem/download-page-header";
-@import "bem/download-page-video";
 @import "bem/estimate-min-lines";
 @import "bem/fake-bold";
 @import "bem/fancy-graph";

resources/css/bem/build.less

···
       opacity: 0.5;
     }
   }
+
+  &__video {
+    margin-top: 20px;
+    max-width: 100%;
+  }
 }

resources/css/bem/download-page-video.less

···
-// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
-// See the LICENCE file in the repository root for full licence text.
-
-.download-page-video {
-  // this trick maintains the video's aspect ratio while resizing
-  // see: http://alistapart.com/article/creating-intrinsic-ratios-for-video
-  padding-bottom: 56.25%; /* 16:9 */
-  position: relative;
-
-  iframe {
-    .full-size();
-  }
-}

resources/css/utilities.less

···
   overflow: hidden !important;
 }
 
+.u-embed-wide {
+  // this trick maintains the video's aspect ratio while resizing
+  // see: http://alistapart.com/article/creating-intrinsic-ratios-for-video
+  padding-bottom: 56.25%; /* 16:9 */
+  position: relative;
+
+  > iframe {
+    .full-size();
+  }
+}
+
 .u-fancy-scrollbar {
   .fancy-scrollbar();
 }

resources/js/changelog-build/main.coffee

···
             className: 'builds__group',
             div
               className: 'builds__item'
-              el Build, build: @props.build, showDate: true, modifiers: ['build']
+              el Build, build: @props.build, showDate: true, showVideo: true, modifiers: ['build']
 
             div className: 'page-nav',
               div className: 'page-nav__item page-nav__item--left',

resources/js/components/build.coffee

···
 # See the LICENCE file in the repository root for full licence text.
 
 import * as React from 'react'
-import { a, div, i, span } from 'react-dom-factories'
+import { a, div, i, iframe, span } from 'react-dom-factories'
 import { classWithModifiers } from 'utils/css'
 import { changelogBuild } from 'utils/url'
 import { ChangelogEntry } from './changelog-entry'
···
       if @props.showDate ? false
         div className: 'build__date', moment(@props.build.created_at).format('LL')
 
+      if @props.build.youtube_id? && (@props.showVideo ? false)
+        div className: 'build__video u-embed-wide',
+          iframe
+            allowFullScreen: true
+            src: "https://www.youtube.com/embed/#{@props.build.youtube_id}?rel=0"
       for category in categories
         div
           key: category

resources/js/interfaces/changelog-build.ts

···
     name: string;
   };
   version: string;
+  youtube_id: string;
 }

resources/views/home/download.blade.php

···
             <h2 class="title title--page-extra">
                 {{ osu_trans('home.download.video-guide') }}
             </h2>
-            <div class="download-page-video">
+            <div class="u-embed-wide">
                 <iframe
                     src="https://youtube.com/embed/videoseries?list={{ config('osu.urls.youtube-tutorial-playlist') }}"
                 ></iframe>