From 38acda0a02084194983b41180c3c4838ae66ae0c Mon Sep 17 00:00:00 2001
From: Ahmed Helal Ahmed <ahmed.helal.online@gmail.com>
Date: Sat, 4 Sep 2021 04:15:05 +0200
Subject: [PATCH] Sync videos list of channel and list videos paginated

- Remove identifier to remote_identifier in Channel
- Add Video Sync and list paginated with newest one first
- Add jobs to make jobs run in background
- Sync videos from youtube to database and insert only the new ones
---
 .env.example                                  |   4 +
 .../Controllers/ShowingChannelController.php  |   8 +-
 .../Controllers/StoringChannelController.php  |   2 +-
 app/Http/Controllers/SyncVideosController.php |  15 +
 app/Jobs/SyncVideosForGivenChannelJob.php     |  42 +++
 app/Models/Channel.php                        |   7 +-
 app/Models/Video.php                          |  56 ++++
 .../SyncVideosForGivenChannelService.php      |  94 ++++++
 config/youtube.php                            |  14 +
 ...021_09_03_141146_create_channels_table.php |   4 +-
 .../2021_09_03_214916_create_videos_table.php |  40 +++
 .../2021_09_03_224355_create_jobs_table.php   |  36 +++
 public/css/app.css                            | 181 +++++++++++
 public/js/app.js                              | 305 ++++++++++++++++--
 resources/js/Components/Pagination.vue        |  29 ++
 resources/js/Pages/Channels/Videos/index.vue  |  90 +++++-
 resources/js/Pages/Channels/index.vue         |  10 +-
 routes/web.php                                |   4 +
 18 files changed, 907 insertions(+), 34 deletions(-)
 create mode 100644 app/Http/Controllers/SyncVideosController.php
 create mode 100644 app/Jobs/SyncVideosForGivenChannelJob.php
 create mode 100644 app/Models/Video.php
 create mode 100644 app/Services/SyncVideosForGivenChannelService.php
 create mode 100644 config/youtube.php
 create mode 100644 database/migrations/2021_09_03_214916_create_videos_table.php
 create mode 100644 database/migrations/2021_09_03_224355_create_jobs_table.php
 create mode 100644 resources/js/Components/Pagination.vue

diff --git a/.env.example b/.env.example
index b835881..1930962 100644
--- a/.env.example
+++ b/.env.example
@@ -49,3 +49,7 @@ PUSHER_APP_CLUSTER=mt1
 
 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
 MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+YOUTUBE_BASE_URL_API="https://www.googleapis.com/youtube/v3/"
+YOUTUBE_API_KEY=
+YOUTUBE_CHANNEL_URL_API="${YOUTUBE_BASE_URL_API}channels"
+YOUTUBE_VIDEO_BASE_LINK="https://www.youtube.com/watch?v="
diff --git a/app/Http/Controllers/ShowingChannelController.php b/app/Http/Controllers/ShowingChannelController.php
index 1fefc39..14ec9ce 100644
--- a/app/Http/Controllers/ShowingChannelController.php
+++ b/app/Http/Controllers/ShowingChannelController.php
@@ -5,11 +5,17 @@
 
 
 use App\Models\Channel;
+use App\Models\Video;
 
 class ShowingChannelController
 {
     public function __invoke(Channel $channel)
     {
-        return inertia()->render('Channels/Videos/index', ['channel' => $channel]);
+        return inertia()->render('Channels/Videos/index', [
+            'channel' => $channel,
+            'videos' => Video::where('channel_id', $channel->id)
+                ->orderByDesc('published_at')
+                ->paginate()
+        ]);
     }
 }
diff --git a/app/Http/Controllers/StoringChannelController.php b/app/Http/Controllers/StoringChannelController.php
index d9e8588..db93453 100644
--- a/app/Http/Controllers/StoringChannelController.php
+++ b/app/Http/Controllers/StoringChannelController.php
@@ -11,7 +11,7 @@ class StoringChannelController
 {
     public function __invoke()
     {
-        Channel::create(array_merge(request()->only(['name', 'identifier']),['user_id'=>auth()->id()]));
+        Channel::create(array_merge(request()->only(['name', 'remote_identifier']),['user_id'=>auth()->id()]));
 
         return back();
     }
diff --git a/app/Http/Controllers/SyncVideosController.php b/app/Http/Controllers/SyncVideosController.php
new file mode 100644
index 0000000..e70ae21
--- /dev/null
+++ b/app/Http/Controllers/SyncVideosController.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Jobs\SyncVideosForGivenChannelJob;
+use App\Models\Channel;
+
+class SyncVideosController
+{
+    public function __invoke(Channel $channel)
+    {
+        dispatch(new SyncVideosForGivenChannelJob($channel));
+        return back();
+    }
+}
diff --git a/app/Jobs/SyncVideosForGivenChannelJob.php b/app/Jobs/SyncVideosForGivenChannelJob.php
new file mode 100644
index 0000000..eb0965f
--- /dev/null
+++ b/app/Jobs/SyncVideosForGivenChannelJob.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Jobs;
+
+use App\Models\Channel;
+use App\Services\SyncVideosForGivenChannelService;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldBeUnique;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+
+class SyncVideosForGivenChannelJob implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    /**
+     * @var Channel
+     */
+    private $channel;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(Channel $channel)
+    {
+        $this->channel = $channel;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        (new SyncVideosForGivenChannelService())->execute($this->channel);
+    }
+}
diff --git a/app/Models/Channel.php b/app/Models/Channel.php
index 7bcd024..b503b6e 100644
--- a/app/Models/Channel.php
+++ b/app/Models/Channel.php
@@ -11,7 +11,12 @@ class Channel extends Model
 
     protected $fillable = [
         'name',
-        'identifier',
+        'remote_identifier',
         'user_id'
     ];
