{% extends 'base.html.twig' %}
{% block content %}
<div id="wrapper" class="contentWrapper">
    <div class="row">
         <div class="col s8 offset-s2">
            <h3>{{ 'answer.talent.create.title.label'|trans }} : {{ ad.getTitle() }}</h3>
            <div class="card-panel">
                <strong><b>Comment procéder ?</b></strong>
                <div class="row">
                    <div class="col s12 m5">
                        <h4 class="color-blue1">Vous ne disposez pas de CV vidéo</h4>
                        <p>Vous pouvez enregistrer directement votre réponse si vous disposez d'une webcam en <b>cliquant sur le bouton ci-dessous</b>.
                        Une fois votre vidéo enregistrée et téléchargée vous pouvez la déposer dans la zone de téléchargement afin de valider votre réponse.</p><br />
                        <a class="modal-trigger waves-effect waves-light btn btn-default" href="#modal1">Filmer mon CV vidéo</a>
                    </div>
                    <div class="col offset-m2 s12 m5">
                        <h4 class="color-blue1">Vous disposez déjà d'un cv vidéo</h4>
                        <p>Pour répondre à cette annonce il vous suffit de glisser votre vidéo de réponse dans la 
                        <strong><a href="#infosDropzone">zone ci-dessous</a></strong>. Une fois la vidéo téléchargée vous pourrez valider votre réponse. Vous pouvez néanmoins laisser
                        un message en complément de la vidéo dans la zone prévue à cette effet plus bas.
                        </p>
                         <a class="modal-trigger waves-effect waves-light btn btn-default" href="#modal2">Choisir une vidéo de ma vidéothèque</a>
                    </div>
                </div>
            </div>
            <p></p>
            {% include 'media/dropzone.html.twig' %}
            {{ form_start(form, {'attr': { 'id': 'form_media' } }) }}
             {{ form_row(form.status) }}
            <br /><br />
            <div class="row">
                <div class="input-field col s12">
                    {{ form_errors(form.comment) }}
                    {{ form_widget(form.comment) }}
                    {{ form_label(form.comment) }}
                </div>
            </div>
            <br />
            {{ form_rest(form) }}
            <button id="submit" class="btn btn-large btn-default disabled"  type="submit">
                Valider ma réponse
            </button>
            {{ form_end(form) }}
            <br />
        </div>
    </div>
</div>
<!-- Modal Vidéotheque -->
<div id="modal2" class="modal modal-fixed-footer">
    <div class="modal-content modal-choiceExistingVideo">
        <h2>Choisir une vidéo existante</h2>
        <div class="row">
            {% for vid in videos %}
                {% set img = "" %}
                {% if vid.thumbnails.0 is defined %}
                    {% set img = vid.thumbnails.0.sizes.4.link %}
                {% endif %}
                <div class="col s4">
                    <a class="addExistingVideo tooltipped btn btn-default" data-url="https://player.vimeo.com{{ vid.getCdnUrl()|replace({ "videos": "video"}) }}" data-img="{{ img }}" data-position="top" data-tooltip="Choisir cette vidéo" href="#"  data-title="{{ vid.getTitle() }}" data-id="{{ vid.getId() }}">
                        <span class="truncate">{{ vid.getTitle() }}</span><br />
                    </a>
                    <iframe src="https://player.vimeo.com{{ vid.getCdnUrl()|replace({ "videos": "video"}) }}" width="100%" height="auto" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
    <div class="modal-content">
        <div class="row">
            <div class="col m5 s12">
                <h4 class="color-blue1">J'enregistre mon CV vidéo</h4>
                <video id="myCvVideo" class="video-js vjs-default-skin"></video>
                <div class="video-informations-card">
                    <p>Merci de cliquer sur l'icone <span class="vjs-icon-device-perm"></span> afin d'activer votre webcam.</p>
                    <p>Votre webcam activée, lancez l'enregistrement en cliquant sur le bouton rond en bas à gauche du lecteur.</p>
                    <p>Si vous n'êtes pas satisfait de votre CV vidéo après un enregistrement, vous pouvez à tout moment recommencer l'enregistrement.</p>
                </div>
            </div>
            <div class="col m2 hide-on-small-only">
                <div class="valign-wrapper" style="align-items:center;justify-content: center;height: 300px;width:100%;">
                    <div style="font-size:40px;">
                        <i class="fa fa-arrow-right center-align" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="col m5 s12">
                <h4 class="color-blue1">Je prévisualise mon CV vidéo</h4>
                <video id="preview" controls="true">
                    <span class="vjs-control-text">Play Video</span>
                </video>
                <div class="btnContainer center-align" style="display:none;">
                    <a id="saveRecord" href="#!" class="saveVideo btn btn-default">
                        <i class="fa fa-floppy-o" aria-hidden="true"></i>&nbsp; Télécharger mon cv-vidéo
                    </a>
                    <div class="video-informations-card">
                        <p>Une fois téléchargé vous pouvez glisser-déposer votre CV-vidéo dans la zone prévue pour lancer le téléchargement.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-blue btn-flat ">Fermer</a>
    </div>
