https://gazoo.com/U-Car/resource/js/player/cri_liveact_framework_custom.js?v=20200511

1/****************************************************************************
2 *
3 * LiveAct(R) PRO
4 * Framework Customize
5 *
6 * (c) 2016 CRI Middleware Co., Ltd.
7 * Version : 1.67.545.1.1
8 *
9 ****************************************************************************/
10"use strict";
11// frameworkの読み込み確認コード
12if(typeof(CriLaFw) === "undefined" || !CriLaFw.isScriptLoaded){
13    console.log("LiveAct Warning : cri_liveact_framework.js is not loaded");
14}
15
16// 360度動画において、下記機能をONにするフラグです。
17// [拡大 / 縮小]
18//   PC : マウスホイール
19//   スマートフォン : 指2本ピンチアウト / イン
20// [移動]
21//   PC : SHIFT + マウスドラッグ
22//   スマートフォン : 指2本フリック
23//
24// スクロール時に邪魔になる場合は下記1行をコメントアウトしてください。
25CriLaFw.swipeZoom = true;
26
27CriLaFw.memoryReduction = true;
28
29// スクロールイン自動再生機能で、再生開始／停止位置を調整する設定です。
30// CriLaFw.setScrollInViewMargin(head_margin, tail_margin);
31// head_margin: 再生開始位置, tail_margin: 再生終了位置（順方向スクロールの場合）
32// 要素の縦幅との割合を指定します。単位はパーセントです。
33//   0: 要素が少しでも画面に表示されていれば再生
34//  50: 要素が半分画面に表示されていれば再生（デフォルト：Facebook iOSアプリと同等）
35// 100: 要素の全体が画面に表示されていれば再生
36// それ以上: より画面中央までスクロールする必要があります
37// 負の値: より画面外にあっても再生されます
38CriLaFw.setScrollInViewMargin(50, 50);
39
40// スワイプ動画のみに対応している、スワイプ時にページスクロールが発生しないようにする変数
41// タブレット端末の横持ち、縦持ちで切り替えが必要になる。
42CriLaFw.preventScroll = false;
43
44
45// 大量の動画をページにおいても安定して再生する機能です
46// ビューポートと動画との距離を設定し、距離の範囲内に入った動画から読み込みます。
47// CriLaFw.setResourceLoadScrollInMargin(distance);