+
+    public function videos()
+    {
+        return $this->hasMany(Video::class);
+    }
 }
diff --git a/app/Models/Video.php b/app/Models/Video.php
new file mode 100644
index 0000000..1d99b90
--- /dev/null
+++ b/app/Models/Video.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Models;
+
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Video extends Model
+{
+    use SoftDeletes;
+    use HasFactory;
+
+    protected $dates = [
+        'favorite_at',
+        'seen_at',
+        'published_at'
+    ];
+    protected $fillable = [
+        'title',
+        'description',
+        'thumbnail',
+        'channel_id',
+        'published_at',
+        'seen_at',
+        'favorite_at',
+        'remote_identifier',
+    ];
+
+    protected $appends=[
+      'show_more',
+      'link'
+    ];
+
+    public function channel()
+    {
+        return $this->belongsTo(Channel::class);
+    }
+
+    public function getShowMoreAttribute()
+    {
+        return false;
+    }
+
+    public function getLinkAttribute()
+    {
+        return config('youtube.urls.video_base_link').$this->remote_identifier;
+    }
+
+    public function getPublishedAtAttribute($val)
+    {
+        $dateTime=Carbon::parse($val);
+        return $dateTime->diffForHumans().' | '.$dateTime->format('d-m-Y h:i:s a');
+    }
+}
diff --git a/app/Services/SyncVideosForGivenChannelService.php b/app/Services/SyncVideosForGivenChannelService.php
new file mode 100644
index 0000000..a6500c0
--- /dev/null
+++ b/app/Services/SyncVideosForGivenChannelService.php
@@ -0,0 +1,94 @@
+<?php
+
+
+namespace App\Services;
+
+
+use App\Models\Channel;
+use App\Models\Video;
+use Carbon\Carbon;
+use Illuminate\Support\Arr;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Http;
+
+class SyncVideosForGivenChannelService
+{
+
+    private $videosData = [];
+
+    public function execute(Channel $channel)
+    {
+        $response = Http::get(config('youtube.urls.channel'), [
+            'id' => $channel->remote_identifier,
+            'part' => 'contentDetails',
+            'key' => config('youtube.key')
+        ])->json();
+        $playlist = Arr::get($response, 'items.0.contentDetails.relatedPlaylists.uploads');
+        $response = Http::get(config('youtube.urls.videos'), [
+            'part' => 'snippet',
+            'playlistId' => $playlist,
+            'maxResults' => '50',
+            'key' => config('youtube.key')
+        ])->json();
+        $this->AddMoreVideosData(Arr::get($response, 'items', []), $channel);
+        while (isset($response['nextPageToken'])) {
+            $response = Http::get(config('youtube.urls.videos'), [
+                'part' => 'snippet',
+                'playlistId' => $playlist,
+                'maxResults' => '50',
+                'key' => config('youtube.key'),
+                'pageToken' => Arr::get($response, 'nextPageToken')
+            ])->json();
+
+            $this->AddMoreVideosData(Arr::get($response, 'items', []), $channel);
+        }
+
+        $videos = $this->filterVideosToNotExistsVideos($this->getExistsRemoteIds());
+
+        if ($videos->isNotEmpty()) {
+            return Video::insert($videos->toArray());
+        }
+        return true;
+    }
+
+    /**
+     * @param array $videosData
+     * @param $channel
+     */
+    private function AddMoreVideosData(array $videosData, $channel)
+    {
+        foreach ($videosData as $video) {
+            $this->videosData[] = [
+                'remote_identifier' => Arr::get($video, 'snippet.resourceId.videoId'),
+                'title' => Arr::get($video, 'snippet.title'),
+                'description' => Arr::get($video, 'snippet.description'),
+                'thumbnail' => Arr::get($video, 'snippet.thumbnails.high.url'),
+                'channel_id' => $channel->id,
+                'published_at' => Carbon::parse(Arr::get($video, 'snippet.publishedAt')),
+                'created_at' => now(),
+                'updated_at' => now(),
+            ];
+
+        }
+    }
+
+    /**
+     * @param $existsRemoteIds
+     * @return Collection
+     */
+    public function filterVideosToNotExistsVideos($existsRemoteIds): Collection
+    {
+        return collect($this->videosData)->filter(function ($video) use ($existsRemoteIds) {
+            return !$existsRemoteIds->contains($video['remote_identifier']);
+        });
+    }
+
+    /**
+     * @return mixed
+     */
+    public function getExistsRemoteIds()
+    {
+        return Video::Select('remote_identifier')->pluck('remote_identifier');
+    }
+
+}
diff --git a/config/youtube.php b/config/youtube.php
new file mode 100644
index 0000000..e6dd07f
--- /dev/null
+++ b/config/youtube.php
@@ -0,0 +1,14 @@
+<?php
+
+return [
+
+    'urls' => [
+        'base'=> env('YOUTUBE_BASE_URL_API'),
+        'channel' => env('YOUTUBE_CHANNEL_URL_API'),
+        'videos' => env('YOUTUBE_CHANNEL_videos_URL_API'),
+        'video_base_link' => env('YOUTUBE_VIDEO_BASE_LINK'),
+    ],
+
+
+    'key' => env('YOUTUBE_API_KEY'),
+];
diff --git a/database/migrations/2021_09_03_141146_create_channels_table.php b/database/migrations/2021_09_03_141146_create_channels_table.php
index 7cddcc4..41a7681 100644
--- a/database/migrations/2021_09_03_141146_create_channels_table.php
+++ b/database/migrations/2021_09_03_141146_create_channels_table.php
@@ -16,8 +16,8 @@ public function up()
         Schema::create('channels', function (Blueprint $table) {
             $table->id();
             $table->string('name');
-            $table->string('identifier');
-            $table->foreignId('user_id');
+            $table->string('remote_identifier');
+            $table->foreignId('user_id')->constrained();
             $table->timestamps();
         });
     }
