PHP Classes

File: resources/views/livewire/frontend/channel/modal/view-content.blade.php

Recommend this page to a friend!
  Classes of Nyi Nyi Lwin  >  mtube  >  resources/views/livewire/frontend/channel/modal/view-content.blade.php  >  Download  
File: resources/views/livewire/frontend/channel/modal/view-content.blade.php
Role: Auxiliary script
Content type: text/plain
Description: Auxiliary script
Class: mtube
Application to share videos between users
Author: By
Last change:
Date: 4 months ago
Size: 3,368 bytes
 

Contents

Class file image Download
<x-modal>
    <x-slot name="title">
        <h3 class="text-lg font-medium text-gray-900">{{ __('Video Details') }}</h3>
    </x-slot>
    <x-slot name="content">
        <div class="flex justify-between items-center px-3">
            <ul class='flex cursor-pointer'>
                <li wire:click="updateTab('details')" class='py-2 pr-10 @if($tab == 'details') bg-white border-b text-indigo-500 @endif'>{{ __('Details') }}</li>
                <li wire:click="updateTab('analytics')" class='py-2 pr-10 @if($tab == 'analytics') bg-white border-b text-indigo-500 @endif'>{{ __('Analytics') }}</li>
                <li wire:click="updateTab('comments')" class='py-2 pr-10 @if($tab == 'comments') bg-white border-b text-indigo-500 @endif'>{{ __('Comments') }}</li>
                <li wire:click="updateTab('thumbnails')" class='py-2 pr-10 @if($tab == 'thumbnails') bg-white border-b text-indigo-500 @endif'>{{ __('Thumbnails') }}</li>
                <li wire:click="updateTab('settings')" class='py-2 pr-10 @if($tab == 'settings') bg-white border-b text-indigo-500 @endif'>{{ __('Settings') }}</li>
            </ul>
            <div wire:loading wire:target="updateTab">
                <i class="fas fa-spin fa-spinner"></i>
            </div>
        </div>

        @if($tab == 'details')
            <div class="p-3">
                <div id="player"></div>
            </div>
            <div class="w-full p-3">
                <h2 class="text-md font-bold leading-5 text-gray-900 sm:text-3xl sm:truncate">{{ $video->name }}</h2>
                <p class="mt-2">{{ $video->description }}</p>
            </div>
            <div class="w-full p-3 flex justify-between items-center">
                <h2 class="font-medium">{{ __('Video Link') }}</h2>
                <a id="video_link mt-1" href="{{ route('watch', ['v' => $video->media_id]) }}" class="text-indigo-500" target="_blank">{{ route('watch', ['v' => $video->media_id]) }}</a>
            </div>
        @endif

        @if($tab == 'comments')
            <div class="px-4 py-6">
                @livewire('frontend.components.comment', ['video_id' => $video->id, 'commenter' => $video->channel, 'owner' => true])
            </div>
        @endif

        @if($tab == 'thumbnails')
            @livewire('frontend.channel.partial.thumbnail', ['video_id' => $video->id ])
        @endif

        @if($tab == 'analytics')
            @livewire('frontend.channel.partial.analytic', ['video_id' => $video->id ])
        @endif

        @if($tab == 'settings')
            @livewire('frontend.channel.partial.settings', ['video_id' => $video->id ])
        @endif

    </x-slot>
</x-modal>

<script>
    function renderVideoPlayer() {
        let playerElement = document.getElementById("player");
        let aspectRatio = 9/16, newWidth = playerElement.parentElement.offsetWidth, newHeight = 2 * Math.round(newWidth * aspectRatio/2);

        let player = new Clappr.Player({
            source: '{{ \Illuminate\Support\Facades\Storage::disk($video->disk)->url($video->streaming_url) }}',
            plugins: [HlsjsPlayback],
            poster: '{{ \Illuminate\Support\Facades\Storage::disk($video->disk)->url($video->thumbnail_url) }}'
        });
        player.attachTo(playerElement);
    }
    renderVideoPlayer();
    @this.on('updateTab', () => {
        renderVideoPlayer();
    })
</script>

For more information send a message to info at phpclasses dot org.