issue #11 웰컴 다시보기 완료.

procentric/application/hoteltv.app.full.mypage.css

@@ -47,6 +47,18 @@
     padding: 0;
 }
 
+.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item>div {
+    width: 1920px;
+    height: 1080px;
+    background-image: var(--bg_noplay);
+}
+
+.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item.movieplay>div {
+    width: 100%;
+    height: 100%;
+    background-image: url(tv:);
+}
+
 .main .mypage .bg div .item {
     width: 100%;
     height: 100%;
@@ -403,3 +415,104 @@ div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr>#date {
     width: 100%;
     align-content: center;
 }
+
+
+
+
+/**********************************************************************
+ * Replay Welcome movie
+ **********************************************************************/
+.main .mypage .bg .owl-carousel .owl-item .ctz_mv_ctrl {
+    position: absolute;
+    top: 820px;
+    left: 1700px;
+    height: 54px;
+    line-height: 54px;
+    color: rgb(235, 235, 235);
+    font-size: 38px;
+    filter: drop-shadow(0 0 5px rgb(0, 0, 0));
+    white-space: nowrap;
+}
+
+.main .mypage .bg .owl-carousel .owl-item.movieplay .item .ctz_mv_ctrl {
+    animation-delay: 4s;
+    animation-name: moveMypageMvCtrl;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+}
+
+@keyframes moveMypageMvCtrl {
+    from {
+        left: 1700px;
+    }
+    to {
+        left: 2220px
+    }
+}
+
+.main .mypage .bg .owl-carousel .owl-item .ctz_mv_ctrl::before {
+    position: absolute;
+    content: '';
+    width: 128px;
+    height: 54px;
+    margin-left: -140px;
+    background-image: url("./images/icons/icon_btn_media_play.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: contain;
+}
+
+.main .mypage .bg .owl-carousel .owl-item.movieplay .ctz_mv_ctrl::before {
+    animation-name: iconCtzMvCtrlBtn;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+}
+
+@keyframes iconCtzMvCtrlBtn {
+    0% {
+        transform: rotateX(0deg);
+    }
+    50% {
+        transform: rotateX(90deg);
+        background-image: url("./images/icons/icon_btn_media_stop.png");
+    }
+    100% {
+        transform: rotateX(0deg);
+        background-image: url("./images/icons/icon_btn_media_stop.png");
+    }
+}
+
+.main .mypage .bg .owl-carousel .owl-item .ctz_mv_ctrl::after {
+    content: var(--playmsg);
+}
+
+.main .mypage .bg .owl-carousel .owl-item.movieplay .ctz_mv_ctrl::after {
+    animation-delay: 1s;
+    animation-name: msgMypageMvCtrlBtn;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    animation-duration: 2s;
+}
+
+@keyframes msgMypageMvCtrlBtn {
+    0% {
+        opacity: 1;
+    }
+    25% {
+        opacity: 0;
+        content: var(--stopmsg);
+    }
+    50% {
+        opacity: 1;
+        content: var(--stopmsg);
+    }
+    100% {
+        opacity: 1;
+        content: var(--stopmsg);
+    }
+}

procentric/application/lib/hoteltv.hcap.js

@@ -1358,7 +1358,7 @@ HotelTV.hcap = (function() {
                             });
                         }
                     }
