Fix : update css for select visibility

volume/www/website/www/app/Resources/views/media/media_list_talent.html.twig

@@ -35,15 +35,26 @@
             {% if app.user.company.presentationVideo %}
                 {% set media = app.user.company.presentationVideo %}
             {% endif %}
-            <div class="row video_premier z-depth-3">
+            <div class="row video_premier z-depth-3"> 
-                
                     {% if app.user.company.presentationVideo %}
-                    <div class="col s4 video_col">
+                    <div class="col s4 video_col col-card">
+                        <div class="preloader-wrapper small">
+                            <div class="spinner-layer spinner-blue-only">
+                                <div class="circle-clipper left">
+                                <div class="circle"></div>
+                                </div><div class="gap-patch">
+                                <div class="circle"></div>
+                                </div><div class="circle-clipper right">
+                                <div class="circle"></div>
+                                </div>
+                            </div>
+                        </div>
                         <div class="embed-responsive embed-responsive-16by9">
                             <iframe src="https://player.vimeo.com{{ media.getCdnUrl()|replace({ "videos": "video"}) }}"
                                     width="100%" height="550" frameborder="0" webkitallowfullscreen
                                     mozallowfullscreen allowfullscreen></iframe>
                         </div>
+                        <a data-id="{{ media.getCdnUrl()|replace({ "/videos/": ""}) }}" href="#!" class="btn-floating left halfway-fab changeThumbnail"><i class="material-icons">image</i></a>
                     </div>
                     {% else %}
                     <div class="col s12 video_col">
@@ -95,6 +106,17 @@
                 <div class="col s12 m6 l4 col-card">
                     <div class="card card-video-action z-depth-1">
                         <div class="card-image">
+                                <div class="preloader-wrapper small">
+                                    <div class="spinner-layer spinner-blue-only">
+                                        <div class="circle-clipper left">
+                                        <div class="circle"></div>
+                                        </div><div class="gap-patch">
+                                        <div class="circle"></div>
+                                        </div><div class="circle-clipper right">
+                                        <div class="circle"></div>
+                                        </div>
+                                    </div>
+                                </div>
                             <div class="embed-responsive embed-responsive-16by9">
                                 <iframe src="https://player.vimeo.com{{ media.getCdnUrl()|replace({ "videos": "video"}) }}"
                                         width="100%" height="230px" frameborder="0" webkitallowfullscreen
@@ -136,6 +158,7 @@
                                     {% endif %}
                                 </div>
                             </div>
+                            <a data-id="{{ media.getCdnUrl()|replace({ "/videos/": ""}) }}" href="#!" class="btn-floating left halfway-fab changeThumbnail"><i class="material-icons">image</i></a>
                         </div>
                         <div class="card-content">
                             <p>
@@ -149,6 +172,41 @@
             {% endif %}
         {% endfor %}
     </div>
+
+
+    <div id="changeThumbnailVideo" class="modal modal-fixed-footer modal-fixed-header">
+        <div class="modal-header">
+            <h3 class="color-blue1">Modifier la vignette</h3>
+            <span class="right">
+                <a href="#!" class="modal-close">
+                    <img src="{{ asset('/img/close-modal.svg') }}" >
+                </a>
+            </span>
+        </div>
+        <div class="modal-content">
+                <div class="row">
+                    <div class="col s6">
+                        <div class="embed-responsive embed-responsive-16by9">
+                                <div class="col s12">
+                                        <div id="video-vimeo"></div>
+                                </div>
+                        </div>
+                    </div>
+                    <div class="col s6">
+                        <p><strong>Lancez la vidéo</strong> , puis <strong>appuyer sur pause</strong>  pour définir l’image.
+                        <br />Une fois votre vignette définie, cliquez sur le bouton
+                        <strong>Sauvegarder</strong>.</p>
+                    </div>
+                </div>
+        </div>
+        <div class="modal-footer">
+            <a href="#!" class="modal-action modal-close btn btn-default btn-round captur">Sauvegarder</a>
+        </div>
+    </div>
+
+
+
+        
     {% set video = null %}
     <div id="addVideo" class="modal modal-fixed-footer">
         <div class="modal-content">