48// 読み込み開始のマージンを動画とビューポートの距離で指定します。単位はピクセルです。
49// 下記コメントを外すと有効になります。
50// CriLaFw.setResourceLoadScrollInMargin(100)
51// 読み込みを保持しておく動画の数を設定します。
52// CriLaFw.setLoadQueueSize(3)
53
54// GAへイベントを送信
55CriLaFw.sendAnalytics = function(player, event_action)
56{
57    // GAに再生イベントを送信するサンプル
58    if(typeof (gtag) == "function")
59    {
60        var scene_name = player.getCurrentSceneName();
61        gtag('event', event_action, {'event_category': 'LiveAct(R) PRO', 'event_label': scene_name, 'value':0, 'non_interaction': true });
62    }
63    // 旧版のGAにイベントを送信するサンプル
64    else if (typeof (ga) == "function") {
65        var scene_name = player.getCurrentSceneName();
66        ga('send', 'event', 'LiveAct(R) PRO', event_action, scene_name, 0, { 'nonInteraction': 1 });
67    }
68    else if (typeof (_gaq) == "object" && _gaq !== null) {
69        if(typeof (_gaq.push) == "function"){
70            var scene_name = player.getCurrentSceneName();
71            _gaq.push(['_trackEvent', 'LiveAct(R) PRO', event_action, scene_name, 0, true]);
72        }
73
74    }
75}
76
77// 再生開始のイベントを送付する関数
78CriLaFw.playCounted = function (player) {
79    setLuminanceFunc(player);
80    // 累計再生数の取得するサンプル
81    //var count = CriLaFw.getPlayCount();
82    CriLaFw.sendAnalytics(player, 'la-play');
83
84}
85
86// 動画の終端イベントを送付する関数
87CriLaFw.endCounted = function (player) {
88    CriLaFw.sendAnalytics(player, 'la-play-end');
89}
90// 
91CriLaFw.galleryDiv = null;
92CriLaFw.modalGalleryDiv = null;
93
94
95CriLaFw.isTablet = false;
96CriLaFw.isMobile = false;
97CriLaFw.isOpenModalWindow = false;
98
99// プレイヤーのセットアップを行います
100// デフォルトの動作に加えて、何か行いたいときに使用します
101CriLaFw.setupPlayer = function (player) {
102
103    var parent_div = CriLaFw.getParentDivByPlayer(player);
104    var movie_id = parent_div.getAttribute('data-movie-id');
105
106    var enlarge_button = new CriLaPlayerControlButton("lac-user-button1");
107    var enlarge_button_name = "enlargeButton";
108
109    function enlarge_button_func (){
110        CriLaFw.isOpenModalWindow = true;
111        open360Modal(movie_id);
112        
113        var is_sp = isSP();
114        var is_landscape = isLandscape();
115        if(is_sp && !is_landscape && !CriLaFw.isTablet && CriLaFw.isMobile) return;
116        
117        setModalControl();
118        window.resetModalPlayerList();
119        
120    };
121
122    // ボタンにイベントリスナを登録します。
123    enlarge_button.addEventListener("click", enlarge_button_func);
124
125    // ボタンをプレーヤに登録します。
126    player.addComponent(enlarge_button_name, enlarge_button);
127    
128};
129
130// ルミナンスアジャスト機能の追加
131function setLuminanceFunc(player)
132{
133    if(player instanceof CriLaPlayerWebGL && player.getLuminanceAdjustMode()) {
134        var luminance_button = new CriLaPlayerControlButton('lac-luminance');
135        var luminance_button_name = "luminanceButton";
136        var adjustSpeed = player.getLuminanceAdjustSpeed();
137        // 'auto'から'manual'時のアニメーション用の処理
138        function smoothManualChange(currentValue) {
139            clearTimeout(smoothManualChange);
140            if(currentValue < 0.99) {
141                currentValue += 0.01;
142            } else if(currentValue > 1.01) {
143                currentValue -= 0.01;
144            } else if (0.99 <= currentValue <= 1.01) {
145                player.setLuminanceAdjustExposureValue(1);
146                return;
147            }
148            setTimeout(function() {
149                player.setLuminanceAdjustExposureValue(currentValue);
150                smoothManualChange(currentValue);
151            }, adjustSpeed);
152        };
153        // ボタンを押したときの処理
154        function luminance_button_func (player, ev){
155            ev.preventDefault();
156            if((player.getLuminanceAdjustMode()) === 'auto') {
157                player.setLuminanceAdjustMode('manual');
158                var cur = player.getLuminanceAdjustExposureValue();
159                smoothManualChange(cur);
160                document.querySelector('.cri-liveact-player.active').classList.remove('-auto');
161            } else {
162                player.setLuminanceAdjustMode('auto');
163                document.querySelector('.cri-liveact-player.active').classList.add('-auto');
164            }
165        };
166        // ボタンにイベントリスナを登録します。
167        luminance_button.addEventListener("click", luminance_button_func.bind(this, player));
168        // ボタンをプレーヤに登録します。
169        player.addComponent(luminance_button_name, luminance_button);
170    }
171}
172
173// SPの判定
174function isSP()
175{
176  if(window.matchMedia("(max-width:768px)").matches)
177  {
178     return true;
179  }
180  return false;

181}
182
183// ランドスケープの判定
184function isLandscape()
185{
186  if(window.matchMedia("(orientation:landscape)").matches)
187  {
188    return true;
189  }
190
191  return false;
192
193}
194
195// 通常表示のUIを設定する。
196function setNormalControl()
197{
198   var num_player = CriLaFw.getNumPlayer();
199    for(var i = 0; i < num_player;i++)
200    {
201        var player = CriLaFw.getPlayerByIndex(i);
202        player.setControlStyle({"enlargeButton":true});
203        switchControlCalssName(player, false);
204    }
205
206    var gallery_div = getGalleryDiv();
207    requestAppendLiveActPlayer(gallery_div);
208}
209
210// モーダル表示のUIを設定する。
211function setModalControl()
212{
213    var num_player = CriLaFw.getNumPlayer();
214    for(var i = 0; i < num_player;i++)
215    {        
216        var player = CriLaFw.getPlayerByIndex(i);
217        player.setControlStyle({"enlargeButton":false});
218        switchControlCalssName(player, true);
219    }
220    
221    var modal_gallery_div = getModalGalleryDiv();
222    requestAppendLiveActPlayer(modal_gallery_div);
223}
224
225
226//---------------------------------------------
227// モーダル、非モーダルのCSSクラス名を切り替える
228//---------------------------------------------
229function switchControlCalssName(opt_player, to_modal)
230{
231    function getGyroDiv(element)
232    {
233        var ret = element.getElementsByClassName("lac-gyro-sensor__modal");
234        if(ret.length > 0) return ret[0];
235
236        ret = element.getElementsByClassName("lac-gyro-sensor");
237        if(ret.length > 0) return ret[0];
238        
239        return null;
240    }
241
242    function getMainContorolDiv(element)
243    {
244       var ret = element.getElementsByClassName("liveact-controls--swipe__modal");
245       if(ret.length > 0) return ret[0];
246
247       ret = element.getElementsByClassName("liveact-controls--swipe");
248       return ret[0];
249    }
250
251    var canvas = opt_player.getCanvas();
252    var parent_div = CriLaFw.getParentDivByPlayer(opt_player);
253    
254    var control_div = getMainContorolDiv(parent_div);
255    var gyro = getGyroDiv(control_div);
256    if(to_modal){
257        control_div.className = "liveact-controls__modal liveact-controls--swipe__modal";
258        if(gyro!= null){
259           gyro.style.right = "";
260           gyro.style.left = "10px";
261           gyro.style.top = "5px";
262        }
263     }
264     else{
265         control_div.className = "liveact-controls liveact-controls--swipe";
266         if(gyro!= null){
267            gyro.style.right = "60px";
268            gyro.style.left = "";
269            gyro.style.top = "";
270         }
271     }
272}
273
274// ZOOMボタンの表示、非表示を更新
275function updateZoomButton()
276{
277    var is_sp = isSP();
278    var num_player = CriLaFw.getNumPlayer();
279    for(var i = 0; i < num_player;i++)
280    {        
281        var player = CriLaFw.getPlayerByIndex(i);
282        player.setControlStyle({"zoom":!is_sp});
283    }
284}
285
286
287//---------------------------------------------------------------------
288// リサイズイベント
289// ZOOMボタンの表示非表示切り替えと

