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

Merge branch 'feat/choose-thumbnail' into develop

Browse Source
This commit is contained in:
Thomas MONCHICOURT
2018-10-03 16:51:04 +02:00
parent ef5f0e81da bc75bb7afc
commit df3bb979e9
7 changed files with 240 additions and 4 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
+109 -3
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,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
+12
View File
@@ -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
+11
View File
@@ -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/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{