-                } else if (_name == "SCREENSHARE") {
+                } else if (_name == "screenmirroring") {
                     for (const [key, item] of Object.entries(g_hcap_info.preapp)) {
                         if (item.id == '144115188075855880') {
                             hcap.preloadedApplication.launchPreloadedApplication({

procentric/application/lib/hoteltv.ui_appfull.js

@@ -92,6 +92,23 @@ HotelTV.ui_appfull = (function() {
     }
 
 
+    /**
+     * HotelTV UI Wrapper Function::> Show Top Widjet Weather
+     * @param {boolean} _show show/hide
+     */
+    function __uifxn_AppFull_TopWidjetShow(_show) {
+        if (_show == true) {
+            if ($('.widjet .top').css("display") == "none") {
+                $('.widjet .top').fadeIn(300);
+            }
+        } else {
+            if ($('.widjet .top').css("display") != "none") {
+                $('.widjet .top').fadeOut(300);
+            }
+        }
+    }
+
+
     /**
      * HotelTV UI[AppFull] Wrapper Function::> Keydown event time recorder
      * @param {dictionary} _evt event information
@@ -123,13 +140,16 @@ HotelTV.ui_appfull = (function() {
         console.log("media_event_received = " + _evt.eventType);
         let _stateMedia = _evt.eventType;
 
-        if (_state.menu.stage.cur == "ctzgen") {
+        if (_state.menu.stage.cur == "ctzgen")
+        {
             switch (_stateMedia) {
                 case 'play_start':
                     _state.media.playing = true;
                     $('.main .ctzgen .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item').removeClass('movieplay');
                     $('.main .ctzgen .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item.active').addClass('movieplay');
-                    $('.owl-theme .owl-nav.disabled+.owl-dots').fadeOut(500);
+                    $('.owl-theme .owl-nav.disabled+.owl-dots').fadeOut(500, function(){
+                        __uifxn_AppFull_TopWidjetShow(false);
+                    });
                     HotelTV.hcap.VideoWinSize(null);
                     break;
                 case 'play_end':
@@ -137,11 +157,59 @@ HotelTV.ui_appfull = (function() {
                     HotelTV.hcap.MediaStop(
                         function() {
                             $('.main .ctzgen .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item').removeClass('movieplay');
-                            $('.owl-theme .owl-nav.disabled+.owl-dots').fadeIn(500);
+                            $('.owl-theme .owl-nav.disabled+.owl-dots').fadeIn(500, function() {
+                                __uifxn_AppFull_TopWidjetShow(true);
+                            });
                         },
                         function() {
                             $('.main .ctzgen .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item').removeClass('movieplay');
-                            $('.owl-theme .owl-nav.disabled+.owl-dots').fadeIn(500);
+                            $('.owl-theme .owl-nav.disabled+.owl-dots').fadeIn(500, function() {
+                                __uifxn_AppFull_TopWidjetShow(true);
+                            });
+                        });
+                    break;
+                case 'error_in_playing':
+                    break;
+                case 'buffer_full':
+                    break;
+                case 'file_not_found':
+                    break;
+                case 'network_disconnected':
+                    break;
+                case 'network_busy':
+                    break;
+                case 'seek_done':
+                    break;
+            }
+        }
+        else if (_state.menu.stage.cur == "mypage_select_menu" || _state.menu.stage.cur == "mypage_replay_welcome_vod" )
+        {
+            switch (_stateMedia) {
+                case 'play_start':
+                    _state.media.playing = true;
+                    $('.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item').removeClass('movieplay');
+                    $('.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item.active').addClass('movieplay');
+                    HotelTV.hcap.VideoWinSize(null);
+                    $('.main .mypage .slider').animate({top:1080, left:0}, 1000, function(){
+                        __uifxn_AppFull_TopWidjetShow(false);
+                    })
+                    break;
+                case 'play_end':
+                    _state.media.playing = false;
+                    HotelTV.hcap.MediaStop(
+                        function() {
+                            $('.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item').removeClass('movieplay');
+                            $('.main .mypage .slider').animate({top:864, left:0}, 1000, function(){
+                                __uifxn_AppFull_TopWidjetShow(true);
+                            })
+                            _state.menu.stage.cur = _state.menu.stage.prev;
+                        },
+                        function() {
+                            $('.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item').removeClass('movieplay');
+                            $('.main .mypage .slider').animate({top:864, left:0}, 1000, function(){
+                                __uifxn_AppFull_TopWidjetShow(true);
+                            })
+                            _state.menu.stage.cur = _state.menu.stage.prev;
                         });
                     break;
                 case 'error_in_playing':
@@ -2606,7 +2674,7 @@ HotelTV.ui_appfull = (function() {
             _div_mpbg_item.className = 'item';
             _div_mpbg_item.id = 'mpbg_' + _mpinfo[_i].id;
 
-            let _sz_styleOpt = "background-image: url(" + _mpinfo[_i].background.file.download + "); ";
+            let _sz_styleOpt = "--bg_noplay: url(" + _mpinfo[_i].background.file.download + "); ";
             _sz_styleOpt += "background-repeat: no-repeat; background-position: center center; background-size: contain ";
             _div_mpbg_item.setAttribute("style", _sz_styleOpt);
 
@@ -2746,6 +2814,17 @@ HotelTV.ui_appfull = (function() {
                 _msg_tblrec.innerHTML = _sz_innerHTML;
                 _msg_table.appendChild(_msg_tblrec);
                 _div_mpbg_item.appendChild(_msg_table);
+            } else if (_mpinfo[_i].type == "replaywelcome") {
+                // 동영상이 있는 경우, PLAY안내 버튼 노출
+                if ( _mpinfo[_i].videos[_state.lang] ) {
+                    let _div_mypage_mvctrl = document.createElement('div');
+                    _div_mypage_mvctrl.setAttribute("class", "ctz_mv_ctrl");
+                    _div_mypage_mvctrl.setAttribute("video_url", _mpinfo[_i].videos[_state.lang].download);
+                    _sz_styleOpt = '--playmsg: "' + _trTbl.ui.player.watch_movie[_state.lang] + '";';
+                    _sz_styleOpt += '--stopmsg: "' + _trTbl.ui.player.stop_movie[_state.lang] + '";';
+                    _div_mypage_mvctrl.setAttribute("style", _sz_styleOpt);
+                    _div_mpbg_item.appendChild(_div_mypage_mvctrl);
+                }
             }
 
             _div_mp_bglist.appendChild(_div_mpbg_item);
@@ -2798,7 +2877,7 @@ HotelTV.ui_appfull = (function() {
                 $('#lst_mypagesel').trigger('translate.owl.carousel', [0]);
 
                 $(document.activeElement).keydown(function(event) { //attach event listener
-                    if (_state.menu.stage.cur == "mypage") {
+                    if (_state.menu.stage.cur == "mypage_select_menu") {
                         if (event.keyCode == gRmtKey.left) {
                             $('#lst_mypagesel').trigger('prev.owl')
                             $('#lst_mypagebg').trigger('prev.owl')
@@ -2813,7 +2892,8 @@ HotelTV.ui_appfull = (function() {
                             __uifxn_AppFull_MyPageSelectMessage("down");
                         } else if (event.keyCode == gRmtKey.enter) {
                             // 메시지 팝업 빌드 및 화면 전환
-                            if (HotelTV.tvguide.program[_mmIdx].children[_state.menu.main[_mmIdx].cur].type == 'message') {
+                            if (HotelTV.tvguide.program[_mmIdx].children[_state.menu.main[_mmIdx].cur].type == 'message')
+                            {
                                 let _msginf = HotelTV.message;
                                 let _cur_msglst_idx = _state.menu.main[_mmIdx]['message']['cur'];
                                 // 현재 선택된 메시지의 디테일 정보 가져오기
@@ -2859,7 +2939,7 @@ HotelTV.ui_appfull = (function() {
 
                                 //SHOW ANIMATION
                                 if ($('.popup>.mypage>.message').css('display') == "none") {
-                                    _state.menu.stage.cur = "popup_message_card";
+                                    _state.menu.stage.cur = "mypage_popup_message_card";
                                     $('.main>.mypage>.slider').animate({ top: 1080, left: 0 }, 1000, function() {
                                         $('.popup>.mypage>.message').fadeIn(500);
 
@@ -2893,14 +2973,58 @@ HotelTV.ui_appfull = (function() {
                                     __uifxn_AppFull_ShowMMHotKeyBtn(true);
                                 }, 500);
                             });
+                        } else if (event.keyCode == gRmtKey.play) {
+                            if (HotelTV.tvguide.program[_mmIdx].children[_state.menu.main[_mmIdx].cur].type == 'replaywelcome')
+                            {
+                                let uri_video = $($('.main .mypage .bg .owl-carousel .owl-item.active .ctz_mv_ctrl')[0]).attr('video_url');
+                                if (uri_video != null) {
+                                    _state.menu.stage.prev = _state.menu.stage.cur;
+                                    _state.menu.stage.cur = "mypage_replay_welcome_vod"
+                                    HotelTV.hcap.MediaPlay(
+                                        HotelTV.api.GetBaseUrl() + uri_video,
+                                        "",
+                                        "video/mp4",
+                                        1,
+                                        () => {
+                                            console.log("STARTUP Done CB.");
+                                        },
+                                        () => {
+                                            _state.menu.stage.cur = _state.menu.stage.prev;
+                                            console.log("STARTUP Fail CB.");
+                                        }
+                                    );
+                                }
+                            }
                         } else {
                             console.log("MYPAGE KEYEVT: Skip events::>" + event.keyCode);
                         }
-                    } else if (_state.menu.stage.cur == "popup_message_card") {
+                    } else if (_state.menu.stage.cur == "mypage_replay_welcome_vod") {
+                        if (event.keyCode == gRmtKey.stop)
+                        {
+                            if (_state.media.playing == true) {
+                                _state.media.playing = false;
+                                HotelTV.hcap.MediaStop(
+                                    function() {
+                                        $('.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item').removeClass('movieplay');
+                                        $('.main .mypage .slider').animate({top:864, left:0}, 1000, function(){
+                                            __uifxn_AppFull_TopWidjetShow(true);
+                                        })
+                                        _state.menu.stage.cur = _state.menu.stage.prev;
+                                    },
+                                    function() {
+                                        $('.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item').removeClass('movieplay');
+                                        $('.main .mypage .slider').animate({top:864, left:0}, 1000, function(){
+                                            __uifxn_AppFull_TopWidjetShow(true);
+                                        })
+                                        _state.menu.stage.cur = _state.menu.stage.prev;
+                                    });
+                            }
+                        }
+                    } else if (_state.menu.stage.cur == "mypage_popup_message_card") {
                         if (event.keyCode == gRmtKey.back) {
                             if ($('.popup>.mypage>.message').css('display') != "none") {
                                 $('.popup>.mypage>.message').fadeOut(500, function() {
-                                    _state.menu.stage.cur = "mypage";
+                                    _state.menu.stage.cur = "mypage_select_menu";
                                     $('.main>.mypage>.slider').animate({ top: 864, left: 0 }, 1000)
                                 });
                             }
@@ -2911,7 +3035,7 @@ HotelTV.ui_appfull = (function() {
                         console.log("INVALID MYPAGE SUBMENU STAGE::>" + _state.menu.stage.cur);
                     }
                 });
-                _state.menu.stage.cur = "mypage";
+                _state.menu.stage.cur = "mypage_select_menu";
             });
 
             $('#lst_mypagesel').on('translate.owl.carousel', function(event) {
@@ -2934,12 +3058,11 @@ HotelTV.ui_appfull = (function() {
                 if ($('.main .mypage .slider .owl-item').eq(uiCtrl_idx).children('.item').length == 1) {
                     let _mp_sm = $('.main .mypage .slider .owl-item').eq(uiCtrl_idx).children('.item')[0].id;
 
-                    if (_mp_sm == "mpsel_accommodation") {
                     // MYPAGE서브 메뉴 인덱스 갱신
+                    if (_mp_sm == "mpsel_accommodation") {
                         _state.menu.main[_mmIdx].cur = __fxn_getMyPaggeItemIndex(_mpinfo,'accommodation');
                     } else if (_mp_sm == "mpsel_message") {
                         let __curMsgDspIdx = 0;
-                        // MYPAGE서브 메뉴 인덱스 갱신
                         _state.menu.main[_mmIdx].cur = __fxn_getMyPaggeItemIndex(_mpinfo,'message');
 
                         // 메시지 포커싱
@@ -2954,6 +3077,8 @@ HotelTV.ui_appfull = (function() {
                         }
                         $('.main>.mypage>.bg>.owl-carousel .owl-item #mp_msg_tblrec tr').removeClass('focus');
                         $('.main>.mypage>.bg>.owl-carousel .owl-item #mp_msg_tblrec tr').filter("[msgidx='" + __curMsgDspIdx + "']").addClass('focus');
+                    } else if (_mp_sm == "mpsel_replaywelcome") {
+                        _state.menu.main[_mmIdx].cur = __fxn_getMyPaggeItemIndex(_mpinfo,'replaywelcome');
                     }
                     console.log("MYPAGE EVT(TRANSLATED) MYPAGE MENU::>" + _state.menu.main[_mmIdx].cur);
 
@@ -2966,6 +3091,7 @@ HotelTV.ui_appfull = (function() {
                             }
                         }])
                 }
+
                 $('.main .mypage .slider .owl-item.focus').removeClass('focus');
                 $('.main .mypage .slider .owl-item.unfocus').removeClass('unfocus');
                 $('.main .mypage .slider .owl-item').eq(uiCtrl_idx).addClass('focus');
@@ -4235,7 +4361,7 @@ HotelTV.ui_appfull = (function() {
         //마지막 KEY 이벤트 수신 시간 갱신
         //console.log(`KeyDn Event Recoreded::> ${_lastTm.keyevt.last} TMDiff::> ${_tm_diff_ms}`);
 
-        if (_state.menu.stage.cur == "popup_message_card") {
+        if (_state.menu.stage.cur == "mypage_popup_message_card") {
             //HIDE NEWS and USER GUIDE TIPS
             if (_newsInfo == null || _newsInfo.length == 0) {
                 if ($('.news').css('display') != "none") {
@@ -4255,7 +4381,7 @@ HotelTV.ui_appfull = (function() {
             {
                 //KEY이벤트 발생이 8초 이내인경우
                 //SHOW USER GUIDE TIPS
-                let show_stages = ["hotkey_mm_red", "hotkey_mm_green", "hotkey_mm_yellow", "hotkey_mm_blue", "main", "sub", "ctzgen", "tvCtgShow", "tvCtgHide", "mypage"];
+                let show_stages = ["hotkey_mm_red", "hotkey_mm_green", "hotkey_mm_yellow", "hotkey_mm_blue", "main", "sub", "ctzgen", "tvCtgShow", "tvCtgHide", "mypage_select_menu"];
                 let sz_msg = null;
                 if (show_stages.includes(_state.menu.stage.cur) == true) {
                     switch (_state.menu.stage.cur) {
@@ -4546,23 +4672,6 @@ HotelTV.ui_appfull = (function() {
         $('div#lst_mypagebg div #mp_message_title').text(_guest.name + _trTbl.ui.mypage.message.title.title[_state.lang].replace("_XX", _msgCnt.toString()));
     }
 
-    /**
-     * HotelTV UI Wrapper Function::> Show Top Widjet Weather
-     * @param {boolean} _show show/hide
-     */
-    function __uifxn_AppFull_TopWidjetShow(_show) {
-        if (_show == true) {
-            if ($('.widjet .top').css("display") == "none") {
-                $('.widjet .top').fadeIn(300);
-            }
-        } else {
-            if ($('.widjet .top').css("display") != "none") {
-                $('.widjet .top').fadeOut(300);
-            }
-        }
-    }
-
-
     /**
      * HotelTV UI Wrapper Function::> Build Main Menu::> Flight
      */
@@ -5083,6 +5192,8 @@ HotelTV.ui_appfull = (function() {
                             } else {
                                 HotelTV.ui_utils.ShowNotificationMsgBalloon(_trTbl.system.ott_service_not_ready[_state.lang], 5);
                             }
+                        } else if (_program[Number(_state.menu.main.cur)].service == "screenmirroring") {
+                            HotelTV.hcap.LaunchPreApp(_program[Number(_state.menu.main.cur)].service, null);
                         }
                     } else {
                         console.log(`Type:${_program[Number(_state.menu.main.cur)].type} doen's have sub menu...`);
@@ -5539,7 +5650,7 @@ HotelTV.ui_appfull = (function() {
                     });
 
                     // 사용자가 메시지 메뉴를 사용중인경우에 대한 처리
-                    if (_state.menu.stage.cur == "popup_message_card" || _state.menu.stage.cur == "mypage") {
+                    if (_state.menu.stage.cur == "mypage_popup_message_card" || _state.menu.stage.cur == "mypage_select_menu") {
                         const _mmIdx = _state.menu.main.cur;
                         // 메시지 상태 오브젝트 초기화
                         if ("message" in _state.menu.main[_mmIdx]) {