talents-tube/website
6
0
Fork 0
Code Issues Pull Requests Releases 103 Wiki Activity

Feat: Mise en place du changement de vignette #7354 @2h30

Browse Source
This commit is contained in:
Thomas MONCHICOURT
2018-10-03 16:50:29 +02:00
parent b19498ef46
commit bc75bb7afc
5 changed files with 183 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
volume/www/website/www/app/Resources/views/media/media_list_talent.html.twig
+75 -21
View File
@@ -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,10 +158,10 @@
{% 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>
<a href="#!" class="changeThumbnail">Changer la vignette</a>
<strong><span data-id="{{ media.id }}" class="titleVideo truncate tooltipped"
data-position="top"
data-tooltip="{{ media.title }}">{{ media.title }}</span></strong>
@@ -152,21 +174,37 @@
</div>
<div id="changeThumbnailVideo" class="modal modal-fixed-footer">
<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">
<iframe src="https://player.vimeo.com/video/217844541"
width="100%" height="230px" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
<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">Fermer</a>
<a href="#!" class="modal-action modal-close btn btn-default btn-round captur">Sauvegarder</a>
</div>
</div>
<div class="row">
<div id="made-in-ny"></div>
<a href="#" class="captur">Selectionner</a>
</div>
{% set video = null %}
@@ -230,22 +268,36 @@
<script type="text/javascript">
$(document).ready(function(){
var options = {
id: 217844541,
width: 640,
loop: true
id: null
};
var player = new Vimeo.Player('made-in-ny', options);
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':217844541};
console.log(data);
var data = {'duration': seconds, 'id':options.id};
$.ajax({
url:"{{ path('video_changeThumbnail') }}",
type:"POST",
data: JSON.stringify(data),
success:function(response) {
console.log(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)
@@ -254,7 +306,9 @@
}).catch(function(error) {
console.log(error);
});
});
$("iframe").on("load", function () {
$('.preloader-wrapper').removeClass('active');
});
});
</script>
volume/www/website/www/web/css/styles.css
+46
View File
@@ -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; }
@@ -15560,8 +15583,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 +15605,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 {
volume/www/website/www/web/css/styles.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
volume/www/website/www/web/sass/modules/_app.scss
+32
View File
@@ -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/_video.scss
+29
View File
@@ -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{