More work on the future front-end (#976)

app/Http/Livewire/Album.php

@@ -68,4 +68,4 @@ public function render()
 
 		return view('livewire.album');
 	}
-}
+}

app/Http/Livewire/Fullpage.php

@@ -3,6 +3,10 @@
 namespace App\Http\Livewire;
 
 use App\Factories\AlbumFactory;
+use App\Models\Album;
+use App\Models\Photo;
+use App\SmartAlbums\SmartAlbum;
+use App\SmartAlbums\TagAlbum;
 use Livewire\Component;
 
 class Fullpage extends Component
@@ -11,14 +15,17 @@ class Fullpage extends Component
 	 * @var
 	 */
 	public $mode;
+	/**
+	 * @var Photo
+	 */
 	public $photo = null;
 
 	/**
 	 * @var Album|SmartAlbum|TagAlbum
 	 */
 	public $album = null;
 
-	protected $listeners = ['openAlbum', 'back'];
+	protected $listeners = ['openAlbum', 'openPhoto', 'back'];
 
 	public function mount($albumId = null, $photoId = null)
 	{
@@ -28,10 +35,10 @@ public function mount($albumId = null, $photoId = null)
 		} else {
 			$this->mode = 'album';
 			$this->album = $albumFactory->make($albumId);
-			// $this->albumId = $albumId;
+
 			if ($photoId != null) {
 				$this->mode = 'photo';
-				$this->photo = $photoId;
+				$this->photo = Photo::with('album')->findOrFail($photoId);
 			}
 		}
 	}
@@ -41,6 +48,11 @@ public function openAlbum($albumId)
 		return redirect('/livewire/' . $albumId);
 	}
 