diff --git a/database/migrations/2021_09_03_214916_create_videos_table.php b/database/migrations/2021_09_03_214916_create_videos_table.php
new file mode 100644
index 0000000..d86b0d6
--- /dev/null
+++ b/database/migrations/2021_09_03_214916_create_videos_table.php
@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateVideosTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('videos', function (Blueprint $table) {
+            $table->id();
+            $table->string('title');
+            $table->text('description')->nullable();
+            $table->string('remote_identifier');
+            $table->string('thumbnail');
+            $table->foreignId('channel_id')->constrained();
+            $table->timestamp('favorite_at')->nullable();
+            $table->timestamp('published_at')->nullable();
+            $table->timestamp('seen_at')->nullable();
+            $table->softDeletes();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('videos');
+    }
+}
diff --git a/database/migrations/2021_09_03_224355_create_jobs_table.php b/database/migrations/2021_09_03_224355_create_jobs_table.php
new file mode 100644
index 0000000..1be9e8a
--- /dev/null
+++ b/database/migrations/2021_09_03_224355_create_jobs_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateJobsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('jobs', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('queue')->index();
+            $table->longText('payload');
+            $table->unsignedTinyInteger('attempts');
+            $table->unsignedInteger('reserved_at')->nullable();
+            $table->unsignedInteger('available_at');
+            $table->unsignedInteger('created_at');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('jobs');
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
index e647027..dec8497 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1115,6 +1115,14 @@ select {
 	margin-left: auto;
 	margin-right: auto;
 }
+.mx-6 {
+	margin-left: 1.5rem;
+	margin-right: 1.5rem;
+}
+.my-1 {
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
+}
 .ml-3 {
 	margin-left: 0.75rem;
 }
@@ -1193,6 +1201,21 @@ select {
 .mb-3 {
 	margin-bottom: 0.75rem;
 }
+.-ml-1 {
+	margin-left: -0.25rem;
+}
+.-mb-1 {
+	margin-bottom: -0.25rem;
+}
+.mr-1 {
+	margin-right: 0.25rem;
+}
+.mb-1 {
+	margin-bottom: 0.25rem;
+}
+.mr-6 {
+	margin-right: 1.5rem;
+}
 .block {
 	display: block;
 }
@@ -1238,9 +1261,15 @@ select {
 .h-20 {
 	height: 5rem;
 }
+.h-32 {
+	height: 8rem;
+}
 .min-h-screen {
 	min-height: 100vh;
 }
+.min-h-0 {
+	min-height: 0px;
+}
 .w-5 {
 	width: 1.25rem;
 }
@@ -1283,6 +1312,12 @@ select {
 .w-20 {
 	width: 5rem;
 }
+.w-32 {
+	width: 8rem;
+}
+.w-72 {
+	width: 18rem;
+}
 .min-w-0 {
 	min-width: 0px;
 }
@@ -1334,12 +1369,31 @@ select {
 .transform {
 	transform: var(--tw-transform);
 }
+@-webkit-keyframes spin {
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+@keyframes spin {
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+.animate-spin {
+	-webkit-animation: spin 1s linear infinite;
+	        animation: spin 1s linear infinite;
+}
 .cursor-default {
 	cursor: default;
 }
 .cursor-pointer {
 	cursor: pointer;
 }
+.cursor-not-allowed {
+	cursor: not-allowed;
+}
 .list-inside {
 	list-style-position: inside;
 }
@@ -1357,12 +1411,21 @@ select {
 .grid-cols-1 {
 	grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+.flex-row {
+	flex-direction: row;
+}
 .flex-col {
 	flex-direction: column;
 }
 .flex-wrap {
 	flex-wrap: wrap;
 }
+.content-center {
+	align-content: center;
+}
+.content-between {
+	align-content: space-between;
+}
 .items-center {
 	align-items: center;
 }
@@ -1402,6 +1465,21 @@ select {
 	margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
 	margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
+.space-y-10 > :not([hidden]) ~ :not([hidden]) {
+	--tw-space-y-reverse: 0;
+	margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
+	margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
+}
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+	--tw-space-x-reverse: 0;
+	margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+	margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+	--tw-space-x-reverse: 0;
+	margin-right: calc(1rem * var(--tw-space-x-reverse));
+	margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .overflow-hidden {
 	overflow: hidden;
 }
@@ -1428,6 +1506,9 @@ select {
 .rounded-full {
 	border-radius: 9999px;
 }
+.rounded-xl {
+	border-radius: 0.75rem;
+}
 .rounded-l-md {
 	border-top-left-radius: 0.375rem;
 	border-bottom-left-radius: 0.375rem;
@@ -1492,6 +1573,10 @@ select {
 	--tw-border-opacity: 1;
 	border-color: rgba(239, 68, 68, var(--tw-border-opacity));
 }
+.border-gray-900 {
+	--tw-border-opacity: 1;
+	border-color: rgba(17, 24, 39, var(--tw-border-opacity));
+}
 .bg-white {
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -1544,6 +1629,18 @@ select {
 	--tw-bg-opacity: 1;
 	background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
 }
+.bg-blue-700 {
+	--tw-bg-opacity: 1;
+	background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
+}
+.bg-yellow-400 {
+	--tw-bg-opacity: 1;
+	background-color: rgba(251, 191, 36, var(--tw-bg-opacity));
+}
+.bg-green-400 {
+	--tw-bg-opacity: 1;
+	background-color: rgba(52, 211, 153, var(--tw-bg-opacity));
+}
 .bg-opacity-25 {
 	--tw-bg-opacity: 0.25;
 }
@@ -1566,6 +1663,12 @@ select {
 .p-6 {
 	padding: 1.5rem;
 }
+.p-1 {
+	padding: 0.25rem;
+}
+.p-4 {
+	padding: 1rem;
+}
 .px-4 {
 	padding-left: 1rem;
 	padding-right: 1rem;
@@ -1626,6 +1729,14 @@ select {
 	padding-left: 2rem;
 	padding-right: 2rem;
 }
+.px-20 {
+	padding-left: 5rem;
+	padding-right: 5rem;
+}
+.px-5 {
+	padding-left: 1.25rem;
+	padding-right: 1.25rem;
+}
 .pt-6 {
 	padding-top: 1.5rem;
 }
@@ -1704,6 +1815,10 @@ select {
 	font-size: 1.25rem;
 	line-height: 1.75rem;
 }
+.text-4xl {
+	font-size: 2.25rem;
+	line-height: 2.5rem;
+}
 .font-medium {
 	font-weight: 500;
 }
@@ -1728,12 +1843,18 @@ select {
 .leading-4 {
 	line-height: 1rem;
 }
+.leading-6 {
+	line-height: 1.5rem;
+}
 .tracking-widest {
 	letter-spacing: 0.1em;
 }
 .tracking-wider {
 	letter-spacing: 0.05em;
 }
+.tracking-wide {
+	letter-spacing: 0.025em;
+}
 .text-gray-500 {
 	--tw-text-opacity: 1;
 	color: rgba(107, 114, 128, var(--tw-text-opacity));
@@ -1828,6 +1949,9 @@ select {
 .opacity-25 {
 	opacity: 0.25;
 }
+.opacity-30 {
+	opacity: 0.3;
+}
 .shadow-sm {
 	--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -1848,6 +1972,10 @@ select {
 	--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.outline-none {
+	outline: 2px solid transparent;
+	outline-offset: 2px;
+}
 .ring-1 {
 	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1894,6 +2022,9 @@ select {
 .duration-1000 {
 	transition-duration: 1000ms;
 }
+.duration-500 {
+	transition-duration: 500ms;
+}
 .ease-in-out {
 	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1903,6 +2034,11 @@ select {
 .ease-in {
 	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
+.hover\:scale-105:hover {
+	--tw-scale-x: 1.05;
+	--tw-scale-y: 1.05;
+	transform: var(--tw-transform);
+}
 .hover\:border-gray-300:hover {
 	--tw-border-opacity: 1;
 	border-color: rgba(209, 213, 219, var(--tw-border-opacity));
@@ -1935,6 +2071,14 @@ select {
 	--tw-bg-opacity: 1;
 	background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
 }
+.hover\:bg-white:hover {
+	--tw-bg-opacity: 1;
+	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+.hover\:bg-blue-600:hover {
+	--tw-bg-opacity: 1;
+	background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
+}
 .hover\:text-gray-500:hover {
 	--tw-text-opacity: 1;
 	color: rgba(107, 114, 128, var(--tw-text-opacity));
@@ -1959,6 +2103,14 @@ select {
 	--tw-text-opacity: 1;
 	color: rgba(30, 64, 175, var(--tw-text-opacity));
 }
+.hover\:shadow-xl:hover {
+	--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.hover\:shadow-lg:hover {
+	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .focus\:z-10:focus {
 	z-index: 10;
 }
@@ -1986,6 +2138,10 @@ select {
 	--tw-border-opacity: 1;
 	border-color: rgba(209, 213, 219, var(--tw-border-opacity));
 }
+.focus\:border-indigo-500:focus {
+	--tw-border-opacity: 1;
+	border-color: rgba(99, 102, 241, var(--tw-border-opacity));
+}
 .focus\:bg-indigo-600:focus {
 	--tw-bg-opacity: 1;
 	background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
@@ -2022,6 +2178,10 @@ select {
 	--tw-text-opacity: 1;
 	color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
+.focus\:text-indigo-500:focus {
+	--tw-text-opacity: 1;
+	color: rgba(99, 102, 241, var(--tw-text-opacity));
+}
 .focus\:outline-none:focus {
 	outline: 2px solid transparent;
 	outline-offset: 2px;
@@ -2296,6 +2456,10 @@ select {
 		display: grid;
 	}
 
+	.md\:min-h-full {
+		min-height: 100%;
+	}
+
 	.md\:grid-cols-3 {
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 	}
@@ -2304,6 +2468,10 @@ select {
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 
+	.md\:flex-row {
+		flex-direction: row;
+	}
+
 	.md\:gap-6 {
 		gap: 1.5rem;
 	}
@@ -2315,6 +2483,19 @@ select {
 	.md\:border-l {
 		border-left-width: 1px;
 	}
+
+	.md\:border-l-2 {
+		border-left-width: 2px;
+	}
+
+	.md\:border-dotted {
+		border-style: dotted;
+	}
+
+	.md\:px-2 {
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+	}
 }
 @media (min-width: 1024px) {
 
diff --git a/public/js/app.js b/public/js/app.js
index ec0dca1..269a543 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -19131,6 +19131,30 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Pagination.vue?vue&type=script&lang=js":
+/*!****************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Pagination.vue?vue&type=script&lang=js ***!
+  \****************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  props: {
+    links: Array
+  },
+  components: {
+    Link: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__.Link
+  }
+});
+
 /***/ }),
 
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Jetstream/ActionMessage.vue?vue&type=script&lang=js":
@@ -20559,6 +20583,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 /* harmony import */ var _Layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Layouts/AppLayout.vue */ "./resources/js/Layouts/AppLayout.vue");
 /* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js");
+/* harmony import */ var _Components_Pagination__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/Components/Pagination */ "./resources/js/Components/Pagination.vue");
+/* harmony import */ var _Jetstream_Button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../Jetstream/Button */ "./resources/js/Jetstream/Button.vue");
+
+
 
 
 
@@ -20566,7 +20594,7 @@ __webpack_require__.r(__webpack_exports__);
   setup: function setup() {
     function submit() {
       if (confirm('Sync videos! Are you sure?')) {
-        _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_2__.Inertia.post('/sync-videos');
+        _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_2__.Inertia.post(route('channels.show.sync-videos', this.channel.id));
       }
     }
 
@@ -20575,10 +20603,13 @@ __webpack_require__.r(__webpack_exports__);
     };
   },
   props: {
-    channel: Object
+    channel: Object,
+    videos: Object
   },
   components: {
-    AppLayout: _Layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_1__["default"]
+    Button: _Jetstream_Button__WEBPACK_IMPORTED_MODULE_4__["default"],
+    AppLayout: _Layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
+    Pagination: _Components_Pagination__WEBPACK_IMPORTED_MODULE_3__["default"]
   }
 }));
 
@@ -20605,7 +20636,7 @@ __webpack_require__.r(__webpack_exports__);
   setup: function setup() {
     var form = (0,vue__WEBPACK_IMPORTED_MODULE_0__.reactive)({
       name: null,
-      identifier: null
+      remote_identifier: null
     });
 
     function submit() {
@@ -21209,6 +21240,57 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Pagination.vue?vue&type=template&id=0e1fe725":
+/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Pagination.vue?vue&type=template&id=0e1fe725 ***!
+  \********************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+var _hoisted_1 = {
+  key: 0
+};
+var _hoisted_2 = {
+  "class": "flex flex-wrap -mb-1  justify-between"
+};
+var _hoisted_3 = ["innerHTML"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Link");
+
+  return $props.links.length > 3 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.links, function (link, k) {
+    return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
+      key: k
+    }, [link.url === null ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", {
+      key: 0,
+      "class": "mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded",
+      innerHTML: link.label
+    }, null, 8
+    /* PROPS */
+    , _hoisted_3)) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Link, {
+      key: 1,
+      "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500", {
+        'bg-blue-700 text-white': link.active
+      }]),
+      href: link.url,
+      innerHTML: link.label
+    }, null, 8
+    /* PROPS */
+    , ["class", "href", "innerHTML"]))], 64
+    /* STABLE_FRAGMENT */
+    );
+  }), 128
+  /* KEYED_FRAGMENT */
+  ))])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true);
+}
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Jetstream/ActionMessage.vue?vue&type=template&id=bcb26626":
 /*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Jetstream/ActionMessage.vue?vue&type=template&id=bcb26626 ***!
@@ -24444,21 +24526,105 @@ var _hoisted_7 = {
 var _hoisted_8 = {
   "class": "text-center p-6 border-gray-200"
 };
+var _hoisted_9 = {
+  "class": "space-y-10"
+};
+var _hoisted_10 = {
+  "class": "flex items-center p-6 space-x-6 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-500  justify-content-start"
+};
+var _hoisted_11 = {
+  "class": "flex bg-gray-100 p-4 w-72 space-x-4 rounded-lg"
+};
+var _hoisted_12 = ["href"];
+var _hoisted_13 = ["src"];
+var _hoisted_14 = {
+  "class": "text-center text-gray-500 text-xs mt-1"
+};
+var _hoisted_15 = {
+  "class": "items-center justify-center px-4 bg-white"
+};
+var _hoisted_16 = {
+  "class": "max-w-xl w-full rounded-lg shadow-lg p-4 flex md:flex-row flex-col"
+};
+var _hoisted_17 = {
+  "class": "flex-1"
+};
+var _hoisted_18 = {
+  "class": "font-semibold text-lg tracking-wide"
+};
+var _hoisted_19 = ["href"];
+var _hoisted_20 = {
+  key: 0,
+  "class": "text-gray-500 my-1"
+};
+var _hoisted_21 = {
+  key: 1,
+  "class": "text-gray-500 my-1"
+};
+var _hoisted_22 = ["onClick"];
+var _hoisted_23 = {
+  "class": "items-center justify-center px-4 "
+};
+var _hoisted_24 = {
+  "class": "max-w-xl w-full rounded-lg  p-4 flex md:flex-row flex-col"
+};
+var _hoisted_25 = {
+  "class": "flex-1"
+};
+var _hoisted_26 = {
+  "class": "md:px-2 mt-3 md:mt-0 items-center flex"
+};
 
-var _hoisted_9 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", {
+var _hoisted_27 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("svg", {
+  "class": "h-8 w-8 text-white",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("path", {
+  d: "M22 11.08V12a10 10 0 1 1-5.93-9.14"
+}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("polyline", {
+  points: "22 4 12 14.01 9 11.01"
+})], -1
+/* HOISTED */
+);
+
+var _hoisted_28 = [_hoisted_27];
+
+var _hoisted_29 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("svg", {
+  "class": "h-8 w-8 text-white",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("polygon", {
+  points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+})], -1
+/* HOISTED */
+);
+
+var _hoisted_30 = [_hoisted_29];
+
+var _hoisted_31 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", {
   "class": "text-center text-gray-500 text-xs"
 }, " ©2021 Ahmed Helal Ahmed. All rights reserved. ", -1
 /* HOISTED */
 );
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_pagination = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("pagination");
+
   var _component_app_layout = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("app-layout");
 
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_app_layout, {
     title: "Dashboard"
   }, {
     header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", _hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(_ctx.channel.name), 1
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", _hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(_ctx.channel.name) + " (" + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(_ctx.videos.total) + ") ", 1
       /* TEXT */
       ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("form", {
         onSubmit: _cache[0] || (_cache[0] = (0,vue__WEBPACK_IMPORTED_MODULE_0__.withModifiers)(function () {
@@ -24469,16 +24635,59 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       )])];
     }),
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("ul", null, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(_ctx.channel.video, function (video) {
-        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("li", {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(_ctx.videos.data, function (video) {
+        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", {
           key: video.id,
-          "class": "font-bold"
-        }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(video.name), 1
+          "class": "bg-gray-100 p-2"
+        }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("a", {
+          href: video.link,
+          target: "_blank"
+        }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
+          src: video.thumbnail,
+          alt: "video thumbnail"
+        }, null, 8
+        /* PROPS */
+        , _hoisted_13), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_14, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(video.published_at), 1
         /* TEXT */
-        );
+        )], 8
+        /* PROPS */
+        , _hoisted_12)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("section", _hoisted_15, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", _hoisted_18, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("a", {
+          href: video.link,
+          target: "_blank"
+        }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(video.title), 9
+        /* TEXT, PROPS */
+        , _hoisted_19)]), !video.show_more ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("p", _hoisted_20, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(video.description.substring(0, 100)), 1
+        /* TEXT */
+        )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), video.show_more ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("p", _hoisted_21, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(video.description), 1
+        /* TEXT */
+        )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("button", {
+          "class": "text-center text-gray-500 text-xs",
+          onClick: function onClick($event) {
+            return video.show_more = !video.show_more;
+          }
+        }, "Show " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(video.show_more ? 'less' : 'more'), 9
+        /* TEXT, PROPS */
+        , _hoisted_22)])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("section", _hoisted_23, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_24, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_25, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_26, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("button", {
+          "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([{
+            'cursor-not-allowed': video.seen_at
+          }, "bg-blue-500 text-white font-bold px-4 py-2 text-sm uppercase rounded tracking-wider focus:outline-none hover:bg-blue-600"])
+        }, _hoisted_28, 2
+        /* CLASS */
+        ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("button", {
+          "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([{
+            'cursor-not-allowed': video.favorite_at
+          }, "inline-block ml-1 bg-indigo-500 px-4 py-2 text-white font-semibold rounded-lg hover:shadow-lg transition duration-3000 cursor-pointer hover:bg-indigo-600"])
+        }, _hoisted_30, 2
+        /* CLASS */
+        )])])])])])])]);
       }), 128
       /* KEYED_FRAGMENT */
