Add news announcement carousel to dashboard

app/Http/Controllers/HomeController.php

@@ -7,6 +7,7 @@
 
 use App;
 use App\Libraries\CurrentStats;
+use App\Libraries\MenuContent;
 use App\Libraries\Search\AllSearch;
 use App\Libraries\Search\QuickSearch;
 use App\Models\BeatmapDownload;
@@ -98,10 +99,12 @@ public function index()
         $news = NewsPost::default()->limit($newsLimit)->get();
 
         if (Auth::check()) {
+            $menuImages = json_collection(MenuContent::activeImages(), 'MenuImage');
             $newBeatmapsets = Beatmapset::latestRanked();
             $popularBeatmapsets = Beatmapset::popular()->get();
 
             return ext_view('home.user', compact(
+                'menuImages',
                 'newBeatmapsets',
                 'news',
                 'popularBeatmapsets'

app/Libraries/MenuContent.php

@@ -0,0 +1,67 @@
+<?php
+
+// Copyright (c) ppy Pty Ltd <[email protected]>. 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);
+
+namespace App\Libraries;
+
+use Carbon\Carbon;
+use Exception;
+use GuzzleHttp\Client;
+
+class MenuContent
+{
+    /**
+     * Get all active menu content images.
+     *
+     * @return array<string, mixed>[]
+     */
+    public static function activeImages(): array
+    {
+        return cache_remember_mutexed('menu-content-active-images', 60, [], function () {
+            $images = self::parse(self::fetch());
+            $now = Carbon::now();
+
+            return array_values(array_filter($images, function ($image) use ($now) {
+                return ($image['started_at']?->lessThanOrEqualTo($now) ?? true)
+                    && ($image['ended_at']?->greaterThan($now) ?? true);
+            }));
+        });
+    }
+
+    private static function fetch(): array
+    {
+        $response = (new Client())
+            ->get(osu_url('menu_content'))
+            ->getBody()
+            ->getContents();
+
+        return json_decode($response, true);
+    }
+
+    private static function parse(array $data): array
+    {
+        if (!is_array($data['images'] ?? null)) {
+            throw new Exception('Invalid "images" key in menu-content response');
+        }
+
+        $parsedImages = [];
+
+        foreach ($data['images'] as $image) {
+            if (!is_string($image['image']) || !is_string($image['url'])) {
+                throw new Exception('Invalid "image" or "url" key in menu-content image');
+            }
+
+            $parsedImages[] = [
+                'ended_at' => parse_time_to_carbon($image['expires']),
+                'image_url' => $image['image'],
+                'started_at' => parse_time_to_carbon($image['begins']),
+                'url' => $image['url'],
+            ];
+        }
+
+        return $parsedImages;
+    }
+}

app/Transformers/MenuImageTransformer.php

@@ -0,0 +1,21 @@
+<?php
+
+// Copyright (c) ppy Pty Ltd <[email protected]>. 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);
+
+namespace App\Transformers;
+
+class MenuImageTransformer extends TransformerAbstract
+{
+    public function transform(array $menuImage): array
+    {
+        return [
+            'ended_at' => json_time($menuImage['ended_at']),
+            'image_url' => $menuImage['image_url'],
+            'started_at' => json_time($menuImage['started_at']),
+            'url' => $menuImage['url'],
+        ];
+    }
+}

config/osu.php

@@ -232,6 +232,7 @@
         'lazer_dl.windows_x64' => presence(env('OSU_URL_LAZER_WINDOWS_X64')) ?? 'https://github.com/ppy/osu/releases/latest/download/install.exe',
         'lazer_dl_other' => presence(env('OSU_URL_LAZER_OTHER')) ?? 'https://github.com/ppy/osu/#running-osu',
         'lazer_info' => presence(env('OSU_URL_LAZER_INFO')),
+        'menu_content' => 'https://assets.ppy.sh/menu-content.json',
         'osx' => 'https://osx.ppy.sh',
         'server_status' => 'https://status.ppy.sh',
         'smilies' => '/forum/images/smilies',

resources/css/bem-index.less

@@ -223,6 +223,8 @@
 @import "bem/logo";
 @import "bem/love-beatmap-dialog";
 @import "bem/medals-group";
+@import "bem/menu-image";
+@import "bem/menu-images";
 @import "bem/message-length-counter";
 @import "bem/mobile-menu";
 @import "bem/mobile-menu-tab";

resources/css/bem/menu-image.less

@@ -0,0 +1,20 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.menu-image {
+  height: 100%;
+  left: calc(100% * var(--index, 0));
+  position: absolute;
+  width: 100%;
+
+  &__image {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  &__link {
+    display: block;
+    height: 100%;
+  }
+}

resources/css/bem/menu-images.less

@@ -0,0 +1,86 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.menu-images {
+  @container-height: 250px;
+  @indicator-height: 6px;
+  @indicators-margin: 10px;
+  @margin: 20px;
+
+  margin-top: @margin;
+  overflow-x: hidden;
+  position: relative;
+
+  &__arrow {
+    .reset-input();
+    height: @container-height;
+    padding: 10px;
+    position: absolute;
+    top: 0;
+
+    &:hover {
+      color: @osu-colour-l1;
+    }
+
+    &--left {
+      --icon: @fa-var-chevron-left;
+      left: 0;
+    }
+
+    &--right {
+      --icon: @fa-var-chevron-right;
+      right: 0;
+    }
+
+    &::before {
+      .fas();
+      content: var(--icon);
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  &__container {
+    height: @container-height;
+    transform: translateX(calc(-100% * var(--index, 0)));
+
+    &--transition {
+      transition: transform 300ms ease-in-out;
+    }
+  }
+
+  &__indicator {
+    .reset-input();
+    align-items: center;
+    display: flex;
+    height: @indicator-height;
+
+    &::before {
+      background: @osu-colour-h1;
+      border-radius: 10000px;
+      content: '';
+      height: 2px;
+      opacity: 0.5;
+      transition: 100ms ease-out;
+      transition-property: height, opacity;
+      width: 30px;
+    }
+
+    &:hover::before {
+      height: @indicator-height;
+    }
+
+    &--active::before {
+      height: @indicator-height;
+      opacity: 1;
+    }
+  }
+
+  &__indicators {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+    margin-top: @indicators-margin;
+  }
+}

resources/css/bem/user-home.less

@@ -44,6 +44,20 @@
     }
   }
 
+  &__menu-images-placeholder {
+    align-items: center;
+    display: flex;
+    height: .menu-images[@container-height];
+    justify-content: center;
+    margin-top: .menu-images[@margin];
+
+    &--with-indicators {
+      // This part won't be identical to the real component if the indicators
+      // wrap onto more than one line, but it's good enough for a placeholder
+      margin-bottom: .menu-images[@indicator-height] + .menu-images[@indicators-margin];
+    }
+  }
+
   &__news-posts-group {
     .default-box-shadow();
     display: block;

resources/js/components/menu-image.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import MenuImageJson from 'interfaces/menu-image-json';
+import * as React from 'react';
+
+const bn = 'menu-image';
+
+interface Props {
+  image: MenuImageJson;
+  index?: number;
+}
+
+export default function MenuImage({ image, index }: Props) {
+  return (
+    <div
+      className={bn}
+      style={{ '--index': index } as React.CSSProperties}
+    >
+      <a className={`${bn}__link`} href={image.url}>
+        <img className={`${bn}__image`} src={image.image_url} />
+      </a>
+    </div>
+  );
+}