add: buttons to horizontally scroll poster row

Author: Roardom

resources/js/app.js

@@ -44,6 +44,7 @@ import './components/alpine/dialog';
 import './components/alpine/dislikeButton';
 import './components/alpine/likeButton';
 import './components/alpine/livewireDialog';
+import './components/alpine/posterRow';
 import './components/alpine/smallBookmarkButton';
 import './components/alpine/tabs';
 import './components/alpine/toggle';

resources/js/components/alpine/posterRow.js

@@ -0,0 +1,69 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('posterRow', () => ({
+        tab: null,
+        init() {
+            this.tab = this.$root.dataset.defaultTab;
+        },
+        getPosterRow() {
+            let panel = this.$el.closest('.panelV2');
+            let posterRows = panel.querySelectorAll('[x-ref="posters"]');
+
+            let posterRow = [...posterRows].find((el) => el.checkVisibility());
+
+            return posterRow;
+        },
+        scrollLeft: {
+            ['x-on:click.prevent']() {
+                let posterRow = this.getPosterRow();
+
+                let scrollBy = posterRow.offsetWidth / 2;
+                let currentScroll = posterRow.scrollLeft;
+                let maxScroll = posterRow.scrollWidth - posterRow.offsetWidth;
+
+                if (currentScroll == 0) {
+                    posterRow.scrollTo({
+                        left: maxScroll,
+                        behavior: 'smooth',
+                    });
+                } else if (currentScroll < scrollBy) {
+                    posterRow.scrollTo({
+                        left: 0,
+                        behavior: 'smooth',
+                    });
+                } else {
+                    posterRow.scrollBy({
+                        left: -1 * scrollBy,
+                        behavior: 'smooth',
+                    });
+                }
+            },
+        },
+        scrollRight: {
+            ['x-on:click.prevent']() {
+                let posterRow = this.getPosterRow();
+
+                let scrollBy = posterRow.offsetWidth / 2;
+                let currentScroll = posterRow.scrollLeft;
+                let maxScroll = posterRow.scrollWidth - posterRow.offsetWidth;
+                let remainingScroll = maxScroll - currentScroll;
+
+                if (remainingScroll == 0) {
+                    posterRow.scrollTo({
+                        left: 0,
+                        behavior: 'smooth',
+                    });
+                } else if (remainingScroll < scrollBy) {
+                    posterRow.scrollTo({
+                        left: maxScroll,
+                        behavior: 'smooth',
+                    });
+                } else {
+                    posterRow.scrollBy({
+                        left: scrollBy,
+                        behavior: 'smooth',
+                    });
+                }
+            },
+        },
+    }));
+});

resources/views/torrent/partials/extra_meta.blade.php

@@ -1,5 +1,19 @@
 <section class="panelV2" x-data="tabs" data-default-tab="recommendations" id="tab_wrapper">
-    <h2 class="panel__heading">Relations</h2>
+    <header class="panel__header">
+        <h2 class="panel__heading">Relations</h2>
+        <div class="panel__actions" x-data="posterRow">
+            <div class="panel__action">
+                <button class="form__standard-icon-button" x-bind="scrollLeft">
+                    <i class="{{ \config('other.font-awesome') }} fa-angle-left"></i>
+                </button>
+            </div>
+            <div class="panel__action">
+                <button class="form__standard-icon-button" x-bind="scrollRight">
+                    <i class="{{ \config('other.font-awesome') }} fa-angle-right"></i>
+                </button>
+            </div>
+        </div>
+    </header>
     <menu class="panel__tabs">
         <li class="panel__tab" x-bind="tabButton" data-tab="recommendations">Recommendations</li>
         <li class="panel__tab" x-bind="tabButton" data-tab="collection">Collection</li>

resources/views/torrent/partials/recommendations.blade.php

@@ -1,5 +1,5 @@
 <div class="panel__body">
-    <section class="recommendations" style="max-height: 330px !important">
+    <section class="recommendations" style="max-height: 330px !important" x-ref="posters">
         @switch(true)
             @case($torrent->category->movie_meta)
                 @forelse ($meta->recommendedMovies ?? [] as $movie)