LIL-714 Ссылка на видео и захват почты на главной

7 years ago · bd9612f172
parent 9f68c950ec
commit bd9612f172
7 changed files with 113 additions and 68 deletions
--- a/api/v1/serializers/config.py
+++ b/api/v1/serializers/config.py
@ -25,6 +25,7 @@ class ConfigSerializer(serializers.ModelSerializer):
    REFERRER_BONUS = serializers.IntegerField()
    REFERRAL_BONUS = serializers.IntegerField()
    MAIN_PAGE_VIDEO_URL = serializers.CharField(required=False)
+    MAIN_PAGE_VIDEO_PREVIEW_IMG = serializers.SerializerMethodField()

    class Meta:
        model = Config
@ -47,6 +48,7 @@ class ConfigSerializer(serializers.ModelSerializer):
            'REFERRER_BONUS',
            'REFERRAL_BONUS',
            'MAIN_PAGE_VIDEO_URL',
+            'MAIN_PAGE_VIDEO_PREVIEW_IMG',
        )

    def get_SCHOOL_LOGO_IMAGE(self, config):
@ -68,3 +70,13 @@ class ConfigSerializer(serializers.ModelSerializer):
            return MAIN_PAGE_TOP_IMAGE_url
        else:
            return None
+
+    def get_MAIN_PAGE_VIDEO_PREVIEW_IMG(self, config):
+        request = self.context.get('request')
+        http_host = request.META.get('HTTP_ORIGIN')
+        if http_host and config.MAIN_PAGE_VIDEO_PREVIEW_IMG:
+            domain = urlparse(http_host).netloc.split(':')[0]
+            MAIN_PAGE_VIDEO_PREVIEW_IMG_url = 'http://' + domain + config.MAIN_PAGE_VIDEO_PREVIEW_IMG.url
+            return MAIN_PAGE_VIDEO_PREVIEW_IMG_url
+        else:
+            return None
--- a/apps/config/migrations/0013_config_main_page_video_preview_img.py
+++ b/apps/config/migrations/0013_config_main_page_video_preview_img.py
@ -0,0 +1,18 @@
+# Generated by Django 2.0.7 on 2018-12-13 15:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('config', '0012_auto_20181210_1729'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='config',
+            name='MAIN_PAGE_VIDEO_PREVIEW_IMG',
+            field=models.ImageField(blank=True, null=True, upload_to=''),
+        ),
+    ]
--- a/apps/config/models.py
+++ b/apps/config/models.py
@ -22,6 +22,7 @@ class Config(models.Model):
    REFERRER_BONUS = models.IntegerField(default=10)
    REFERRAL_BONUS = models.IntegerField(default=10)
    MAIN_PAGE_VIDEO_URL = models.URLField(max_length=126, default='https://www.youtube.com/embed/1w3amQGtQyc')
+    MAIN_PAGE_VIDEO_PREVIEW_IMG = models.ImageField(null=True, blank=True)

    def save(self, *args, **kwargs):
        self.pk = 1
@ -43,6 +44,8 @@ class Config(models.Model):
                'SERVICE_INSTAGRAM_URL': '',
                'SERVICE_TWITTER_URL': '',
                'SERVICE_FB_URL': '',
+                'SERVICE_VK_URL': '',
+                'SERVICE_OK_URL': '',
                'SERVICE_YOUTUBE_URL': '',
                'SERVICE_TELEGRAM_CHANNEL': '',
                'SERVICE_COMMISSION': '',
@ -52,5 +55,7 @@ class Config(models.Model):
                'MAIN_PAGE_TOP_IMAGE': '',
                'REFERRER_BONUS': '',
                'REFERRAL_BONUS': '',
+                'MAIN_PAGE_VIDEO_URL': '',
+                'MAIN_PAGE_VIDEO_PREVIEW_IMG': '',
            }
        return obj
