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

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

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

import imgUrl from '../img/P1-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 progressFlag = {
    'foot': false,
    'deer': false,
    'rabbit': false,
    'lake': false,
    'lookout': false
}


var videoMap = {
    'lookup': '8884585',
    'lake': '8887637',
    'aim': '8887375',
    'shoot': '8887379',
    'open': '8887381'
}

var mp4UrlMap = {

}

var lakeV = {
    init() {
        this.initLakeView()
        this.handleNav()
        this.getVideoSource()
        util.handleReady(1870, 1050, viewer)
    },
    initLakeView() {
        viewer = new PhotoSphereViewer({
            container: 'photosphere',
            // panorama: 'http://hdzt.duowan.com/s/1806hunter/moblie/P1.jpg',
            panorama: imgUrl,
            min_fov: 50,
            max_fov: 70,
            navbar: false,
            time_anim: false,
            move_speed: 1.7, //m
            anim_speed: '1rpm',
            markers: [
                // 多边形
                {
                    id: 'deer-polygon',
                    polygon_px: [
                      [1960, 836], [1960, 1048], [2190, 1048],[2190, 836]
                    ],
                    svgStyle: {
                      fill: 'rgba(0, 0, 0, 0)',
                    }
                },
                {
                    id: 'location-deer',
                    x: 2060,
                    y: 912,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 脚印
                {
                    id: 'foot-polygon',
                    polygon_px: [
                      [66, 1128], [66, 1276], [260, 1276],[260, 1128]
                    ],
                    svgStyle: {
                      fill: 'rgba(255, 255, 255, 0)'
                    }
                  },
                  {
                    id: 'location-foot',
                    x: 170,
                    y: 1218,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 兔子
                {
                    id: 'rabit-polygon',
                    polygon_px: [
                      [1082, 962], [1082, 1027], [1148, 1028],[1148, 962]
                    ],
                    svgStyle: {
                      fill: 'rgba(255, 255, 255, 0)'
                    }
                  },
                  {
                    id: 'location-rabit',
                    x: 1118,
                    y: 996,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                //望远镜
                {
                    id: 'glass',
                    x: 1961,
                    y: 778,
                    image: glass,
                    width: 56,
                    height: 59,
                    anchor: 'bottom center',
                },
                // 湖
                {
                    id: 'location-lake',
                    x: 80,
                    y: 1055,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
              ],
        })
    },
    getVideoSource() {
        let vids = ['8896619', '8896627','8896635','8896637','8896639','8897789','8896613','8897759']
        // let videoEls = ['lookup', 'lake', 'aim', 'shoot', 'open']
        var videoEls = {
            '8896619': 'lookup',
            '8896627': 'lake',
            '8896635': 'book-lake',
            '8896637': 'book-taiga',
            '8896639': 'book-elden',
            '8897789': 'picVideo',
            '8896613': 'huntVideo',
            '8897759': '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']

                lakeC.lookoutClick()
                lakeC.playVideo()
            }
        })
    },
    // 导航权限处理
    handleNav() {
        // 初始化加载时
        let permision = localStorage.getItem('hunter_permision')
        if(permision) {
            progressFlag = {
                'foot': true,
                'deer': true,
                'rabbit': true,
                'lake': true,
                'lookout': true
            }
            $('#cur-progress').html(5)
            if(permision == 2) {
                $('#scene-nav2').removeClass('disable')
            } else if(permision == 3 || permision == 4){
                $('#scene-nav2').removeClass('disable')
                $('#scene-nav3').removeClass('disable')
            }
        }
    }
}

var lakeC = {
    init() {
        this.modalShow()
        util.shooting()
        util.bookClick()
        util.toolbarClick()
    },
    modalShow() {
        // 点击显示介绍弹窗
        $('.nav').find('.current').click(function() {
            $('#lake-suggest-modal').fadeIn()
        })
        // 脚印
        function footModal() {
            if($('#lake-foot-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#lake-foot-modal').fadeIn()
                viewer.animate({
                    longitude: 3.2,
                    latitude: -0.27
                },600);
            }
            if(!progressFlag['foot']){
                progressFlag['foot'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == 5 ? $('#scene-nav2').removeClass('disable') : ''
                progressNum == 5 ? localStorage.setItem('hunter_permision', '2') : ''
            }
        }
        $(document).on('click', '#psv-marker-foot-polygon', function() {
            footModal()
        })
        $(document).on('click', '#psv-marker-location-foot', function() {
            footModal()
        })
        // 鹿
        function deerModal() {
            if($('#lake-deer-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#lake-deer-modal').fadeIn()
                viewer.animate({
                    longitude: 0.1,
                    latitude: -0.05
                },600);
            }
            if(!progressFlag['deer']){
                progressFlag['deer'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == 5 ? $('#scene-nav2').removeClass('disable') : ''
                progressNum == 5 ? localStorage.setItem('hunter_permision', '2') : ''
            }
        }
        $(document).on('click', '#psv-marker-deer-polygon', function(e) {
            deerModal()
        })
        $(document).on('click', '#psv-marker-location-deer', function() {
            deerModal()
        })

        // 野兔
        function rabitModal() {
            if($('#lake-rabbit-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#lake-rabbit-modal').fadeIn()
                viewer.animate({
                    longitude: 4.87,
                    latitude: -0.07
                },600);
            }
            if(!progressFlag['rabbit']){
                progressFlag['rabbit'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == 5 ? $('#scene-nav2').removeClass('disable') : ''
                progressNum == 5 ? localStorage.setItem('hunter_permision', '2') : ''
            }
        }
        $(document).on('click', '#psv-marker-rabit-polygon', function(e) {
            rabitModal()
        })
        $(document).on('click', '#psv-marker-location-rabit', function() {
            rabitModal()
        })

        //湖
        $(document).on('click', '#psv-marker-location-lake', function() {
            if(!$('#lake-pic')[0]){
                var lakeHtml =  ` <div class="mod-full-picture" id="lake-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>地球上湖泊总面积为270万平方公里，占陆地面积的1.8%，面积大于5000平方公里的湖</p>
                                        <p>青海湖泊有35个。芬兰的湖泊最多，被称为“万湖之国”，拥有大小湖泊6万多个。</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="true" playsinline="true" controls id="picture-video" preload="metadata">
                                            <source src="${mp4UrlMap['picVideo']}">
                                        </video>
                                    </div>
                                </div>`
                $('body').append(lakeHtml)
            }
            util.acceler()
            $('#lake-pic').fadeIn()
            if(!progressFlag['lake']){
                progressFlag['lake'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == 5 ? $('#scene-nav2').removeClass('disable') : ''
                progressNum == 5 ? localStorage.setItem('hunter_permision', '2') : ''
            }
        })

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

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

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

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

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