290// SPモーダル表示のとき、LiveActのアイコン表示を切り替える。
291//---------------------------------------------------------------------
292function criResizeWindow()
293{
294    // タブレットの検出
295    if(window._ua)
296    {
297            CriLaFw.isTablet = window._ua.Tablet;
298            CriLaFw.isMobile = window._ua.Mobile;
299    }
300
301    // 動画が読めていないときは、再度読み込む
302    var la_player = CriLaFw.getPlayerByIndex(0);
303    if(la_player == null)
304    {
305        setTimeout(criResizeWindow, 100);
306        return;
307    }
308    
309    // ZOOMボタンの表示更新
310    updateZoomButton();
311    
312    var is_open_modal_window = CriLaFw.isOpenModalWindow;
313    var is_landscape = isLandscape();
314    // モーダルかつスマートフォンの場合、横持ち、縦持ちでDOMの位置を変更する
315    if(is_open_modal_window && CriLaFw.isMobile && !CriLaFw.isTablet)
316    {
317        if(is_landscape)
318        {
319            setModalControl();
320            window.resetModalPlayerList();
321        }
322        else
323        {
324            setNormalControl();
325        }
326    }
327    
328    if(CriLaFw.isTablet)
329    {
330        if(is_landscape)CriLaFw.preventScroll=true;
331        else CriLaFw.preventScroll=false;
332    }
333    else if(!CriLaFw.isMobile)
334    {
335        CriLaFw.preventScroll=true;
336    } 
337    else 
338    {
339        CriLaFw.preventScroll=false;
340    }
341
342    
343}
344
345
346//-----------------------
347// プログレスバーを進める
348//-----------------------
349function loadingEvent()
350{
351    var loader = document.getElementById("gallery-loader");
352    var progress_bar = document.getElementById("gallery-loader-progress-bar");
353    if(loader == null){return;}
354    var progress_count = 0;
355    
356    // 進捗バーの終了処理
357    function finishProgress()
358    {
359        // 全天球静止画の再生処理
360        var num = CriLaFw.getNumPlayer();
361        for (var i = 0; i < num; ++i) {
362            var player = CriLaFw.getPlayerByIndex(i);
363            if (!(player instanceof CriLaPlayer)) {
364                player.play();
365            }
366        }
367        criResizeWindow();
368        loader.style.display = "none";
369    }
370    
371    // 進捗バーを実際に増やしている関数
372    function updateProgress()
373    {
374        // DOM最上部の動画を対象にする
375        var la_player = CriLaFw.getPlayerByIndex(0);
376        if(!la_player)
377        {
378            // 動画の読み込みがキックされていなければ、再度本関数を呼び出す。
379            setTimeout(updateProgress,400);
380            return;
381        }
382        
383        // 動画が再生できるか確認
384        if(la_player.canPlayCurrentScene())
385        {
386            // 再生できる場合は、進捗を100にして
387            // 表示を消す関数を時間差で呼び出す。
388            progress_bar.style.width = "100%";
389            setTimeout(finishProgress,200);
390            return;
391        }
392        
393        // 再生できない場合は、0.5%ずつ進める。
394        progress_bar.style.width = progress_count +"%";
395        progress_count+=0.5;
396        // 90以上にならないようにクランプ
397        if(progress_count > 90)progress_count=90;
398        
399        // 再度本関数を呼び出す
400        setTimeout(updateProgress,200);
401        
402    }
403    
404    updateProgress();
405
406}
407
408
409// isOpenModalWindowはLiveActのボタン経由でtrueになるため、getGalleryDiv,
410// getModalGalleryDivはnullにならない
411function requestAppendLiveActPlayer(dest_elem)
412{
413    var num_player = CriLaFw.getNumPlayer();
414    for(var i = 0; i < num_player;i++)
415    {
416        var parent_div = CriLaFw.getParentDivByIndex(i);
417        $(dest_elem).append(parent_div);
418        var p = CriLaFw.getPlayerByIndex(i);
419        if (p.resizeFromParentElement) p.resizeFromParentElement();
420    }
421    
422}
423
424
425// 通常表示でLiveActのDivタグを移す先を取得する
426function getGalleryDiv()
427{
428   if(CriLaFw.galleryDiv == null)
429   {
430     CriLaFw.galleryDiv = document.getElementById("gallery__liveact");
431   }
432   
433   return CriLaFw.galleryDiv;
434}
435
436
437// モーダル表示でLiveActのDivタグを移す先を取得する
438function getModalGalleryDiv()
439{
440   if(CriLaFw.modalGalleryDiv == null)
441   {
442     CriLaFw.modalGalleryDiv = document.getElementById("modal-gallery__liveact");
443   }
444   
445   return CriLaFw.modalGalleryDiv;
446}
447
448// 360終了用イベントハンドラ
449function close360ModalEvent()
450{
451    setNormalControl();
452    window.close360Modal();
453    CriLaFw.isOpenModalWindow = false;

454}
455
456
457window.addEventListener("resize",function(){criResizeWindow();});
458loadingEvent();
459
460
461// LiveAct(R) PRO PlayerとDOMの並列読み込み
462CriLaFw.startParallelLoad();
463// 上記1行をコメントアウトすると、
464// DOMの読み込みが完了してから、動画の読み込みを行うようになります。
465// この場合、data-load-priorityを基準として読み込みが行われます。
466// 詳細はマニュアルを参照してください。
467
468$(function() {
469   criResizeWindow();
470});
471
472
473// ----------------------------------------
474// フレームワークのコードの開始
475// ----------------------------------------
476CriLaEventDispatcher.ready(CriLaFw.initialize);