@@ -206,4 +264,52 @@
     </script>
     <script src="{{ asset('/js/mediaListing.js') }}"></script>
     <script src="{{ asset('/js/dropzone.js') }}"></script>
+    <script src="https://player.vimeo.com/api/player.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function(){
+            var options = {
+                id: null
+            };
+            var player = null;
+            $('.modal-close').on('click',function(){
+                $('#changeThumbnailVideo').modal('close');
+            });
+            $('.changeThumbnail').on('click',function(){
+                $('#changeThumbnailVideo').modal();
+                $('#changeThumbnailVideo').modal('open');
+                var idVideo = $(this).data('id');
+                options = {
+                    id: idVideo
+                };
+                player = new Vimeo.Player('video-vimeo', options);
+            });
+
+            $('.captur').on('click',function(e){
+                e.preventDefault();
+                $('a.changeThumbnail').data('id',options.id).parents('.col-card').find('.preloader-wrapper').addClass('active');
+                player.getCurrentTime().then(function(seconds) {
+                    var data = {'duration': seconds, 'id':options.id};
+                    $.ajax({
+                        url:"{{ path('video_changeThumbnail') }}",
+                        type:"POST",
+                        data: JSON.stringify(data),
+                        success:function(response) {
+                            $('a.changeThumbnail').data('id',options.id).parents('.col-card').each(function( index ) {
+                                var iframe = $( this ).contents().find('iframe');
+                                iframe[0].src = iframe[0].src;
+                            });
+                        },
+                        error:function(error){
+                            console.log(error)
+                        }
+                    });
+                }).catch(function(error) {
+                    console.log(error);
+                });
+            });
+            $("iframe").on("load", function () {
+                $('.preloader-wrapper').removeClass('active');
+            });
+        });
+    </script>
 {% endblock %}

volume/www/website/www/src/AppBundle/Controller/MediaController.php

@@ -144,6 +144,18 @@ class MediaController extends Controller
      * Ajax & Webservices
      ***********************/
 
+     /**
+     * @Route("/media/changeThumbnail", name="video_changeThumbnail")
+     */
+    public function changeThumbnailAction(Request $request)
+    {
+        $data = json_decode($request->getContent());
+        $mediaManager = $this->get('media_manager');
+        $message = $mediaManager->changeThumbnail($data->duration, $data->id);
+     
+        return new JsonResponse($message);
+    }
+
     /**
      * @Route("/media/upload/{id}", name="upload_media")
      */

volume/www/website/www/src/AppBundle/Utils/Services/MediaManager.php

@@ -101,6 +101,17 @@ class MediaManager
         }
     }
 
