dwweb-h5/2018专题/1806全景图专题-H5/js/scene3.js

import '../scss/index.scss'
import '../scss/page/scene1.scss'

import PhotoSphereViewer from 'photo-sphere-viewer'
import util from './until'
var attachFastClick = require('fastclick');

import Pic from '../img/P3-mini.jpg'
import location from '../img/location.png';
import glass from '../img/glass.png'; //望远镜
import eUrl from '../img/m/screen-tap-tips.png';

var viewer = null

var indexPath = $('body').attr('data-path')

// 进度相关
var progressNum = 0
var allStep = 5
var progressFlag = {
    'bear': false,
    'lynx': false,
    'road': false,
    'lookout': false,
    'fox': false
}

var mp4UrlMap = {

}

var huntV = {
    init() {
        this.initSnowView()
        this.handleNav()
        this.getVideoSource()
        util.handleReady(2654, 1050, viewer, 0, 0.008)
    },
    initSnowView() {
        viewer = new PhotoSphereViewer({
            container: 'photosphere',
            // panorama: 'http://hdzt.duowan.com/s/1806hunter/moblie/P3.jpg',
            panorama: Pic,
            min_fov: 50,
            max_fov: 70,
            navbar: false,
            time_anim: false,
            move_speed: 1.7, //m
            anim_speed: '1rpm',
            markers: [
                // 野牛
                {
                    id: 'beer-polygon',
                    polygon_px: [
                        [2626, 950], [2626, 1068], [2807, 1068],[2807, 950]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-beer',
                    x: 2725,
                    y: 990,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 野猪
                {
                    id: 'lynx-polygon',
                    polygon_px: [
                        [1376, 1082], [1376, 1168], [1474, 1168],[1474, 1082]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-lynx',
                    x: 1422,
                    y: 1122,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 狐狸
                {
                    id: 'fox-polygon',
                    polygon_px: [
                        [3456, 950], [3456, 1088], [3592, 1088],[3592, 950]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-fox',
                    x: 3530,
                    y: 1010,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 望远镜
                {
                    id: 'glass',
                    x: 202,
                    y: 610,
                    image: glass,
                    width: 56,
                    height: 59,
                    anchor: 'bottom center',
                },
                // 铁路
                {
                    id: 'location-road',
                    x: 2250,
                    y: 1120,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
            ]
        })
    },
    getVideoSource() {
        let vids = ['8896623','8896631','8896635','8896637','8896639','8896535','8896617', '8897763']
        var videoEls = {
            '8896623': 'lookup',
            '8896631': 'hunt',
            '8896635': 'book-lake',
            '8896637': 'book-taiga',
            '8896639': 'book-elden',
            '8896535': 'picVideo',
            '8896617': 'huntVideo',
            '8897763': 'huntVideoB'
        }
        
        $.ajax({
            type: "GET",
            dataType: "json",
            url: `//video.duowan.com/jsapi/playPageVideoInfo/?vids=${vids.join(',')}`,
            success: function(data) {
                for(var i in data) {
                    let resouce = util.deCodeArg(data[i].c).all,
                        source = resouce.yuanhua || resouce[1300] || resouce[1000] || resouce[350]
                    let name = videoEls[i] 
                    mp4UrlMap[name] = source.src
                }
                
                document.getElementById('hunt-video').src = mp4UrlMap['huntVideo']
                document.getElementById('hunt-video-b').src = mp4UrlMap['huntVideoB']

                document.getElementById('book-lake-video').src = mp4UrlMap['book-lake']
                document.getElementById('book-taiga-video').src = mp4UrlMap['book-taiga']
                document.getElementById('book-elden-video').src = mp4UrlMap['book-elden']

                huntC.lookoutClick()
                huntC.playVideo()
            }
        })
    },
    // 导航权限处理
    handleNav() {
        // 初始化加载时
        let permision = localStorage.getItem('hunter_permision')
        if(permision < 3) {
            window.location.href = indexPath
        }
        if(permision == 4) {
            progressFlag = {
                'bear': true,
                'lynx': true,
                'road': true,
                'lookout': true,
                'fox': true
            }
            $('#cur-progress').html(5)
        }
    }
}

var huntC = {
    init() {
        this.modalShow()
        util.bookClick()
        util.toolbarClick()
        util.shooting()
    },
    modalShow() {
        // 点击显示介绍弹窗
        $('.nav').find('.current').click(function() {
            $('#hunter-suggest-modal').fadeIn()
        })
        // 黑熊
        function beerModal() {
            if($('#hunter-beer-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#hunter-beer-modal').fadeIn()
                viewer.animate({
                    x: 2725,
                    y: 990
                },600);
            }
            if(!progressFlag['bear']){
                progressFlag['bear'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? localStorage.setItem('hunter_permision', '4') : ''
                progressNum == allStep ? $('.complete-modal').fadeIn() : ''
            }
        }
        $(document).on('click', '#psv-marker-beer-polygon', function() {
            beerModal()
        })
        $(document).on('click', '#psv-marker-location-beer', function() {
            beerModal()
        })

        // lynx
        function lynxModal() {
            if($('#hunter-lynx-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#hunter-lynx-modal').fadeIn()
                viewer.animate({
                    x: 1422,
                    y: 1122
                },600);
            }
            if(!progressFlag['lynx']){
                progressFlag['lynx'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? localStorage.setItem('hunter_permision', '4') : ''
                progressNum == allStep ? $('.complete-modal').fadeIn() : ''
            }
        }
        $(document).on('click', '#psv-marker-lynx-polygon', function() {
            lynxModal()
        })
        $(document).on('click', '#psv-marker-location-lynx', function() {
            lynxModal()
        })

        // fox
        function foxModal() {
            if($('#hunter-fox-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#hunter-fox-modal').fadeIn()
                viewer.animate({
                    x: 3530,
                    y: 1010
                },600);
            }
            if(!progressFlag['fox']){
                progressFlag['fox'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? localStorage.setItem('hunter_permision', '4') : ''
                progressNum == allStep ? $('.complete-modal').fadeIn() : ''
            }
        }
        $(document).on('click', '#psv-marker-fox-polygon', function() {
            foxModal()
        })
        $(document).on('click', '#psv-marker-location-fox', function() {
            foxModal()
        })

        $(document).on('click', '#psv-marker-location-road', function() {
            if(!$('#p3-road-pic')[0]){
                var roadHtml =  ` <div class="mod-full-picture" id="p3-road-pic" style="display:none">
                                    <div class="bg-move"></div>
                                    <div class="pub-btn go-back">返回</div>
                                    <div class="eyes-btn" id="open-eyes-modal"></div>
                                    <div class="full-pic-modal small-modal">
                                        <div class="top-bar">
                                            北欧森林
                                        </div>
                                        <div class="container clearfix">
                                            <p>虽然北欧人最喜欢到地中海度假，享受这里的阳光和沙滩。不过南欧的地中海人也是很羡慕北欧的人口稀少，森林密布的环境，那些难忘的原始森林，河流，湖泊，小动物等等。</p>
                                            <p>米兰·昆德拉说,生活在别处。倘若有一处,萃集了生活的美好,又何必另觅他乡? 冰岛的极光,瑞典的冰雪,目眩神驰的北欧风光里,最让人向往的还是森林里一口深呼吸带来的焕然一新。在这个世界上,还有什么比生命的健康活力更重。</p>
                                            <div class="eyes-btn" id="screen-open-video"></div>
                                        </div>
                                    </div>
                                    <div class="fullscreen-video fullscreen-video-picture" style="display: none">
                                        <video x5-playsinline="" webkit-playsinline playsinline controls id="picture-video" preload="metadata" width="100%">
                                            <source src="${mp4UrlMap['picVideo']}">
                                        </video>
                                    </div>
                                </div>`
                $('body').append(roadHtml)
            }
            util.acceler()
            $('#p3-road-pic').fadeIn()
            if(!progressFlag['road']){
                progressFlag['road'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? localStorage.setItem('hunter_permision', '4') : ''
            }
        })

        //moblie 
        $(document).on('click', '#open-eyes-modal', function() {
            var showFlag = $('.full-pic-modal').css('display') == 'none' ? false : true
            showFlag ? $('.full-pic-modal').fadeOut() : $('.full-pic-modal').fadeIn()
        })

        $(document).on('click', '#screen-open-video', function() {
            $('.fullscreen-video-picture').show()
            var video = document.getElementById('picture-video')
            video.play()
            video.addEventListener("ended",function(){
                video.load()
                $('.fullscreen-video-picture').hide()
            })
            return false
        })

        // 完成任务提示弹窗
        $(document).on('click', '.go-back', function() {
            progressNum == allStep ? $('.complete-modal').fadeIn() : ''
        })

        $('.complete-success-btn').click(function() {
            $('.complete-modal').remove()
            $('.book-icon').trigger('click')
        })
    },
    playVideo() {
        $('#hunter-video-play').click(function() {
            if(!$('#hunter-video-suggest')[0]){
                var hunterVideoHtml = `<div class="video-wrapper pub-modal-mask" id="hunter-video-suggest">
                                        <div class="part-screen">
                                            <video x5-playsinline="" webkit-playsinline playsinline controls autoplay id="hunter-video">
                                                <source src="${mp4UrlMap['hunt']}">
                                            </video>
                                        </div>
                                    </div>`
                $('body').append(hunterVideoHtml)
            } else {
                $('#hunter-video-suggest').show()
            }
            return false
        })
    },
    // 瞭望台
    lookoutClick() {
        var videoHtml = `<div class="fullscreen-video fullscreen-video-lookout">
                            <video x5-playsinline="" webkit-playsinline playsinline id="lookout-video" controls autoplay width="100%">
                                <source src="${mp4UrlMap['lookup']}">
                            </video>
                        </div>` 
        $(document).on('click', '#psv-marker-glass', function() {
            if(!$('#lookout-hunt-pic')[0]){
                var lookOutHtml =  ` <div class="mod-full-picture" id="lookout-hunt-pic" style="display:none">
                                        <div class="pub-btn go-back">返回</div>
                                        <img class="e-tips" src="${eUrl}" alt="">
                                    </div>`
                $('body').append(lookOutHtml)
            }
            $('#lookout-hunt-pic').fadeIn()

            if(!progressFlag['lookout']){
                progressFlag['lookout'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? localStorage.setItem('hunter_permision', '4') : ''
            }
        })
        
        // 轻触屏幕
        $(document).on('click', '#lookout-hunt-pic', function(e) {
            var lookVideo = document.getElementById('lookout-video')

            if(lookVideo) {
                    $('#lookout-hunt-pic').find('.fullscreen-video').fadeIn()
                    lookVideo.play()
            } else{
                $('#lookout-hunt-pic').append(videoHtml)
                lookVideo = document.getElementById('lookout-video')
                lookVideo.play()
            }

            lookVideo.addEventListener("ended",function(){
                lookVideo.load()
                lookVideo.pause()
                $('.fullscreen-video-lookout').hide()
                $('#lookout-hunt-pic').hide()
            })
        })
    },
}


function screenInit() {
    // 竖屏
    if(window.orientation==180||window.orientation==0){
        $('.across-modal').show()
    }
    // 横屏
    if(window.orientation==90||window.orientation==-90){
        $('.across-modal').hide()
        if(viewer) return
        let entry = localStorage.getItem('entry')
        if(entry == 'index') {
            util.handleModel()
            huntV.init()
            huntC.init()
        } else {
            window.location.href = indexPath
        }
    }
}
screenInit()
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", screenInit, false);

$(function() {
    attachFastClick(document.body);
});