+	public function openPhoto($photoId)
+	{
+		return redirect('/livewire/' . $this->album->id . '/' . $photoId);
+	}
+
 	// Ideal we would like to avoid the redirect as they are slow.
 	public function back()
 	{

app/Http/Livewire/Photo.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use App\Actions\Photo\Prepare;
+use App\Models\Photo as PhotoModel;
+use Livewire\Component;
+
+class Photo extends Component
+{
+	/**
+	 * @var PhotoModel
+	 */
+	public $photo;
+
+	/**
+	 * @var Album
+	 */
+	public $album;
+
+	/**
+	 * @var array (for now)
+	 */
+	public $data;
+
+	public $visibleControls = false;
+
+	/**
+	 * @var Prepare
+	 */
+	private $prepare;
+
+	public function mount(PhotoModel $photo, Prepare $prepare)
+	{
+		$this->album = $photo->album;
+		$this->photo = $photo;
+		$this->prepare = $prepare;
+	}
+
+	public function render()
+	{
+		$this->data = $this->prepare->do($this->photo);
+
+		return view('livewire.photo');
+	}
+}

app/Http/Livewire/PhotoOverlay.php

@@ -0,0 +1,121 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use App\Models\Configs;
+use Illuminate\Support\Str;
+use Lang;
+use Livewire\Component;
+
+class PhotoOverlay extends Component
+{
+	private $types = ['desc', 'date', 'exif', 'none'];
+	public $title = '';
+	public $overlay = '';
+	public $idx = 0;
+	private $photo_data;
+
+	public function mount(array $data)
+	{
+		$this->photo_data = $data;
+		$overlay_type = Configs::get_value('image_overlay_type', 'none');
+
+		$this->idx = array_search($overlay_type, $this->types, true);
+	}
+
+	private function checkOverlayType(): string
+	{
+		if ($this->idx < 0) {
+			return 'none';
+		}
+
+		$n = count($this->types);
+		for ($i = 0; $i < $n; $i++) {
+			$type = $this->types[($this->idx + $i) % $n];
+			if ($type === 'date' || $type === 'none') {
+				return $type;
+			}
+			if ($type === 'desc' && $this->photo_data['description'] !== '') {
+				return $type;
+			}
+			if ($type === 'exif' && $this->genExifHash() !== '') {
+				return $type;
+			}
+		}
+	}
+
+	private function genExifHash()
+	{
+		$exifHash = $this->photo_data['make'];
+		$exifHash .= $this->photo_data['model'];
+		$exifHash .= $this->photo_data['shutter'];
+		if (Str::contains($this->photo_data['type'], 'video')) {
+			$exifHash .= $this->photo_data['aperture'];
+			$exifHash .= $this->photo_data['focal'];
+		}
+		$exifHash .= $this->photo_data['iso'];
+
+		return $exifHash;
+	}
+
+	public function render()
+	{
+		$this->title = $this->photo_data['title'];
+
+		switch ($this->checkOverlayType()) {
+			case 'desc':
+				$this->overlay = $this->photo_data['description'];
+				break;
+			case 'date':
+				if ($this->photo_data['takedate'] !== '') {
+					$this->overlay = '<a>';
+					$this->overlay .= "<span title='Camera Date'>";
+					$this->overlay .= "<a class='badge camera-slr'>";
+					$this->overlay .= "<svg class='iconic'><use xlink:href='#camera-slr' />";
+					$this->overlay .= '</svg></a></span>';
+					$this->overlay .= $this->photo_data['takedate'];
+					$this->overlay .= '</a>';
+				} else {
+					$this->overlay = $this->data['sysdate'];
+				}
+				break;
+			case 'exif':
+				if ($this->genExifHash() !== '') {
+					if ($this->photo_data['shutter'] !== '') {
+						$this->overlay = str_replace('s', 'sec', $this->photo_data['shutter']);
+					}
+					if ($this->photo_data['aperture'] !== '') {
+						if ($this->overlay !== '') {
+							$this->overlay .= ' at ';
+						}
+						$this->overlay .= str_replace('f/', '&fnof; / ', $this->photo_data['aperture']);
+					}
+					if ($this->photo_data['iso'] !== '') {
+						if ($this->overlay !== '') {
+							$this->overlay .= ', ';
+						}
+						$this->overlay .= Lang::get('PHOTO_ISO') . ' ' . $this->photo_data['iso'];
+					}
+					if ($this->photo_data['focal'] !== '') {
+						if ($this->overlay !== '') {
+							$this->overlay .= '<br />';
+						}
+						$this->overlay .= $this->photo_data['focal'];
+						if ($this->photo_data['lens'] !== '') {
+							$this->overlay .= ' (' . $this->photo_data['focal'] . ')';
+						}
+					}
+				}
+				break;
+			case 'none':
+			default:
+			;
+		}
+
+		if ($this->overlay !== '') {
+			$this->overlay = '<p>' . $this->overlay . '</p>';
+		}
+
+		return view('livewire.photo-overlay');
+	}
+}

app/View/Components/Photo.php

@@ -0,0 +1,124 @@
+<?php
+
+namespace App\View\Components;
+
+use App\Models\Configs;
+use Illuminate\Support\Facades\URL;
+use Illuminate\Support\Str;
+use Illuminate\View\Component;
+
+class Photo extends Component
+{
+	public $class = '';
+
+	public $album_id = '';
+	public $photo_id = '';
+
+	public $show_live = false;
+	public $show_play = false;
+	public $show_placeholder = false;
+
+	public $title = '';
+	public $takedate = '';
+	public $sysdate = '';
+
+	public $src = '';
+	public $srcset = '';
+	public $srcset2x = '';
+
+	public $layout = false;
+	public $_w = 200;
+	public $_h = 200;
+
+	/**
+	 * Create a new component instance.
+	 *
+	 * @return void
+	 */
+	public function __construct(array $data)
+	{
+		$this->album_id = $data['album'];
+		$this->photo_id = $data['id'];
+		$this->title = $data['title'];
+		$this->takedate = $data['takedate'];
+		$this->sysdate = $data['sysdate'];
+		$this->star = $data['star'] == '1';
+		$this->public = $data['public'] == '1';
+
+		$isVideo = Str::contains($data['type'], 'video');
+		$isRaw = Str::contains($data['type'], 'raw');
+		$isLivePhoto = filled($data['livePhotoUrl']);
+
+		$this->class = '';
+		$this->class .= $isVideo ? ' video' : '';
+		$this->class .= $isLivePhoto ? ' livephoto' : '';
+
+		$this->layout = Configs::get_value('layout', '0') == '0';
+
+		if ($data['thumbUrl'] == 'uploads/thumb/') {
+			$this->show_live = $isLivePhoto;
+			$this->show_play = $isVideo;
+			$this->show_placeholder = $isRaw;
+		}
+
+		$dim = '';
+		$dim2x = '';
+		$thumb2x = '';
+
+		if ($this->layout) {
+			$thumb = $data['thumbUrl'];
+			$thumb2x = $data['thumb2x'];
+		} elseif ($data['small'] !== '') {
+			$thumb = $data['small'];
+			$thumb2x = $data['small2x'];
+			$wh = explode('x', $data['small_dim']);
+			$this->_w = intval($wh[0]);
+			$this->_h = intval($wh[1]);
+			$dim = intval($data['small_dim']);
+			$dim2x = intval($data['small2x_dim']);
+		} elseif ($data['medium'] !== '') {
+			$thumb = $data['medium'];
+			$thumb2x = $data['medium2x'];
+			$wh = explode('x', $data['medium_dim']);
+			$this->_w = intval($wh[0]);
+			$this->_h = intval($wh[1]);
+			$dim = intval($data['medium_dim']);
+			$dim2x = intval($data['medium2x_dim']);
+		} elseif (!$isVideo) {
+			// Fallback for images with no small or medium.
+			$thumb = $data['url'];
+			$this->_w = intval($data['width']);
+			$this->_h = intval($data['height']);
+		} else {
+			// Fallback for videos with no small (the case of no thumb is handled else where).
+			$this->class = 'video';
+			$thumb = $data['thumbUrl'];
+			$thumb2x = $data['thumb2x'];
+			$dim = '200';
+			$dim2x = '400';
+		}
+
+		$this->src = "src='" . URL::asset('img/placeholder.png') . "'";
+		$this->srcset = "data-src='" . URL::asset($thumb) . "'";
+		$thumb2x_src = '';
+
+		if ($this->layout) {
+			$thumb2x_src = URL::asset($thumb2x) . ' 2x';
+		} else {
+			$thumb2x_src = URL::asset($thumb) . ' ' . $dim . 'w, ';
+			$thumb2x_src .= URL::asset($thumb2x) . ' ' . $dim2x . 'w';
+		}
+
+		$this->srcset2x = $thumb2x != '' ? "data-srcset='" . $thumb2x_src . "'" : '';
+	}
+
+	/**
+	 * Get the view / contents that represent the component.
+	 *
+	 * @return \Illuminate\Contracts\View\View|\Closure|string
+	 */
+	public function render()
+	{
+		return view('components.photo');
+	}
+}