diff --git a/procentric/application/hoteltv.app.full.mypage.css b/procentric/application/hoteltv.app.full.mypage.css index ecba110..c582272 100755 --- a/procentric/application/hoteltv.app.full.mypage.css +++ b/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%; @@ -402,4 +414,105 @@ div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr>#date { top: -50px; 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); + } } \ No newline at end of file diff --git a/procentric/application/lib/hoteltv.hcap.js b/procentric/application/lib/hoteltv.hcap.js index 9c5c777..d6ae53f 100755 --- a/procentric/application/lib/hoteltv.hcap.js +++ b/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({ diff --git a/procentric/application/lib/hoteltv.ui_appfull.js b/procentric/application/lib/hoteltv.ui_appfull.js index 34e7368..e6848cf 100755 --- a/procentric/application/lib/hoteltv.ui_appfull.js +++ b/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; + // MYPAGE서브 메뉴 인덱스 갱신 if (_mp_sm == "mpsel_accommodation") { - // MYPAGE서브 메뉴 인덱스 갱신 _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]) {