dwweb-h5/2018专题/1806全景图专题-H5/js/scene2.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/P2-mini.jpg'
import location from '../img/location.png';
import glass from '../img/glass.png'; //望远镜
import eUrl from '../img/m/screen-tap-tips.png';
import snowCircle from '../img/snow.png';

var viewer = null

var timer = null

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

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

var mp4UrlMap = {

}

var snowV = {
    init() {
        this.initSnowView()
        this.handleNav()
        this.getVideoSource()
        util.handleReady(1870, 1050, viewer)
        this.snow()
    },
    initSnowView() {
        viewer = new PhotoSphereViewer({
            container: 'photosphere',
            // panorama: 'http://hdzt.duowan.com/s/1806hunter/moblie/P2.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: [
                        [2003, 905], [2003, 1115], [2272, 1115],[2272, 905]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-beer',
                    x: 2120,
                    y: 956,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // lynx
                {
                    id: 'lynx-polygon',
                    polygon_px: [
                        [380, 1080], [380, 1150], [476, 1150],[476, 1080]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-lynx',
                    x: 422,
                    y: 1100,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 大鸟
                {
                    id: 'bird-polygon',
                    polygon_px: [
                        [3220, 704], [3220, 770], [3296, 770],[3296, 704]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-bird',
                    x: 3258,
                    y: 740,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 望远镜
                {
                    id: 'glass',
                    x: 3408,
                    y: 864,
                    image: glass,
                    width: 56,
                    height: 59,
                    anchor: 'bottom center',
                },
                // 铁路
                {
                    id: 'location-road',
                    x: 924,
                    y: 1024,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
            ]
        })
    },
    // 雪花动画
    snow() {
        //1、定义一片雪花模板
        var flake = $("<img class='snow-circle' src=" + snowCircle + ">").css({
            "position": "absolute"
        })

        //获取页面的宽度，利用这个数来算出，雪花开始时left的值
        var documentWidth = $(document).width();

        //获取页面的高度 相当于雪花下落结束时Y轴的位置
        var documentHieght = $(document).height();

        //定义生成一片雪花的毫秒数
        var millisec = 500;
        //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
        timer = setInterval(function() {
            //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
            var startLeft = Math.random() * documentWidth;

            //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
            var endLeft = Math.random() * documentWidth;

            //随机生成雪花下落持续时间
            var durationTime = 4000 + 7000 * Math.random();

            //随机生成雪花下落 开始 时的透明度
            var startOpacity = 0.7 + 0.3 * Math.random();

            //随机生成雪花下落 结束 时的透明度
            var endOpacity = 0.2 + 0.2 * Math.random();

            //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中
            flake.clone().appendTo($("body")).css({
                "left": startLeft,
                "opacity": startOpacity,
                "top": "-25px",
            }).animate({ //执行动画
                "left": endLeft,
                "opacity": endOpacity,
                "top": documentHieght
            }, durationTime, function() {
                //4、当雪花落下后，删除雪花。
                $(this).remove(); 
            });
        }, millisec);
    },
    clearTime() {
        clearInterval(timer)
    },
    getVideoSource() {
        let vids = ['8896621','8896629','8896635','8896637','8896639','8892917','8896615','8897761']
        var videoEls = {
            '8896621': 'lookup',
            '8896629': 'snow',
            '8896635': 'book-lake',
            '8896637': 'book-taiga',
            '8896639': 'book-elden',
            '8892917': 'picVideo',
            '8896615': 'huntVideo',
            '8897761': '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']

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

var snowC = {
    init() {
        this.modalShow()
        util.bookClick()
        util.toolbarClick()
        util.shooting()

        // 关闭雪花
        $('.snow-icon').click(function() {
            var $this = $(this)
            if($this.hasClass('close')){
                snowV.snow()
                $this.removeClass('close')
            } else{
                snowV.clearTime()
                $this.addClass('close')
            }
        })
    },
    modalShow() {
        // 点击显示介绍弹窗
        $('.nav').find('.current').click(function() {
            $('#snow-suggest-modal').fadeIn()
        })
        // 黑熊
        function beerModal() {
            if($('#snow-beer-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#snow-beer-modal').fadeIn()
                viewer.animate({
                    longitude: 0,
                    latitude: 0.1
                },600);
            }
            if(!progressFlag['bear']){
                progressFlag['bear'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? $('#scene-nav3').removeClass('disable') : ''
                progressNum == allStep ? localStorage.setItem('hunter_permision', '3') : ''
            }
        }
        $(document).on('click', '#psv-marker-beer-polygon', function() {
            beerModal()
        })
        $(document).on('click', '#psv-marker-location-beer', function() {
            beerModal()
        })

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

        // 大鸟
        function birdModal() {
            if($('#snow-bird-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#snow-bird-modal').fadeIn()
                viewer.animate({
                    x: 3258,
                    y: 740
                },600);
            }
            if(!progressFlag['bird']){
                progressFlag['bird'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? $('#scene-nav3').removeClass('disable') : ''
                progressNum == allStep ? localStorage.setItem('hunter_permision', '3') : ''
            }
        }
        $(document).on('click', '#psv-marker-bird-polygon', function() {
            birdModal()
        })
        $(document).on('click', '#psv-marker-location-bird', function() {
            birdModal()
        })

         $(document).on('click', '#psv-marker-location-road', function() {
            if(!$('#road-pic')[0]){
                var roadHtml =  ` <div class="mod-full-picture" id="road-pic" style="display:none">
                                    <div class="bg-move"></div>
                                    <div class="eyes-btn" id="open-eyes-modal"></div>
                                    <div class="pub-btn go-back">返回</div>
                                    <div class="full-pic-modal small-modal">
                                        <div class="top-bar">
                                            西伯利亚铁路
                                        </div>
                                        <div class="container clearfix">
                                        <p>西伯利亚铁路，总长9288公里，从莫斯科到符拉迪沃斯托克跨越8个时区，是世界上最长最壮观的铁路线之一。该铁路修建于1891年到1916年，起点是莫斯科，途中穿过辽阔的松树林、跨过了乌拉尔山脉、穿越了西伯利亚冻土带，最终抵达太平洋。苏联政府为这条世界上最长的铁路投入了大量补贴。全程票价12000卢布，约合465美元。该铁路的修建，不仅让原本荒无人烟的西伯利亚地区逐渐繁荣起来，也给俄罗斯带来巨大的经济效益，成为该国陆地运输的主要通道。至今，由于该路票价提高，能负担这么长行程的火车票的俄罗斯人已经不多了。</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">
                                            <source src="${mp4UrlMap['picVideo']}">
                                        </video>
                                    </div>
                                </div>`
                $('body').append(roadHtml)
            }
            util.acceler()
            $('#road-pic').fadeIn()
            if(!progressFlag['road']){
                progressFlag['road'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? $('#scene-nav3').removeClass('disable') : ''
                progressNum == allStep ? localStorage.setItem('hunter_permision', '3') : ''
            }
        })

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

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

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

            lookVideo.addEventListener("ended",function(){
                lookVideo.load()
                lookVideo.pause()
                $('.fullscreen-video-lookout').hide()
                $('#lookout-snow-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()
            snowV.init()
            snowC.init()
        } else {
            window.location.href = indexPath
        }
    }
}
screenInit()
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", screenInit, false);

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