--- a/project/templates/blocks/popup_capture_email.html
+++ b/project/templates/blocks/popup_capture_email.html
@ -19,6 +19,7 @@
                        <div class="capture-email__error field__error"></div>
                    </div>
                    <div style="text-align: center;">
+                        <div class="loading-loader" style="display: none;"></div>
                        <button type="submit" class="capture-email__btn btn btn_light" tabindex="3">Подтвердить</button>
                    </div>
                </form>
--- a/project/templates/blocks/video.html
+++ b/project/templates/blocks/video.html
@ -1,13 +1,10 @@
 <div class="section section_video">
  <div class="section__center center center_sm" style="text-align: center;">
-    <iframe class="main-video" style="display: inline-block;"
-      width="100%"
-      height="360"
-      src="{{ config.MAIN_PAGE_VIDEO_URL }}"
-      frameborder="0"
-      allow="autoplay; encrypted-media"
-      allowfullscreen
-    ></iframe>
+    <div class="title">Пробный урок</div>
+    <img class="main-video-preview" style="width: 640px; height: 360px;"
+         src="{{ config.MAIN_PAGE_VIDEO_PREVIEW_IMG.url }}"/>
+    <a href="#" class="btn js-video-modal btn_stroke-black" style="margin: 20px;"
+       data-video-url="{{ config.MAIN_PAGE_VIDEO_URL }}" data-trial-lesson="1">Смотреть бесплатно</a>
    <div>Много развивающих видео на&nbsp;нашем <a href="{{ config.SERVICE_YOUTUBE_URL }}">YouTube&nbsp;канале</a></div>
  </div>
 </div>
