Área do Player Projeto VideoFlix - Segundo Bloco Curso de Laravel, Laravel Mastery em https://laravelmastery.com.br

player-series.blade.php

@props(['videos', 'current'])

<div>
    <div class="text-white ml-10 mt-14">
        <a href="{{route('my-content.main')}}" class="underline">Meus Conteúdos</a> / <strong>Player</strong>
    </div>
    <div id="player" class="mt-14 ml-10"></div>

    <div class="fixed w-80 h-full top-0 right-0 bg-black border-l border-gray-900">

       <ul>
           @foreach($videos as $video)
               <li class="block text-white">
                   <a href="#" data-code="{{$video['code']}}" data-video="{{$video['processed_video']}}"
                      class="linkVideo block px-4 py-4 border-b border-gray-900 hover:bg-white hover:text-black transition duration-300 ease-in-out">
                       {{$video['name']}}
                   </a>
               </li>
           @endforeach
       </ul>

    </div>


    @push('head')
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/clappr.level-selector/latest/level-selector.min.js"></script>
    @endpush

    @push('scripts')
        <script>
            let video = "{{url('resources/' . $current)}}";

            var player = new Clappr.Player({
                source: video,
                width: "70%",
                height: "720px",
                parentId: "#player",
                mimeType: "application/x-mpegURL",
                plugins: {"core": [LevelSelector]}
            });

            let linkVideos = document.querySelectorAll('a.linkVideo');

            linkVideos.forEach(el => {
               el.addEventListener('click', event => {
                   event.preventDefault()
                   player.load(`/resources/${event.target.dataset.code}/${event.target.dataset.video}`);
               })
            });

        </script>
    @endpush
</div>

player-single.blade.php

@props(['video'])
<div>
    <div id="player"></div>

    @push('head')
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/clappr.level-selector/latest/level-selector.min.js"></script>

        <style>
            /* https://github.com/clappr/clappr/issues/402#issuecomment-561549413 */

            /* Fix the player container to take up 100% width and to calculate its height based on its children. */
            [data-player] {
                position: relative;
                width: 100vw;
                height: 100vh;
                margin: 0;
            }

            /* Fix the video container to take up 100% width and to calculate its height based on its children. */
            [data-player] .container[data-container] {
                width: 100vw;
                height: 100vh;
                position: relative;
            }

            /* Fix the media-control element to take up the entire size of the player. */
            [data-player] .media-control[data-media-control] {
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }

            /* Fix the video element to take up 100% width and to calculate its height based on its natural aspect ratio. */
            [data-player] video {
                position: relative;
                display: block;
                width: 100vw;
                height: 100vh;
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            var player = new Clappr.Player({
                source: "{{url('resources/' . $video->code . '/' . $video->processed_video)}}",
                width: "100%",
                height: "auto",
                parentId: "#player",
                mimeType: "application/x-mpegURL",
                plugins: {"core": [LevelSelector]}
            });

        </script>
    @endpush
</div>

player.blade.php

@if($content->type == 2)
    <x-player-series :videos="$videos" :current="$current"></x-player-series>
@else
    <x-player-single :video="$videos"></x-player-single>
@endif

Player.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Content;

class Player extends Component
{
    public $videos;
    public $content;

    public $current;

    public function mount(Content $content)
    {
        $this->content = $content;
        $this->videos = $content->videos->toArray();

        if($content->type == 2)
            $this->current = $this->videos[0]['code'] . '/' . $this->videos[0]['processed_video'];
    }

    public function render()
    {
        return view('livewire.player')->layout('layouts.player');
    }
}