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

This commit is contained in:
Paul Kim
2023-10-11 17:26:28 +09:00
parent 94863d094a
commit 1869be9eab
3 changed files with 258 additions and 34 deletions

View File

@@ -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);
}
}

View File

@@ -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({

View File

@@ -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]) {