Edit File: video-edit.blade.php
<div> @if (session('status')) <x-alert :status="session('status')" :message="session('message')" /> @endif <x-slot name="header"> <di class="relative"> <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight text-center"> {{ __('Update Anime ' . $video->name) }} </h2> </di> </x-slot> <div class="py-12"> <div class=" mx-auto sm:px-6 lg:px-8"> <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"> <div class="flex items-center gap-8 justify-center p-8"> <div> <img src="{{$thumbnail ? $thumbnail->temporaryUrl() : $oldthumbnail }}" alt="old-thumbnail" class="w-72 aspect-video"> </div> </div> <form wire:submit="store" class="flex justify-center flex-col gap-4 w-1/2 mx-auto p-4" x-data="{ progress: @entangle('progress') }"> <div class="w-full bg-gray-300 rounded-full h-2.5 mb-4" x-show="progress > 0"> <div class="bg-green-600 h-2.5 rounded-full" :style="'width: ' + progress + '%'"></div> </div> <!-- Show Upload Progress Percentage --> <div x-text="progress + '%'"></div> <div class="flex justify-between"> <div class="w-1/2"> <x-input-label value="Thumbnail" for="thumbnail" class="me-auto dark:text-white" /> <label for="thumbnail" class="duration-200 flex flex-col items-center w-3/4 me-auto px-4 py-6 bg-white text-blue-600 rounded-lg shadow-lg tracking-wide uppercase border border-blue-600 cursor-pointer hover:bg-blue-600 hover:text-white"> <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M16.88 4.12A10 10 0 111 10c.05 0 .1 0 .15-.01A7.75 7.75 0 004 12.25V15a1 1 0 001 1h10a1 1 0 001-1v-2.75A7.75 7.75 0 0015 10a7.75 7.75 0 001.87-5.88z" /> </svg> <span class="mt-2 text-base leading-normal">Select a Thumbnail</span> <input id="thumbnail" type="file" wire:model="thumbnail" class="hidden" accept=".jpeg,.jpg,.png,.webp" /> <div class="flex"> Status : <div wire:loading.remove wire:target="thumbnail">{{ $thumbnail ? "Uploaded" : "IDLE" }}</div> <div wire:loading wire:target="thumbnail">Uploading...</div> </div> <div x-data="{ uploading: false, progress: 0 }" x-on:livewire-upload-start="uploading = true" x-on:livewire-upload-finish="uploading = false" x-on:livewire-upload-cancel="uploading = false" x-on:livewire-upload-error="uploading = false" x-on:livewire-upload-progress="progress = $event.detail.progress"></div> </label> <x-input-error class="mt-2" :messages="$errors->get('thumbnail')" /> </div> <div class="w-1/2"> <x-input-label value="Video" for="video_file" class="me-auto dark:text-white" /> <label for="video_file" class="duration-200 flex flex-col items-center w-3/4 me-auto px-4 py-6 bg-white text-blue-600 rounded-lg shadow-lg tracking-wide uppercase border border-blue-600 cursor-pointer hover:bg-blue-600 hover:text-white"> <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M16.88 4.12A10 10 0 111 10c.05 0 .1 0 .15-.01A7.75 7.75 0 004 12.25V15a1 1 0 001 1h10a1 1 0 001-1v-2.75A7.75 7.75 0 0015 10a7.75 7.75 0 001.87-5.88z" /> </svg> <span class="mt-2 text-base leading-normal">Select a Video</span> <input id="video_file" type="file" wire:model="video_file" class="hidden" accept=".mp4" /> <div class="flex"> Status : <div wire:loading.remove wire:target="video_file">{{ $video_file ? "Uploaded" : "IDLE" }}</div> <div wire:loading wire:target="video_file">Uploading...</div> </div> <div x-data="{ uploading: false, progress: 0 }" x-on:livewire-upload-start="uploading = true" x-on:livewire-upload-finish="uploading = false" x-on:livewire-upload-cancel="uploading = false" x-on:livewire-upload-error="uploading = false" x-on:livewire-upload-progress="progress = $event.detail.progress"></div> </label> <x-input-error class="mt-2" :messages="$errors->get('video_file')" /> </div> </div> <div> <x-input-label class="dark:text-white" value="Anime Name" for="anime_name" /> <x-text-input wire:model="anime_name" id="anime_name" name="anime_name" type="text" class="mt-1 block w-full hover:cursor-not-allowed hover:border-red-600 focus:bg-red-600 focus:text-white" required autocomplete="anime_name" readonly /> <x-input-error class="mt-2" :messages="$errors->get('anime_name')" /> </div> <div> <x-input-label class="dark:text-white" for="order" :value="__('Urutan')" /> <select name="order" id="order" class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" wire:model="order"> @foreach (range(1, $max_order) as $item) <option value="{{$item}}">{{$item}}</option> @endforeach </select> </div> <div class="flex items-center gap-4 w-full justify-center"> <x-primary-button>{{ __('Save') }}</x-primary-button> <x-action-message class="me-3" on="user-created"> {{ __('Page Edited.') }} </x-action-message> </div> </form> <!-- Livewire Progress Events for Realtime Updates --> <script> document.addEventListener('livewire-upload-start', () => { @this.progress = 0; // Reset progress at start }); document.addEventListener('livewire-upload-progress', event => { @this.progress = event.detail.progress; // Update progress }); document.addEventListener('livewire-upload-finish', () => { @this.progress = 100; // Set to 100 on finish }); </script> </div> </div> </div> </div>
Back