SERV-2286 - added video tutorial (renamed to video player) element. made it...

SERV-2286 - added video tutorial (renamed to video player) element. made it handle multiple instances.

src/Views/Limitless/Help/Layout/Master.blade.php

@@ -43,6 +43,7 @@
             @Limitless::SideNavMenuItem(['url' => '?page=Looper', 'target' => '_self', 'icon' => 'icon-loop3', 'title' => 'Looper'])
             @Limitless::SideNavMenuItem(['url' => '?page=Modal', 'target' => '_self', 'icon' => 'icon-stack', 'title' => 'Modal'])
             @Limitless::SideNavMenuItem(['url' => '?page=Element.RandomSelect', 'target' => '_self', 'icon' => 'icon-shuffle', 'title' => 'Random Select'])
+            @Limitless::SideNavMenuItem(['url' => '?page=Videoplayer', 'target' => '_self', 'icon' => 'icon-video-camera2', 'title' => 'Video Player'])
 
             @Limitless::SideNavMenuSectionTitle(['title' => 'Charts'])
             @Limitless::SideNavMenuItem(['url' => '?page=Linechart', 'target' => '_self', 'icon' => 'icon-statistics', 'title' => 'Line chart'])

src/Views/Limitless/Videoplayer/Attachments/videoplayer.init.js

+function initVideoPlayerElements() {
+
+    if (typeof videojs == 'undefined') {
+        console.warn('Warning - video.js is not loaded.');
+        return;
+    }
+
+    setVideoPlayerButtons();
+    setVideoPlayerModals();
+    setVideos();
+
+}
+function setVideoPlayerModals() {
+
+    let videoPlayerCounter = 0;
+
+    $('.LimitlessVideoPlayerModal').each(function() {
+
+        videoPlayerCounter++;
+        let videoPlayerElement = $(this);
+
+        videoPlayerElement.attr('id', 'LimitlessVideoPlayerModal' + videoPlayerCounter);
+
+        let closeButton = videoPlayerElement.find('.LimitlessVideoPlayerClose');
+        let videoPlayer = videoPlayerElement.find('.LimitlessVideoPlayer');
+        let videoPlayerId = 'LimitlessVideoPlayer' + videoPlayerCounter;
+
+        closeButton.attr('id', 'LimitlessVideoPlayerClose' + videoPlayerCounter);
+        videoPlayer.attr('id', videoPlayerId);
+    });
+
+}
+
+function setVideoPlayerButtons() {
+
+    let videoPlayerCounter = 0;
+
+    $('.LimitlessVideoPlayerButton').each(function() {
+
+        videoPlayerCounter++;
+        let videoPlayerElement = $(this);
+
+        videoPlayerElement.attr('id', 'LimitlessVideoPlayerButton' + videoPlayerCounter);
+        videoPlayerElement.attr('data-target', '#LimitlessVideoPlayerModal' + videoPlayerCounter);
+    });
+
+}
+
+function setVideos() {
+
+    let videoPlayerElementObjects = $('.LimitlessVideoPlayer');
+
+    videoPlayerElementObjects.each(function() {
+        videojs($(this)[0]);
+    });
+
+}
+
+$(document).ready(function() {
+
+    initVideoPlayerElements();
+
+    // pauses the video after modal close.
+    $('.LimitlessVideoPlayerModal').modal({
+        show: false
+    }).on('hidden.bs.modal', function(){
+        $(this).find('video')[0].pause();
+    });
+
+});

src/Views/Limitless/Videoplayer/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-06-30 02:31:57
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Videoplayer;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config 
+    {
+        public $methodAllocation = [
+            'Limitless::VideoPlayer' => 'videoPlayer'
+        ];
+
+        public $assetAllocation;
+
+        public function __construct()
+        {
+            $this->assetAllocation = [
+                'Limitless::VideoPlayer' => [
+                    'Attachments/video.js',
+                    'Attachments/videojs-ie8.min.js',
+                    'Attachments/video-js.css',
+                    'Attachments/videoplayer.init.js',
+                ]
+            ];
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "videoPlayer"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function videoPlayer($parameters)
+        {
+            return View('Limitless::Videoplayer.VideoPlayer')
+            ->withButtonText($parameters['button-text'] ?? null)
+            ->withTitle($parameters['title'] ?? null)
+            ->withUrl($parameters['url'] ?? null);
+        }
+
+    }
+
+
+

src/Views/Limitless/Videoplayer/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
+        @Limitless::VideoPlayer(['title' => 'Video 1', 'url' => 'https://monosnap.bugsmasher.online/marcoschmiedel/2020-06-04_SAMSUNG_8K_UHD_4320p_60fps_true_black_TECH_Demo.mp4'])
+        @Limitless::VideoPlayer(['title' => 'Video 2', 'url' => 'https://vjs.zencdn.net/v/oceans.mp4'])
+
+    @Limitless::CardStop
+
+@stop
\ No newline at end of file

src/Views/Limitless/Videoplayer/VideoPlayer.blade.php

+<button type="button" class="LimitlessVideoPlayerButton btn btn-secondary btn-labeled btn-labeled-left"
+        data-toggle="modal"
+        data-target="LimitlessVideoPlayerModal"
+        data-backdrop="static"
+        data-keyboard="false"
+>
+    <b><i class="icon-video-camera2"></i></b> {{ $buttonText ?? $title ?? 'No Text' }}
+</button>
+
+<div class="LimitlessVideoPlayerModal modal fade" tabindex="-1">
+    <div class="modal-dialog modal-full">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{{ $title ?? $buttonText ?? 'No Title' }}</h5>
+                <button type="button" class="close" data-dismiss="modal">×</button>
+            </div>
+            <div class="modal-body">
+                <video style="width:100%; max-height:60vh;"
+                       class="LimitlessVideoPlayer video-js vjs-big-play-centered"
+                       controls
+                       preload="auto"
+                       data-setup="{}"
+                >
+                    <source src="{{ $url }}" type="video/mp4" />
+                </video>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="LimitlessVideoPlayerClose btn btn-secondary" data-dismiss="modal">Video schließen</button>
+            </div>
+        </div>
+    </div>
+</div>