+    /**
+     * @param $entity
+     * @return array
+     */
+    public function changeThumbnail($duration, $id)
+    {
+        $response = $this->vimeo->request('/videos/'.$id.'/pictures', array('active' => true, 'time' => $duration), 'POST');
+
+        return array('success' => $response);
+    }
+
     /**
      * @param $entity
      * @return array

volume/www/website/www/web/css/admin.css

@@ -2808,6 +2808,16 @@
 .hover-none a:hover {
   color: #ffffff; }
 
+.chip a {
+  color: rgba(0, 0, 0, 0.6); }
+
+#liste-jobs .card .card-action .chip a {
+  color: rgba(0, 0, 0, 0.6);
+  text-transform: initial;
+  text-decoration: none;
+  text-align: center;
+  margin: 0; }
+
 .color-white {
   color: #FFFFFF; }
 

volume/www/website/www/web/css/styles.css

@@ -13457,6 +13457,29 @@ a.link-white-underline {
 .modal-content .btn {
   box-shadow: none; }
 
+#dashboard .modal-fixed-header .modal-header {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  height: auto;
+  width: 100%;
+  padding: 20px;
+  border-bottom: 1px solid #E0E0E0; }
+  #dashboard .modal-fixed-header .modal-header h3 {
+    font-size: 20px;
+    font-family: "Raleway", sans-serif;
+    font-weight: 300;
+    margin: 0;
+    float: left; }
+  #dashboard .modal-fixed-header .modal-header a.modal-close {
+    cursor: pointer; }
+#dashboard .modal-fixed-header .modal-content {
+  padding-top: 100px; }
+
+.modal-fixed-header .modal-footer {
+  height: 68px; }
+
 #modal-recommendation span {
   font-size: 22px; }
 
@@ -15172,6 +15195,9 @@ h6 {
 .bg-white.button-plus:after {
   background: url(/img/decroche-white.png) top center no-repeat; }
 
+select {
+  display: block; }
+
 .btn, .btn-large {
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
@@ -15560,8 +15586,19 @@ h6 {
   padding: 0 5px; }
   .row .col-card .card-video {
     margin-top: 0; }
+  .row .col-card .changeThumbnail {
+    background-color: #155ee4; }
+  .row .col-card .preloader-wrapper {
+    z-index: 1000;
+    position: absolute;
+    top: 10px;
+    left: 30px;
+    margin-left: -18px; }
+    .row .col-card .preloader-wrapper .spinner-blue-only {
+      border-color: #155ee4; }
 
 .video_premier {
+  position: relative;
   display: flex; }
   .video_premier .content_col, .video_premier .video_col_edit_premier, .video_premier .video_col_link_share {
     padding: 0; }
@@ -15571,6 +15608,18 @@ h6 {
     justify-content: space-between;
     flex-wrap: wrap;
     background: #FFF; }
+  .video_premier .btn-floating.halfway-fab.left.changeThumbnail {
+    background-color: #155ee4;
+    bottom: 10px;
+    left: 16px; }
+  .video_premier .preloader-wrapper {
+    z-index: 1000;
+    position: absolute;
+    top: 10px;
+    left: 30px;
+    margin-left: -18px; }
+    .video_premier .preloader-wrapper .spinner-blue-only {
+      border-color: #155ee4; }
   .video_premier .video_col_content {
     margin-bottom: 10px; }
     .video_premier .video_col_content h3 {
@@ -16906,5 +16955,3 @@ tbody td {
   border-top: 1px solid #F2F3F5; }
 #talent-show .talent-border-left {
   border-left: 1px solid #F2F3F5; }
-
-/*# sourceMappingURL=styles.css.map */

volume/www/website/www/web/sass/modules/_app.scss

@@ -259,6 +259,38 @@
   }
 }
 
+#dashboard{
+  .modal-fixed-header{
+    .modal-header{
+      position: fixed;
+      z-index: 100;
+      top: 0;
+      left: 0;
+      height: auto;
+      width: 100%;
+      padding: 20px;
+      border-bottom: 1px solid $grey1;
+      h3{
+        font-size: 20px;
+        font-family: $font-1;
+        font-weight: 300;
+        margin: 0;
+        float:left;
+      }
+      a.modal-close {
+        cursor:pointer;
+      }
+    }
+    .modal-content{
+      padding-top: 100px;
+    }
+  } 
+}
+
+.modal-fixed-header .modal-footer {
+  height: 68px;
+}
+
 #modal-recommendation{
   span{
     font-size: 22px;

volume/www/website/www/web/sass/modules/_global.scss

@@ -211,6 +211,10 @@ h6 {
   }
 }
 
+select{
+  display: block;
+}
+
 
 
 

volume/www/website/www/web/sass/modules/_video.scss

@@ -48,8 +48,22 @@
   .card-video{
     margin-top: 0;
   }
+  .changeThumbnail{
+    background-color: $blue1;
+  }
+  .preloader-wrapper{
+    z-index: 1000;
+    position: absolute;
+    top: 10px;
+    left: 30px;
+    margin-left: -18px;
+    .spinner-blue-only{
+      border-color: $blue1;
+    }
+  }
 }
 .video_premier{
+    position: relative;
     display: flex;
     .content_col,.video_col_edit_premier,.video_col_link_share{
       padding:0;
@@ -61,6 +75,21 @@
       flex-wrap: wrap;
       background: #FFF;
     }
+    .btn-floating.halfway-fab.left.changeThumbnail{
+      background-color: $blue1;
+      bottom: 10px;
+      left: 16px;
+    }
+    .preloader-wrapper{
+      z-index: 1000;
+      position: absolute;
+      top: 10px;
+      left: 30px;
+      margin-left: -18px;
+      .spinner-blue-only{
+        border-color: $blue1;
+      }
+    }
     .video_col_content{
       margin-bottom: 10px;
       h3{