</div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script>
    <script type="text/javascript">
        var urlDropzone = '{{ path("upload_media_answer", {"id": answer.getId()}) }}';
        var urlDelete = '{{ path("delete_media_answer", {"id": answer.getId() }) }}'
        var idObject = '{{ answer.getId() }}';
        var typeObject = "answer";
        {% if video %}
            if($("#form_media").length){
                $("#form_media > #submit").removeClass('disabled');
                $("#form_media > #submit").addClass('pulse');
            }
            var videoExist =  true;
            var videoOriginal = "{{video.getOriginalUrl()}}";
            var mockFile = { name: '{{video.getTitle()}}', size: '181818181', type: 'mp4', serverID: 0, accepted: true };
        {% else %}
            var videoExist =  false;
        {% endif %}
    </script>
    <script type="text/javascript">
        $(".addExistingVideo").click(function(){
            var idVideo = $(this).data("id");
            var titleVideo = $(this).data("title");
            var imgVideo = $(this).data("img");
            var urlVideo = $(this).data("url");
            var drop = $("#my-awesome-dropzone")[0].dropzone;
            drop.removeAllFiles(true);
            $.ajax({
                type: 'POST',
                url: '{{ path("link_media_answer", {"id": answer.getId()}) }}',
                data: "idVideo="+idVideo,
                dataType: 'html',
                success: function (response) {
                    Materialize.toast('Vidéo associé Merci', 4000);
                    $('#modal2').modal();
                    $('#modal2').modal('close');
                    videoOriginal = urlVideo;
                    videoExist = true;
                    var mockFile = { name: titleVideo, size: '100', type: 'mp4', serverID: 0, accepted: true };
                    drop.emit("addedfile", mockFile);
                    drop.files.push(mockFile);    
                    iframe = '{% include "media/dropzoneTemplateSuccess.html.twig" with {"url_iframe": "#URL_PLACEHOLDER#"} only %}';
                    iframe = iframe.replace('#URL_PLACEHOLDER#',urlVideo);
                    if($('#preview_video > iframe').length){
                        $('#preview_video > iframe').attr('src',urlVideo);
                        $('#preview_video > *').fadeIn();
                        if($("#form_media #submit").hasClass('disabled')) {
                            $("#form_media > #submit").removeClass('disabled');
                            $("#form_media > #submit").addClass('pulse');
                        }
                    } else {
                        $('#preview_video').html(iframe);
                    }
                    if($("#form_media #submit").hasClass('disabled')){
                        $("#form_media > #submit").removeClass('disabled');
                        $("#form_media > #submit").addClass('pulse');
                    }
                },
                error: function (response, xhr, ajaxOptions, thrownError) {
                    Materialize.toast('Erreur lors de l\'association de la vidéo!', 4000);
                }
            });
        });
    </script>
    <script src="{{ asset('/js/dropzone.js') }}"></script>
    <script src="{{ asset('/js/vendors/video.min.js') }}"></script>
    <script src="{{ asset('/js/vendors/RecordRTC.js') }}"></script>
    <script src="{{ asset('/js/vendors/videojs.record.js') }}"></script>
    <script src="{{ asset('/js/vendors/jquery.browser.min.js') }}"></script>
    <script language="JavaScript">
		var player = videojs("myCvVideo",
        {
            controls: true,
            width: 320,
            height: 240,
            plugins: {
                record: {
                    audio: true,
                    video: true,
                    maxLength: 300,
                    debug: true,
                    videoMimeType: 'video/mp4',
                }
            }
        });
        player.on('deviceError', function()
        {
            console.log('device error:', player.deviceErrorCode);
        });
        player.on('error', function(error)
        {
            console.log('error:', error);
        });
        player.on('startRecord', function()
        {
            console.log('started recording!');
        });
        player.on('finishRecord', function()
        {
            $(".btnContainer").fadeIn();
            var preview = document.querySelector('#preview');
            var file = player.recordedData;
            var agent = navigator.userAgent;
            if($.browser.mozilla){
                window.URL = window.URL || window.webkitURL;
                fileURL = window.URL.createObjectURL(file);
                preview.src = fileURL;
            } else {
                preview.src = URL.createObjectURL(file.video);
            }     
        });
        $("#saveRecord").on('click',function(){
            player.recorder.saveAs({'video': 'mon-cv-talentstube'});
        });
	</script>
{% endblock %}