-      ))])]), _hoisted_9])])])];
+      ))]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_pagination, {
+        "class": "mt-6 mb-6 p-2",
+        links: _ctx.videos.links
+      }, null, 8
+      /* PROPS */
+      , ["links"]), _hoisted_31])])])];
     }),
     _: 1
     /* STABLE */
@@ -24537,8 +24746,8 @@ var _hoisted_8 = {
 
 var _hoisted_9 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("label", {
   "class": "block text-gray-700 text-sm font-bold mb-2",
-  "for": "identifier"
-}, " Identifier ", -1
+  "for": "remote_identifier"
+}, " Remote identifier ", -1
 /* HOISTED */
 );
 
@@ -24589,15 +24798,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       /* NEED_PATCH */
       ), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelText, _ctx.form.name]])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [_hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("input", {
         "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
-          return _ctx.form.identifier = $event;
+          return _ctx.form.remote_identifier = $event;
         }),
         "class": "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline",
-        id: "identifier",
-        type: "password",
-        placeholder: "******************"
+        id: "remote_identifier",
+        type: "text",
+        placeholder: "Remote identifier"
       }, null, 512
       /* NEED_PATCH */
-      ), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelText, _ctx.form.identifier]])]), _hoisted_10], 32
+      ), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelText, _ctx.form.remote_identifier]])]), _hoisted_10], 32
       /* HYDRATE_EVENTS */
       )]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("ul", null, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(_ctx.channels, function (channel) {
         return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("li", {
@@ -50175,6 +50384,32 @@ module.exports = function (list, options) {
 
 /***/ }),
 
+/***/ "./resources/js/Components/Pagination.vue":
+/*!************************************************!*\
+  !*** ./resources/js/Components/Pagination.vue ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _Pagination_vue_vue_type_template_id_0e1fe725__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Pagination.vue?vue&type=template&id=0e1fe725 */ "./resources/js/Components/Pagination.vue?vue&type=template&id=0e1fe725");
+/* harmony import */ var _Pagination_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Pagination.vue?vue&type=script&lang=js */ "./resources/js/Components/Pagination.vue?vue&type=script&lang=js");
+
+
+
+_Pagination_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"].render = _Pagination_vue_vue_type_template_id_0e1fe725__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_Pagination_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"].__file = "resources/js/Components/Pagination.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_Pagination_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"]);
+
+/***/ }),
+
 /***/ "./resources/js/Jetstream/ActionMessage.vue":
 /*!**************************************************!*\
   !*** ./resources/js/Jetstream/ActionMessage.vue ***!
@@ -51441,6 +51676,22 @@ _Welcome_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"].__f
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_Welcome_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"]);
 
+/***/ }),
+
+/***/ "./resources/js/Components/Pagination.vue?vue&type=script&lang=js":
+/*!************************************************************************!*\
+  !*** ./resources/js/Components/Pagination.vue?vue&type=script&lang=js ***!
+  \************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Pagination_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"])
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Pagination_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Pagination.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Pagination.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/Jetstream/ActionMessage.vue?vue&type=script&lang=js":
@@ -52145,6 +52396,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Welcome_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Welcome.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Welcome.vue?vue&type=script&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/Components/Pagination.vue?vue&type=template&id=0e1fe725":
+/*!******************************************************************************!*\
+  !*** ./resources/js/Components/Pagination.vue?vue&type=template&id=0e1fe725 ***!
+  \******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Pagination_vue_vue_type_template_id_0e1fe725__WEBPACK_IMPORTED_MODULE_0__.render)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Pagination_vue_vue_type_template_id_0e1fe725__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Pagination.vue?vue&type=template&id=0e1fe725 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Pagination.vue?vue&type=template&id=0e1fe725");
+
+
 /***/ }),
 
 /***/ "./resources/js/Jetstream/ActionMessage.vue?vue&type=template&id=bcb26626":