--- a/web/src/js/modules/popup.js
+++ b/web/src/js/modules/popup.js
@ -21,43 +21,48 @@ $(document).ready(function () {
        Cookies.remove(EMAIL_CAPTURED_COOKIE);
    }

-    $('.js-popup-capture-email .js-popup-close').on('click', function(e){
-        e.preventDefault();
-        hidePopup().then(() => {
-            popup = prevPopup;
-        });
-        $('.modal-video').remove();
-    });
-
-    const captureEmail = (callback) => {
-        prevPopup = popup;
-        popup = $('.js-popup-capture-email');
-        const $modalVideo = $('.modal-video');
-        const $email = popup.find('.capture-email__email');
-        const $error = popup.find('.capture-email__error');
-        $modalVideo.css('opacity', 0);
-        $email.val('');
-        $error.text('');
-        popup.css('z-index', 1000001);
-        showPopup();
-        popup.find('.capture-email__btn').unbind('click').click(e => {
-            e.preventDefault();
-            const email = $email.val();
-            if(! email){
-                $error.text('Пожалуйста, укажите почту');
-                return;
-            }
-            if(! emailValid(email)){
-                $error.text('Пожалуйста, укажите коректную почту');
-                return;
+    const captureEmail = show => {
+        return new Promise((resolve, reject) => {
+            prevPopup = popup;
+            popup = $('.js-popup-capture-email');
+            const $email = popup.find('.capture-email__email');
+            const $error = popup.find('.capture-email__error');
+            $email.val('');
+            $error.text('');
+            popup.css('z-index', 1000001);
+            if(show){
+                showPopup();
            }
-            api.captureEmail(email);
-            hidePopup().then(() => {
-                popup = prevPopup;
+            $('.js-popup-capture-email .js-popup-close').unbind('click').on('click', e => {
+                e.preventDefault();
+                hidePopup().then(() => {
+                    popup = prevPopup;
+                    reject();
+                });
+            });
+            popup.find('.capture-email__btn').unbind('click').click(e => {
+                e.preventDefault();
+                const email = $email.val();
+                if(! email){
+                    $error.text('Пожалуйста, укажите почту');
+                    return;
+                }
+                if(! emailValid(email)){
+                    $error.text('Пожалуйста, укажите коректную почту');
+                    return;
+                }
+                const $loader = popup.find('.loading-loader');
+                const $btn = popup.find('.capture-email__btn');
+                $loader.show();
+                $btn.prop('disabled', true);
+                api.captureEmail(email).then(resolve).catch(reject).finally(() => {
+                    $btn.prop('disabled', false);
+                    $loader.hide();
+                    hidePopup().then(() => {
+                        popup = prevPopup;
+                    });
+                });
            });
-            $modalVideo.css('opacity', 1);
-            Cookies.set(EMAIL_CAPTURED_COOKIE, 1);
-            callback();
        });
    };

@ -94,27 +99,42 @@ $(document).ready(function () {
        if(window.LIL_STORE.user.id || ! $(e.target).data('trialLesson') || Cookies.get(EMAIL_CAPTURED_COOKIE)){
            return;
        }
-        let stopVideo = () => {};
-        let playVideo = () => {};
        const channel = $(e.target).data('channel');
-        const $iframe = $('.modal-video-movie-wrap iframe');
        const player = e.detail.player;
        let timeout = null;
        const interval = 1000 * 10;// 60 * 2; // 2 min
-        if(channel == 'youtube'){
-            const pauseVideo = () => {
+        const pauseVideo = () => {
+            timeout = setTimeout(() => {
                clearTimeout(timeout);
-                if(! $('.modal-video').length){
+                const $modalVideo = $('.modal-video');
+                if(! $modalVideo.length){
                    return;
                }
-                player.pauseVideo();
-                captureEmail(() => {
-                    player.playVideo();
+                if(channel == 'youtube'){
+                    player.pauseVideo();
+                }
+                else if(channel == 'vimeo'){
+                    player.pause();
+                }
+                $modalVideo.css('opacity', 0);
+                captureEmail(true).then(() => {
+                    $modalVideo.css('opacity', 1);
+                    Cookies.set(EMAIL_CAPTURED_COOKIE, 1);
+                    if(channel == 'youtube'){
+                        player.playVideo();
+                    }
+                    else if(channel == 'vimeo'){
+                        player.play();
+                    }
+                }).catch(() => {
+                    $('.modal-video').remove();
                });
-            }
+            }, interval);
+        }
+        if(channel == 'youtube'){
            window.onYTPlayerStateChange = (event) => {
                if(event.data == YT.PlayerState.PLAYING && ! timeout){
-                    timeout = setTimeout(pauseVideo, interval);
+                    pauseVideo();
                }
                if(event.data == YT.PlayerState.ENDED && timeout){
                    clearTimeout(timeout);
@ -123,19 +143,9 @@ $(document).ready(function () {
            player.addEventListener('onStateChange', 'onYTPlayerStateChange');
        }
        else if (channel == 'vimeo'){
-            const pauseVideo = () => {
-                clearTimeout(timeout);
-                if(! $('.modal-video').length){
-                    return;
-                }
-                player.pause();
-                captureEmail(() => {
-                    player.play();
-                });
-            }
            player.on('play', () => {
                if(! timeout){
-                    timeout = setTimeout(pauseVideo, interval);
+                    pauseVideo();
                }
            })
            player.on('ended', () => {
@ -156,7 +166,6 @@ $(document).ready(function () {
        e.stopPropagation();

        popup = $(data);
-        showPopup();

        if(data === '.js-popup-buy') {
            popup.data('date-start', $this.data('date-start') || '');
@ -260,6 +269,8 @@ $(document).ready(function () {
                window.location.href = `/gift-certificate/${code}/get`;
            });
        }
+
+        showPopup();
    });

    $('.js-popup-close').on('click', function(e){
--- a/web/src/sass/_common.sass
+++ b/web/src/sass/_common.sass
@ -2413,11 +2413,12 @@ a.grey-link
  &.visible &__wrap
    transform: scale(1)

-.main-video
-  margin-top: -140px
+.main-video-preview
  z-index: 10
  position: relative
  box-shadow: 0 10px 100px rgba(0,0,0,0.20)
+  width: 640px
+  height: 360px

 .head
  display: flex