[IMP] php: Return restults viaually to client

php/src/app/Http/Controllers/SearchController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Models\Artist;
+use App\Models\WebDriver;
 use Facebook\WebDriver\WebDriverExpectedCondition;
 use Illuminate\Http\Request;
 
@@ -14,8 +15,18 @@ use Facebook\WebDriver\WebDriverBy;
 class SearchController extends Controller
 {
 
+    /**
+     * The default Artist data to be returned from this controller.
+     *
+     * @return array<string, string>
+     */
     public $defaultArtistData = ['id', 'name', 'thumbnail', 'url_remote'];
 
+    /**
+     * Fallback scrape option for the youtube music search page; in some cases there are no additional artists available
+     *
+     * @return RemoteWebDriver
+     */
     protected function scrapeArtist($driver)
     {
         $response = [];
@@ -31,9 +42,15 @@ class SearchController extends Controller
             'url_remote' => $artistHref,
         ];
         $artist_id = Artist::findOrCreateByName($artistName, $data);
-        return $artist_id->read($this->defaultArtistData);
+        return $artist_id->read();
     }
 
+    /**
+     * The first scrape that is attempted; this will return the artists and similar artists per youtube so we can return
+     * the users search with additional suggestions, or a list of suggestions if their exact search isn't found.
+     *
+     * @return RemoteWebDriver
+     */
     protected function scrapeArtists($driver)
     {
         $response = [];
@@ -71,7 +88,7 @@ class SearchController extends Controller
                             'url_remote' => $artistHref,
                         ];
                         $artist_id = Artist::findOrCreateByName($artistName, $data);
-                        $response[] = $artist_id->read($this->defaultArtistData);
+                        $response[] = $artist_id->read();
                         // Limit the results, there are alot of them
                         if ($resultCap <= $resultIndex) {
                             break;
@@ -79,32 +96,17 @@ class SearchController extends Controller
                     }
                 }
                 // There are 4 div#contents returned, one empty and 3 with duplicated info
-                if ($divCount === 1) {
                 break;
             }
         }
-        }
-        return $response;
-    }
 
-    protected function setUp()
-    {
-        $host = 'http://selenium-hub:4444';
-        $capabilities = DesiredCapabilities::chrome();
-        $chromeOptions = new ChromeOptions();
-        // TODO: Add '--headless' back in to arguments
-        $chromeOptions->addArguments(['--no-sandbox', '--disable-dev-shm-usage']);
-        $capabilities->setCapability(ChromeOptions::CAPABILITY_W3C, $chromeOptions);
-        $driver = RemoteWebDriver::create($host, $capabilities);
-        $driver->manage()->window()->maximize();
-        return $driver;
+        return $response;
     }
 
     public function search_artist(string $artist)
     {
-        $response = [];
         $url = 'https://music.youtube.com/search?q=' . str_replace(' ', '+', $artist);
-        $driver = $this->setUp();
+        $driver = WebDriver::setUp();
         $driver->get($url);
 
         // Add handling for no artist button; Some artists searches don't have this option (Ex The Black Dahlia Murder)
@@ -118,4 +120,5 @@ class SearchController extends Controller
         }
         return response()->json($response);
     }
+
 }

php/src/app/Models/Artist.php

@@ -24,7 +24,6 @@ class Artist extends Model
         return $artist;
     }
 
-    // TODO: discuss why I can't return Artist or Collection, because it failes either way but says its returning Artist
     public static function findOrCreateByName(string $name, array $data = [])
     {
         $artist = self::findByName($name)->first();
@@ -36,12 +35,8 @@ class Artist extends Model
 
     public function read(array $fields = []): array
     {
-        $data = $this->toArray();
-        // Filter
-        if ($fields) {
-            $data = array_intersect_key($data, array_flip(array_keys($fields)));
-        }
-        return $data;
+        // TODO: Add filter for fields if provided
+        return $this->toArray();;
     }
 
 }

php/src/app/Models/WebDriver.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Models;
+
+use Facebook\WebDriver\Chrome\ChromeOptions;
+use Facebook\WebDriver\Remote\DesiredCapabilities;
+use Facebook\WebDriver\Remote\RemoteWebDriver;
+use Illuminate\Database\Eloquent\Model;
+
+class WebDriver extends Model
+{
+    public static function setUp(): RemoteWebDriver
+    {
+        $host = 'http://selenium-hub:4444';
+        $capabilities = DesiredCapabilities::chrome();
+        $chromeOptions = new ChromeOptions();
+        $chromeOptions->addArguments(['--no-sandbox', '--disable-dev-shm-usage']);
+        $capabilities->setCapability(ChromeOptions::CAPABILITY_W3C, $chromeOptions);
+        $driver = RemoteWebDriver::create($host, $capabilities);
+        $driver->manage()->window()->maximize();
+        return $driver;
+    }
+}

php/src/public/js/app.js

@@ -2,9 +2,37 @@ console.log('Version 1:20:2');
 const appModal = $('#modalDownloadQueue');
 const loader = $("#loader-wrapper");
 
-function proc_notification(icon, title, text) {
+function construct_artist_result_html(artist_list) {
+    let html = '<h3>Found Artist!</h3>';
+    let index = 0;
+    artist_list.forEach((element) => {
+        index += 1;
+        html += `
+            <div class="card w-100 p-2 mb-2">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-3">
+                            <img src="${element.thumbnail}" width="72px" height="72px" style="border-radius: 12px;"/>
+                        </div>
+                        <div class="col-9 m-auto">
+                            <h4>${element.name}</h4>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `
+        if (index === 1 && artist_list.length > 1) {
+            html += '<hr/>';
+            html += '<h6>Suggested Artists</h6>'
+            html += '<hr/>';
+        }
+    })
+    return html
+}
+
+function proc_notification(icon, html, text) {
     Swal.fire({
-        title: title,
+        html: html,
         icon: icon,
         text: text
     })
@@ -12,15 +40,15 @@ function proc_notification(icon, title, text) {
 
 $('#settings_btn').on('click', () => {
     $('#modalSettings').modal('toggle');
-})
+});
 
 $('#catalog_btn').on('click', () => {
     $('#modalCatalog').modal('toggle');
-})
+});
 
 $('#queue_btn').on('click', () => {
     appModal.modal('toggle');
-})
+});
 
 $('#download_btn').on('click', () => {
     loader.fadeIn(300);
@@ -39,7 +67,7 @@ $('#download_btn').on('click', () => {
                     console.log(response);
                     console.log('===========');
                     icon = 'success';
-                    title = 'Shazam!';
+                    title = construct_artist_result_html(response);
                     proc_notification(icon, title, 'Artist found');
                     $('#search_bar').val('');
                     loader.fadeOut(700);
@@ -59,7 +87,7 @@ $('#download_btn').on('click', () => {
         }
     }, 100);
 
-})
+});
 
 document.addEventListener('alpine:init', () => {
     console.log('Alpine:init');
@@ -71,12 +99,12 @@ document.addEventListener('alpine:init', () => {
             this.ArtistResults = []
         },
 
-        Artists: [],          // Rendered in the 'Artists' menu
-        ArtistResults: [],   // Rendered in the
-        Queue: [],          // Rendered in the 'Queue' menu
+        Artists: [],          // Rendered in the 'Artists' modal
+        ArtistResults: [],   // Rendered in the SWAL popup
+        Queue: [],          // Rendered in the 'Queue' modal
 
     });
 
     $("#loader-wrapper").fadeOut(900);
 
-})
+});