diff --git a/resources/js/Components/Pagination.vue b/resources/js/Components/Pagination.vue
new file mode 100644
index 0000000..173a3ae
--- /dev/null
+++ b/resources/js/Components/Pagination.vue
@@ -0,0 +1,29 @@
+<template>
+    <div v-if="links.length > 3" >
+        <div class="flex flex-wrap -mb-1  justify-between">
+            <template v-for="(link, k) in links" :key="k">
+                <div v-if="link.url === null"
+                     class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
+                     v-html="link.label"/>
+                <Link v-else
+                              class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500"
+                              :class="{ 'bg-blue-700 text-white': link.active }"
+                              :href="link.url"
+                              v-html="link.label"/>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Link } from '@inertiajs/inertia-vue3'
+
+export default {
+    props: {
+        links: Array,
+    },
+    components: {
+        Link
+    },
+}
+</script>
diff --git a/resources/js/Pages/Channels/Videos/index.vue b/resources/js/Pages/Channels/Videos/index.vue
index fef4754..f6c117b 100644
--- a/resources/js/Pages/Channels/Videos/index.vue
+++ b/resources/js/Pages/Channels/Videos/index.vue
@@ -2,7 +2,7 @@
     <app-layout title="Dashboard">
         <template #header>
             <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-                {{ channel.name }}
