{% if livelesson.stream_index %}
-
Если видео не загрузилось, - уменьшите качество видео или обновите страницу
-
{% else %}
{% if livelesson.cover %}
@@ -60,29 +53,5 @@
{% endblock content %}
{% block foot %}
- {% if livelesson.stream_index %}
-
- {% endif %}
+
{% endblock foot %}
diff --git a/web/src/img/heart.png b/web/src/img/heart.png
new file mode 100644
index 00000000..2cfccaed
Binary files /dev/null and b/web/src/img/heart.png differ
diff --git a/web/src/img/video-ended-popup-like.jpg b/web/src/img/video-ended-popup-like.jpg
new file mode 100644
index 00000000..d437a971
Binary files /dev/null and b/web/src/img/video-ended-popup-like.jpg differ
diff --git a/web/src/img/video-ended-popup-logo.png b/web/src/img/video-ended-popup-logo.png
new file mode 100644
index 00000000..a84b49e7
Binary files /dev/null and b/web/src/img/video-ended-popup-logo.png differ
diff --git a/web/src/img/video-ended-popup-ref.jpg b/web/src/img/video-ended-popup-ref.jpg
new file mode 100644
index 00000000..fbfe3225
Binary files /dev/null and b/web/src/img/video-ended-popup-ref.jpg differ
diff --git a/web/src/js/app.js b/web/src/js/app.js
index 7193a6e8..14e66e65 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -19,7 +19,6 @@ import "./modules/mixpanel";
import "../sass/app.sass";
-import $ from 'jquery';
import Vue from 'vue';
import Vuelidate from 'vuelidate';
import VueAutosize from '../components/directives/autosize'
diff --git a/web/src/js/modules/api.js b/web/src/js/modules/api.js
index cbf27e8f..6ce13717 100644
--- a/web/src/js/modules/api.js
+++ b/web/src/js/modules/api.js
@@ -89,6 +89,13 @@ export const api = {
}
});
},
+ likeCourse: (courseId) => {
+ return api.post(`/api/v1/courses/${courseId}/like`, {
+ headers: {
+ 'Authorization': `Token ${window.LIL_STORE.accessToken}`,
+ }
+ });
+ },
loadLive: (courseId, accessToken) => {
return api.get(`/api/v1/live-lesson/${courseId}/`, {
headers: {
diff --git a/web/src/js/modules/content.js b/web/src/js/modules/content.js
new file mode 100644
index 00000000..a9d25e3e
--- /dev/null
+++ b/web/src/js/modules/content.js
@@ -0,0 +1,52 @@
+import $ from 'jquery';
+import {loadScript} from '../utils';
+import {api} from '../modules/api';
+
+function getVideoPopup($videoEl){
+ const $container = $videoEl.parent();
+ const courseId = $videoEl.data('courseId');
+ let $popup = $container.children('.video-ended-popup');
+ if(! $popup[0]){
+ $popup = $('');
+ if(courseId){
+ $popup.addClass('video-ended-popup_black');
+ /*
+ $popup.find('.video-ended-popup__like-btn').click(() => {
+ api.likeCourse(courseId).then(() => {
+ $popup.addClass('video-ended-popup_black');
+ });
+ });*/
+ }
+
+ $container.append($popup);
+ }
+ return $popup;
+}
+
+$(document).ready(function () {
+ $('.js-video').each(function (){
+ const $iframe = $(this);
+ if($iframe.data('isYoutube')){
+
+ }
+ if($iframe.data('isVimeo')){
+ loadScript('https://player.vimeo.com/api/player.js').then(() => {
+ const player = new Vimeo.Player(this);
+ player.on('pause', function(data) {
+ if(data.percent == 1){
+ getVideoPopup($iframe).show().animate({opacity: 1}, 200);
+ if (document.fullscreenElement){
+ document.exitFullscreen();
+ }
+ }
+ });
+ player.on('play', function() {
+ const $p = getVideoPopup($iframe);
+ if($p.is(':visible')){
+ $p.animate({opacity: 0}, 800).then(() => {$p.hide();});
+ }
+ });
+ });
+ }
+ });
+});
diff --git a/web/src/js/pages/course.js b/web/src/js/pages/course.js
new file mode 100644
index 00000000..525f893c
--- /dev/null
+++ b/web/src/js/pages/course.js
@@ -0,0 +1 @@
+import "../modules/content";
diff --git a/web/src/js/pages/live-lesson.js b/web/src/js/pages/live-lesson.js
new file mode 100644
index 00000000..525f893c
--- /dev/null
+++ b/web/src/js/pages/live-lesson.js
@@ -0,0 +1 @@
+import "../modules/content";
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index 9d822ef3..d50245f0 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -1,14 +1,28 @@
-export const rupluralize = (value, args, addValue=true) => {
- let digit = Math.trunc(value) + '';
- digit = digit[digit.length - 1];
- return (addValue ? value + ' ' : '') +
- args[(+value > 10 && +value < 20)
- ? 2
- : (digit == '1' ? 0 : ('234'.search(digit) > -1 ? 1 : 2))];
-}
+export const rupluralize = (value, args, addValue = true) => {
+ let digit = Math.trunc(value) + '';
+ digit = digit[digit.length - 1];
+ return (addValue ? value + ' ' : '') +
+ args[(+value > 10 && +value < 20)
+ ? 2
+ : (digit == '1' ? 0 : ('234'.search(digit) > -1 ? 1 : 2))];
+};
export const loadScript = (url, onload) => {
- const tag = document.createElement('script');
- tag.url = url;
- document.getElementsByTagName('body');
-}
+ return new Promise(resolve => {
+ for (let script of document.getElementsByTagName('script')) {
+ if (script.src == url) {
+ onload && onload();
+ resolve();
+ return;
+ }
+ }
+ const script = document.createElement('script');
+ script.async = true;
+ document.body.appendChild(script);
+ script.onload = function () {
+ onload && onload.apply(this, arguments);
+ resolve.apply(this, arguments);
+ };
+ script.src = url;
+ });
+};
diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass
index 565b7e83..458409ce 100755
--- a/web/src/sass/_common.sass
+++ b/web/src/sass/_common.sass
@@ -4358,11 +4358,13 @@ a
&.pic
position: relative
width: 100%
+ &__video
+ position: relative
&__video iframe
- height: 360px;
- width: 640px;
- max-width: 100%;
- max-height: 60%;
+ height: 360px
+ width: 640px
+ max-width: 100%
+ max-height: 60%
@media only screen and (max-width: 639px)
.content-block__video iframe
@@ -4771,3 +4773,60 @@ a
&__text
margin: 40px 0
+
+.video-ended-popup
+ display: none
+ position: absolute
+ top: 90px
+ height: 200px
+ background: url(../img/video-ended-popup-ref.jpg) no-repeat center white
+ left: 50%
+ width: 600px
+ margin-left: -300px
+ border-radius: 5px
+ padding: 30px
+ box-shadow: 0 2px 20px rgba(0,0,0,0.10)
+ opacity: 0
+
+ +t
+ left: 60px
+ right: 60px
+ width: auto
+ background-color: #151a1e
+
+ +m
+ width: 100%
+ left: 0
+ top: 0
+ height: 153px
+ background-position: center bottom
+ background-size: auto 130px
+ border-radius: 0
+ background-color: #151a1e
+
+ &_like
+ background-image: url(../img/video-ended-popup-like.jpg)
+
+ &_black
+ background: url(../img/video-ended-popup-logo.png) no-repeat center #141a1d
+
+ &__like-btn
+ background: url(../img/heart.png) no-repeat center
+ position: absolute
+ top: 90px
+ display: none
+ width: 91px
+ height: 52px
+ cursor: pointer
+ left: 50%
+ margin-left: -45px
+
+ +m
+ background-size: contain
+ width: 54px
+ margin-left: -27px
+ bottom: 27px
+ top: auto
+
+ &_like &__like-btn
+ display: block
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 7e3590a3..498b4e3a 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -9,10 +9,12 @@ const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
module.exports = {
entry: {
app: "./src/js/app.js",
+ course: "./src/js/pages/course.js",
courseEdit: "./src/js/pages/course-edit.js",
contest: "./src/js/pages/contest.js",
contestEdit: "./src/js/pages/contest-edit.js",
profile: "./src/js/pages/profile.js",
+ liveLesson: "./src/js/pages/live-lesson.js",
userGalleryEdit: "./src/js/pages/user-gallery-edit.js",
mixpanel: "./src/js/third_party/mixpanel-2-latest.js",
sprite: glob('./src/icons/*.svg'),