+                {{ channel.name }} ({{ videos.total }})
             </h2>
             <div class="flex justify-end">
                 <form @submit.prevent="submit">
@@ -19,10 +19,85 @@
             <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                 <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                     <div class="text-center p-6 border-gray-200">
-                        <ul>
-                            <li v-for="video in channel.video" :key="video.id" class="font-bold">{{ video.name }}</li>
-                        </ul>
+
+                        <div
+                            v-for="video in videos.data"
+                            :key="video.id"
+                            class="bg-gray-100 p-2">
+                            <div class="space-y-10">
+
+                                <div
+                                    class="flex items-center p-6 space-x-6 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-500  justify-content-start">
+                                    <div class="flex bg-gray-100 p-4 w-72 space-x-4 rounded-lg">
+                                        <a :href="video.link"
+                                           target="_blank">
+                                            <img :src="video.thumbnail" alt="video thumbnail">
+                                            <p class="text-center text-gray-500 text-xs mt-1">
+                                                {{ video.published_at }}</p>
+
+                                        </a>
+                                    </div>
+
+                                    <section class="items-center justify-center px-4 bg-white">
+                                        <div class="max-w-xl w-full rounded-lg shadow-lg p-4 flex md:flex-row flex-col">
+                                            <div class="flex-1">
+                                                <h3 class="font-semibold text-lg tracking-wide">
+                                                    <a :href="video.link" target="_blank">{{ video.title }}</a>
+                                                </h3>
+                                                <p class="text-gray-500 my-1" v-if="!video.show_more">
+                                                    {{ video.description.substring(0, 100) }}
+                                                </p>
+                                                <p class="text-gray-500 my-1" v-if="video.show_more">
+                                                    {{ video.description }}
+                                                </p>
+                                                <button class="text-center text-gray-500 text-xs"
+                                                        @click="video.show_more=!video.show_more">Show
+                                                    {{ video.show_more ? 'less' : 'more' }}
+                                                </button>
+
+                                            </div>
+                                        </div>
+                                    </section>
+                                    <section class="items-center justify-center px-4 ">
+                                        <div class="max-w-xl w-full rounded-lg  p-4 flex md:flex-row flex-col">
+                                            <div class="flex-1">
+
+                                                <div class="md:px-2 mt-3 md:mt-0 items-center flex">
+                                                    <button
+                                                        :class="{'cursor-not-allowed': video.seen_at}"
+                                                        class="bg-blue-500 text-white font-bold px-4 py-2 text-sm uppercase rounded tracking-wider focus:outline-none hover:bg-blue-600">
+                                                        <svg class="h-8 w-8 text-white" viewBox="0 0 24 24" fill="none"
+                                                             stroke="currentColor" stroke-width="2"
+                                                             stroke-linecap="round" stroke-linejoin="round">
+                                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                                                            <polyline points="22 4 12 14.01 9 11.01"/>
+                                                        </svg>
+                                                    </button>
+
+                                                    <button
+                                                        :class="{'cursor-not-allowed': video.favorite_at}"
+                                                        class="inline-block ml-1 bg-indigo-500 px-4 py-2 text-white font-semibold rounded-lg hover:shadow-lg transition duration-3000 cursor-pointer hover:bg-indigo-600">
+
+                                                        <svg class="h-8 w-8 text-white" viewBox="0 0 24 24" fill="none"
+                                                             stroke="currentColor" stroke-width="2"
+                                                             stroke-linecap="round" stroke-linejoin="round">
+                                                            <polygon
+                                                                points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+                                                        </svg>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </section>
+
+                                </div>
+
+                            </div>
+                        </div>
                     </div>
+                    <pagination class="mt-6 mb-6 p-2" :links="videos.links"/>
+
+
                     <p class="text-center text-gray-500 text-xs">
                         &copy;2021 Ahmed Helal Ahmed. All rights reserved.
                     </p>
@@ -36,12 +111,14 @@
 import {defineComponent} from 'vue'
 import AppLayout from '@/Layouts/AppLayout.vue'
 import {Inertia} from '@inertiajs/inertia'
+import Pagination from '@/Components/Pagination'
+import Button from "../../../Jetstream/Button";
 
 export default defineComponent({
     setup() {
         function submit() {
             if (confirm('Sync videos! Are you sure?')) {
-                Inertia.post('/sync-videos');
+                Inertia.post(route('channels.show.sync-videos', this.channel.id));
             }
         }
 
@@ -49,9 +126,12 @@ export default defineComponent({
     },
     props: {
         channel: Object,
+        videos: Object,
     },
     components: {
+        Button,
         AppLayout,
+        Pagination
     },
 })
 </script>
diff --git a/resources/js/Pages/Channels/index.vue b/resources/js/Pages/Channels/index.vue
index 92fef17..870b424 100644
--- a/resources/js/Pages/Channels/index.vue
+++ b/resources/js/Pages/Channels/index.vue
@@ -20,12 +20,12 @@
                                        id="name" type="text" placeholder="Username">
                             </div>
                             <div class="mb-6">
-                                <label class="block text-gray-700 text-sm font-bold mb-2" for="identifier">
-                                    Identifier
+                                <label class="block text-gray-700 text-sm font-bold mb-2" for="remote_identifier">
+                                    Remote identifier
                                 </label>
-                                <input v-model="form.identifier"
+                                <input v-model="form.remote_identifier"
                                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
-                                       id="identifier" type="password" placeholder="******************">
+                                       id="remote_identifier" type="text" placeholder="Remote identifier">
                             </div>
                             <div class="flex items-center justify-between">
                                 <button
@@ -63,7 +63,7 @@ export default defineComponent({
     setup() {
         const form = reactive({
             name: null,
-            identifier: null,
+            remote_identifier: null,
         })
 
         function submit() {
diff --git a/routes/web.php b/routes/web.php
index d6f9754..e7b41e6 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,6 +3,7 @@
 use App\Http\Controllers\IndexingChannelController;
 use App\Http\Controllers\ShowingChannelController;
 use App\Http\Controllers\StoringChannelController;
+use App\Http\Controllers\SyncVideosController;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
@@ -41,3 +42,6 @@
 Route::middleware(['auth:sanctum', 'verified'])
     ->get('/channels/{channel}', ShowingChannelController::class)
     ->name('channels.show');
+Route::middleware(['auth:sanctum', 'verified'])
+    ->post('/channels/{channel}/sync-videos', SyncVideosController::class)
+    ->name('channels.show.sync-videos');