diff --git a/procentric/application/app_hoteltv_full.html b/procentric/application/app_hoteltv_full.html index 0fed625..bb04175 100755 --- a/procentric/application/app_hoteltv_full.html +++ b/procentric/application/app_hoteltv_full.html @@ -135,6 +135,13 @@
+
+
+ + +
+
+
diff --git a/procentric/application/hoteltv.app.full.tv.css b/procentric/application/hoteltv.app.full.tv.css index a137274..5ea5d3c 100755 --- a/procentric/application/hoteltv.app.full.tv.css +++ b/procentric/application/hoteltv.app.full.tv.css @@ -152,4 +152,93 @@ transform: rotate(135deg) skew(15deg, 15deg); border-top: 5px #fff solid; border-right: 5px #fff solid; -} \ No newline at end of file +} + +/*************************/ +/* STYLE for TV Shortcut */ +/*************************/ +.main .tv .shortcut { + position: absolute; + top: 18%; + left: 75%; + width: 440px; + height: 230px; + background: rgba(0, 0, 0, 0.7); + padding: 20px 6px 20px 6px; + border-top: 5px solid rgba(0,0,0,0.7); + border-bottom: 5px solid rgba(0,0,0,0.7); +} + +.main .tv .shortcut div#suggestion { + position: absolute; + width: 100%; + height: 84%; +} + +.main .tv .shortcut div#suggestion table { + width: 100%; + height: 100%; + /* padding: 3px 0px 3px 0px; */ + border-collapse: collapse; +} + +.main .tv .shortcut .ch_list>#record { + position: absolute; + width: 100%; + height: 100%; + color: rgba(240,240,240,1); + overflow: scroll; + padding: 14px 0px 0px 0px; +} + +.main .tv .shortcut .ch_list>#record tr { + width: 96%; + display: block; + float: left; + padding: 5px 0px 5px 0px; + border-bottom: 1px solid rgb(67, 82, 105); + border-top: 1px solid rgb(67, 82, 105); +} + +.main .tv .shortcut .ch_list>#record tr.active { + color:rgb(255, 192, 0); + background-color: rgba(0,0,0,0.6); + border-top: 2px solid rgb(255, 192, 0); + border-bottom: 2px solid rgb(255, 192, 0); +} + +.main .tv .shortcut .ch_list>#record tr>.scitem { + font-size: 40px; + line-height: 1; + width: 100%; +} + +.main .tv .shortcut .ch_list>#record tr>.scitem>#logo { + width: 24%; + height: 40px; + /* height: 100%; */ + float: left; + background-size: contain; + background-repeat: no-repeat; + background-position: left center; + border-radius: 10px; + border: 2px solid rgb(67, 82, 105); + /* margin: 1%; */ +} + +.main .tv .shortcut .ch_list>#record tr>.scitem>#num { + width: 14%; + float: left; + text-align: center; + /* margin: 4px 0px 1px 0px; */ +} + +.main .tv .shortcut .ch_list>#record tr>.scitem>#title { + width: 54%; + float: left; + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + /* margin: 4px 0px 1px 0px; */ +} diff --git a/procentric/application/lib/hoteltv.js b/procentric/application/lib/hoteltv.js index 0bd04ec..a666be0 100755 --- a/procentric/application/lib/hoteltv.js +++ b/procentric/application/lib/hoteltv.js @@ -51,6 +51,11 @@ var HotelTV = HotelTV || { }, 'tv':{ 'playing': false, + 'shortkey': { + 'idx': null, // 바로가기 번호 UI의 행번호(0부터 시작) + 'ch_item_idx': null, + 'scroll_offset': null, + }, }, 'hotkey': { "mm": {} diff --git a/procentric/application/lib/hoteltv.ui_appfull.js b/procentric/application/lib/hoteltv.ui_appfull.js index 46a5369..f295032 100755 --- a/procentric/application/lib/hoteltv.ui_appfull.js +++ b/procentric/application/lib/hoteltv.ui_appfull.js @@ -23,6 +23,21 @@ const gRmtKey = { stop: 413, play: 415, + num0: 48, + num1: 49, + num2: 50, + num3: 51, + num4: 52, + num5: 53, + num6: 54, + num7: 55, + num8: 56, + num9: 57, + + chup: 427, + chdown: 428, + chprev: 711, + /** ENNPLE SPECIAL KEY */ amenity: -2072433963, roomservice: -2072437788, @@ -50,18 +65,50 @@ HotelTV.ui_appfull = (function() { var _hndl_tmrCtzBgAni = null; const _lastTm = { 'tvchannel_changed': null, - 'keyevt': null, + 'keyevt': { + 'tv_num' :null, + 'tv_ctrl' :null, + 'last' :null, + }, }; - //// 비공개 프로퍼티 + /*********************************************************************** + * 비공개 프로퍼티 * + ***********************************************************************/ + /** + * HotelTV UI[AppFull] Wrapper Function::> 리모콘 키가 숫자키인지 검사 + * @param {dictionary} _evt event information + */ + function __uifxn_Utils_CheckKeyisNumber(_evt_keyCode) { + if ( _evt_keyCode == gRmtKey.num0 || _evt_keyCode == gRmtKey.num1 || + _evt_keyCode == gRmtKey.num2 || _evt_keyCode == gRmtKey.num3 || + _evt_keyCode == gRmtKey.num4 || _evt_keyCode == gRmtKey.num5 || + _evt_keyCode == gRmtKey.num6 || _evt_keyCode == gRmtKey.num7 || + _evt_keyCode == gRmtKey.num8 || _evt_keyCode == gRmtKey.num9 ){ + return true; + } + + return false; + } + + /** * HotelTV UI[AppFull] Wrapper Function::> Keydown event time recorder * @param {dictionary} _evt event information */ function __uifxn_AppFull_OnKeyDnEvtRec(_evt) { + const _state = HotelTV.state; let _tm_diff_ms = 0; + let _cur_date = new Date(); - _lastTm.keyevt = new Date(); + if ( __uifxn_Utils_CheckKeyisNumber(_evt.keyCode)==true ){ + _lastTm.keyevt.tv_num = _cur_date; + } else if ( _evt.keyCode == gRmtKey.up || _evt.keyCode == gRmtKey.down || + _evt.keyCode == gRmtKey.left || _evt.keyCode == gRmtKey.right || + _evt.keyCode == gRmtKey.chup || _evt.keyCode == gRmtKey.chdown ) { + _lastTm.keyevt.tv_ctrl = _cur_date; + } + _lastTm.keyevt.last = _cur_date; } @@ -202,9 +249,8 @@ HotelTV.ui_appfull = (function() { // {Boolean} param.result - true if the current channel is changed successfully, else false. // {String} param.errorMessage - in case of failure, this message provides the details. console.log( - "Event 'channel_changed' is received.\n" + - "Result = " + _evt.result + "\n" + - "Error message = " + _evt.errorMessage + "Event 'channel_changed' is received. " + + "Result = " + _evt.result + "Error message = " + _evt.errorMessage ); } @@ -1354,6 +1400,7 @@ HotelTV.ui_appfull = (function() { return _object[__j][_key]; } } + return ''; } const __fxn_padZero = function(_num, _size) { @@ -1504,8 +1551,7 @@ HotelTV.ui_appfull = (function() { _elDiv_OdItmesRec.className = "oditem"; var _elDiv_OdItmesRecName = document.createElement('div'); _elDiv_OdItmesRecName.setAttribute("id", "name"); - _elDiv_OdItmesRecName.textContent =`[${_j}] ` + __fxn_getRsItemValue(_roomservice.children, "title", - _OdItem.itemId)[_state.lang]; + _elDiv_OdItmesRecName.textContent =`[${_j}] ` + __fxn_getRsItemValue(_roomservice.children, "title", _OdItem.itemId)[_state.lang]; _elDiv_OdItmesRec.appendChild(_elDiv_OdItmesRecName); var _elDiv_OdItmesRecQuantity = document.createElement('div'); @@ -1540,8 +1586,8 @@ HotelTV.ui_appfull = (function() { // Activate first order lists _elRsOLstItemTblRec.children('tr').first().addClass('active'); } catch (_error) { - console.log(`Fail to call API::> ${_error}`); - return; + console.log(`Fail to call order detail page::> ${_error}`); + //return; } @@ -1655,7 +1701,7 @@ HotelTV.ui_appfull = (function() { var _eltr_item = document.createElement('tr'); _eltr_item.setAttribute("id", _rsCart.items[_idx].id); _eltr_item.setAttribute("index", _idx); { - //어메니티 아이탬 화면 드로잉 + //룸서비스 아이탬 화면 드로잉 var _eldiv_item_ctz = document.createElement('div'); _eldiv_item_ctz.setAttribute("class", "products"); @@ -2374,7 +2420,7 @@ HotelTV.ui_appfull = (function() { let _schTm = new Date(); if (_epg_prom_info[_j].time.length != 5) { - console.log("EPT Schedule org time is NULL"); + console.log("EPG Schedule org time is NULL"); } else { _schTm.setHours(Number(_epg_prom_info[_j].time.charAt(0) + _epg_prom_info[_j].time.charAt(1))); _schTm.setMinutes(Number(_epg_prom_info[_j].time.charAt(3) + _epg_prom_info[_j].time.charAt(4))); @@ -2399,32 +2445,39 @@ HotelTV.ui_appfull = (function() { */ function __uifxn_AppFull_TVChMngrUi() { let _state = HotelTV.state; - let _tm_diff_ms = 0; + let _tm_diff_ms_tvctrl = 0; - if (_lastTm.keyevt == null) { + if (_lastTm.keyevt.tv_ctrl == null) { return; } let _tm_cur = new Date(); - _tm_diff_ms = Math.floor(_tm_cur.getTime() - _lastTm.keyevt.getTime()); + _tm_diff_ms_tvctrl = Math.floor(_tm_cur.getTime() - _lastTm.keyevt.tv_ctrl.getTime()); //마지막 KEY 이벤트 수신 시간 갱신 - //console.log(`KeyDn Event Recoreded::> ${_lastTm.keyevt} TMDiff::> ${_tm_diff_ms}`); + //console.log(`KeyDn Event Recoreded::> ${_lastTm.keyevt.tv_ctrl} TMDiff::> ${_tm_diff_ms}`); // TV Channel UI 지속 시간 2초 - if (_tm_diff_ms < 2000) { - let el_width = $('.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage .item').width(); - el_width = (el_width + 100) * -1; - if ($('.main .tv .bg .owl-carousel .owl-stage-outer').position().left == el_width) { - $('.main .tv .bg .owl-carousel .owl-stage-outer').stop().animate({ left: '0px' }, 800, function() { - _state.menu.stage.cur = "tvCtgShow"; - }); - } - } else { - if ($('.main .tv .bg .owl-carousel .owl-stage-outer').position().left == 0) { - _state.menu.stage.cur = "tvCtgHide"; + if ( _state.menu.stage.cur=="tvShortcut" ) + { + + } + else + { + if (_tm_diff_ms_tvctrl <= 2500) { let el_width = $('.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage .item').width(); el_width = (el_width + 100) * -1; - $('.main .tv .bg .owl-carousel .owl-stage-outer').stop().animate({ left: el_width.toString() + 'px' }, 800); + if ($('.main .tv .bg .owl-carousel .owl-stage-outer').position().left == el_width) { + $('.main .tv .bg .owl-carousel .owl-stage-outer').stop().animate({ left: '0px' }, 400, function() { + _state.menu.stage.cur = "tvCtgShow"; + }); + } + } else { + if ($('.main .tv .bg .owl-carousel .owl-stage-outer').position().left == 0) { + _state.menu.stage.cur = "tvCtgHide"; + let el_width = $('.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage .item').width(); + el_width = (el_width + 100) * -1; + $('.main .tv .bg .owl-carousel .owl-stage-outer').stop().animate({ left: el_width.toString() + 'px' }, 400); + } } } } @@ -2927,15 +2980,15 @@ HotelTV.ui_appfull = (function() { /** * HotelTV UI[AppFull] Wrapper Function::> request tv channel function */ - function __uifxn_AppFull_TVRequestChannel() { + function __uifxn_AppFull_TVRequestChannel(_force_ctg_item_idx, _force_ch_item_idx) { const _state = HotelTV.state; const _trTbl = HotelTV.translation; const _mmIdx_tv = _state.menu.main.cur; - const _tvCtgIdx = _state.menu.main[_mmIdx_tv].cur; - const _tvChIdx = _state.menu.main[_mmIdx_tv][_tvCtgIdx].cur; + let _tvCtgIdx = _state.menu.main[_mmIdx_tv].cur; + let _tvChIdx = _state.menu.main[_mmIdx_tv][_tvCtgIdx].cur; const _program = HotelTV.tvguide.program; const _tvProg = _program[_mmIdx_tv].categories; - const _tvChInfo = _tvProg[_tvCtgIdx].channels[_tvChIdx]; + let _tvChInfo = _tvProg[_tvCtgIdx].channels[_tvChIdx]; let _need_to_changeTVChannel = false; let _tm_diff_ms = 0; @@ -2953,10 +3006,21 @@ HotelTV.ui_appfull = (function() { } } + // 번호키로 채널 변경시 카테고리와 채널 아이탬의 인덱스 + if ( _force_ctg_item_idx!=null && _force_ch_item_idx!=null ){ + //console.log(`Override channel category(${_force_ctg_item_idx}) and channel index(${_force_ch_item_idx})`); + _tvCtgIdx = _force_ctg_item_idx; + _tvChIdx = _force_ch_item_idx; + _tvChInfo = _tvProg[_tvCtgIdx].channels[_tvChIdx]; + } + + + + if (_need_to_changeTVChannel == true) { let _chReqParam = {}; console.log(`CHANGE::TVCTG[${_tvProg[_tvCtgIdx].name}]` + - ` CUR CH IDX::>${_tvChIdx} EPGID: ${_tvChInfo.epg_id} URL::>${_tvChInfo.url} TMDIFF::>${_tm_diff_ms}`); + ` CUR CH IDX::>${_tvChIdx} CHNAME:${_tvChInfo.name} EPGID: ${_tvChInfo.epg_id} URL::>${_tvChInfo.url} TMDIFF::>${_tm_diff_ms}`); if (_tvChInfo.type == "ptcrf") { // RF @@ -3004,6 +3068,200 @@ HotelTV.ui_appfull = (function() { } } + /** + * HotelTV UI[AppFull] Wrapper Function::> build tv channel shortcut list + * @param {string} _action parameter + */ + function __uifxn_AppFull_TVDrawShortCutList(_show, _action, _keyCode) { + let _state = HotelTV.state; + let _mmIdx = _state.menu.main.cur; + let _trTbl = HotelTV.translation; + let _program = HotelTV.tvguide.program; + let _tvProg = _program[_mmIdx].categories; + let _tvChitemAll = null; + + const __fxn_getTvCtgAllId = function() { + for (let _ctgidx = 1; _ctgidx <= _tvProg.length; _ctgidx++) { + if ( _tvProg[_ctgidx].name=="all" ){ + return _ctgidx; + } + } + // ALL채널의 디폴트 인덱스번호는 1이라고 간주 + return 1; + } + + const __fxn_getTvIdxByChnumber = function(_dic_channel, _ch_num) { + for (let _ctgidx = 1; _ctgidx <= _tvProg.length; _ctgidx++) { + if ( _tvProg[_ctgidx].name=="all" ){ + return _ctgidx; + } + } + // ALL채널의 디폴트 인덱스번호는 1이라고 간주 + return 1; + } + + const __fxn_getChItemValue = function(_object, _key) { + return _object[_key]; + } + + + + + + + // if (!(_mmIdx in _state.menu.main)) { + // _state.menu.main[_mmIdx] = { + // 'cnt': 0, + // 'cur': null, //현재 TV카테고리 + // 'prev': null, //마지막 TV카테고리 + // }; + // // TV Program category 개수 + // _state.menu.main[_mmIdx].cnt = _tvProg.length; + // } + + let _elTvScutRoot = $('.main .tv .shortcut'); + let _elTvScutSugesstion = _elTvScutRoot.children('#suggestion'); + let _elTvScutChlistTbl = _elTvScutSugesstion.children('.ch_list'); + let _elTvScutChlistRecord = _elTvScutChlistTbl.children('tbody'); + + // TV바로가기 번호키 UI 드로잉 + if ( _action=="build" ) + { + const _tbl_keycode_to_num = { + "48" : 0, + "49" : 1, + "50" : 2, + "51" : 3, + "52" : 4, + "53" : 5, + "54" : 6, + "55" : 7, + "56" : 8, + "57" : 9, + }; + + // ALL 카테고리 TV채널 정보 가져오기 + _tvChitemAll = _tvProg[__fxn_getTvCtgAllId()].channels; + + try { + let first_item = true; + // 기존 레코드 제거 + if (_elTvScutChlistRecord.children('tr').length) { + _elTvScutChlistRecord.children('tr').remove(); + } + + _state.tv.shortkey = { + "idx": "1", + "scroll_offset": 0, + "ch_item_idx": 1, + }; + + for (let _idx = 1; _idx <= _tvChitemAll.length; _idx++) + { + let _ChItem = _tvChitemAll[_idx]; + + if ( __fxn_getChItemValue(_ChItem, "number").includes( _tbl_keycode_to_num[_keyCode].toString())==true ) + { + var _elTr_ChtmesRec = document.createElement('tr'); + var _elDiv_ChItmesRec = document.createElement('div'); + _elDiv_ChItmesRec.className = "scitem"; + // all카테고리의 channels의 해당 채널의 아이탬 인덱스 + _elDiv_ChItmesRec.setAttribute("item_idx", _idx); + if ( first_item==true ){ + _state.tv.shortkey.ch_item_idx = _idx; + first_item = false; + } + + var _elDiv_ChItmesRecChIcon = document.createElement('div'); + _elDiv_ChItmesRecChIcon.setAttribute("id", "logo"); + _elDiv_ChItmesRecChIcon.style.backgroundImage = "url('" + __fxn_getChItemValue(_ChItem, "logo").file.download + "')"; + _elDiv_ChItmesRec.appendChild(_elDiv_ChItmesRecChIcon); + + // 채널 번호 + var _elDiv_ChItmesRecChNum = document.createElement('div'); + _elDiv_ChItmesRecChNum.setAttribute("id", "num"); + _elDiv_ChItmesRecChNum.textContent = Number(__fxn_getChItemValue(_ChItem, "number")); + _elDiv_ChItmesRec.appendChild(_elDiv_ChItmesRecChNum); + + var _elDiv_ChItmesRecName = document.createElement('div'); + _elDiv_ChItmesRecName.setAttribute("id", "title"); + _elDiv_ChItmesRecName.textContent = __fxn_getChItemValue(_ChItem, "title")[_state.lang]; + _elDiv_ChItmesRec.appendChild(_elDiv_ChItmesRecName); + + _elTr_ChtmesRec.appendChild(_elDiv_ChItmesRec); + _elTvScutChlistRecord.append(_elTr_ChtmesRec); + } + } + // Activate first order lists + _elTvScutChlistRecord.children('tr').first().addClass('active'); + + // 화면 출력 + if ( _elTvScutRoot.css('display') == 'none') { + _elTvScutRoot.fadeIn(500); + } + } catch (_error) { + console.log(`Fail to call API::> ${_error}`); + } + } + else if ( _action=="destory") + { + // 기존 레코드 제거 + if (_elTvScutChlistRecord.children('tr').length) { + _elTvScutChlistRecord.children('tr').remove(); + } + + // 채널 요청 + __uifxn_AppFull_TVRequestChannel(__fxn_getTvCtgAllId(), _state.tv.shortkey.ch_item_idx); + + if ( _elTvScutRoot.css('display') != 'none') { + _elTvScutRoot.fadeOut(500); + // _elTvScutRoot.fadeOut(500, function(){ + // _state.tv.shortkey = { + // "idx": "1", + // "scroll_offset": 0, + // "ch_item_idx": 1, + // }; + // }); + } + } + else if ( _action=="move" ) + { + if ( _keyCode == gRmtKey.up || _keyCode==gRmtKey.chup ) { + let selectedTblItem = _elTvScutChlistRecord.children('tr.active').prev("#record tr"); + _state.tv.shortkey.ch_item_idx = Number(selectedTblItem.children(".scitem").attr("item_idx")); + if (selectedTblItem.length) { + _elTvScutChlistRecord.children('tr.active').removeClass("active"); + selectedTblItem.addClass('active'); + _state.tv.shortkey.idx = selectedTblItem.prop('rowIndex'); + //_state.tv.shortkey.ch_item_idx = Number(selectedTblItem.children(".scitem").children("#num").text()); + _state.tv.shortkey.ch_item_idx = Number(selectedTblItem.children(".scitem").attr("item_idx")); + + // 스크롤이 필요한 경우 스크롤링 하기 + let _scrollTopVal = _state.tv.shortkey.scroll_offset; + _scrollTopVal -= selectedTblItem.prop('scrollHeight'); + _elTvScutChlistRecord.animate({ scrollTop: _scrollTopVal }, selectedTblItem.height()); + _state.tv.shortkey.scroll_offset = _scrollTopVal; + } + } else if ( _keyCode == gRmtKey.down || _keyCode==gRmtKey.chdown ) { + let selectedTblItem = _elTvScutChlistRecord.children('tr.active').next("#record tr"); + _state.tv.shortkey.ch_item_idx = Number(selectedTblItem.children(".scitem").attr("item_idx")); + if (selectedTblItem.length) { + _elTvScutChlistRecord.children('tr.active').removeClass("active"); + selectedTblItem.addClass('active'); + _state.tv.shortkey.idx = selectedTblItem.prop('rowIndex'); + //_state.tv.shortkey.ch_item_idx = Number(selectedTblItem.children(".scitem").children("#num").text()); + _state.tv.shortkey.ch_item_idx = Number(selectedTblItem.children(".scitem").attr("item_idx")); + + // 스크롤이 필요한 경우 스크롤링 하기 + let _scrollTopVal = _state.tv.shortkey.scroll_offset; + _scrollTopVal += selectedTblItem.prop('scrollHeight'); + _elTvScutChlistRecord.animate({ scrollTop: _scrollTopVal }, selectedTblItem.height()); + _state.tv.shortkey.scroll_offset = _scrollTopVal; + } + } + } + } + /** * HotelTV UI[AppFull] Wrapper Function::> update tv channel list within selected tv category * @param {string} _action parameter @@ -3025,7 +3283,7 @@ HotelTV.ui_appfull = (function() { if (_action == "on_load") { if (_el_target.find('.focused').length == 0) { _el_target.stop().animate({ scrollTop: ((tv_chElIdx - 2) * 120).toString() }, 500, function() { - __uifxn_AppFull_TVRequestChannel(); + __uifxn_AppFull_TVRequestChannel(null, null); }); _el_target.each(function(index, item) { $($(item).children()[tv_chElIdx]).addClass("focused"); @@ -3036,10 +3294,10 @@ HotelTV.ui_appfull = (function() { } else if (_action == "ch_up") { if ((tv_chElIdx >= 2) && (tv_chElIdx < (Number(_state.menu.main[_mmIdx_tv][_tvCtgIdx].cnt) - 3))) { _el_target.stop().animate({ scrollTop: ((tv_chElIdx - 2) * 120).toString() }, 500, function() { - __uifxn_AppFull_TVRequestChannel(); + __uifxn_AppFull_TVRequestChannel(null, null); }); } else { - __uifxn_AppFull_TVRequestChannel(); + __uifxn_AppFull_TVRequestChannel(null, null); } _el_target.each(function(index, item) { @@ -3049,10 +3307,10 @@ HotelTV.ui_appfull = (function() { } else if (_action == "ch_down") { if ((tv_chElIdx > 2) && (tv_chElIdx < (Number(_state.menu.main[_mmIdx_tv][_tvCtgIdx].cnt) - 2))) { _el_target.stop().animate({ scrollTop: ((tv_chElIdx - 2) * 120).toString() }, 500, function() { - __uifxn_AppFull_TVRequestChannel(); + __uifxn_AppFull_TVRequestChannel(null, null); }); } else { - __uifxn_AppFull_TVRequestChannel(); + __uifxn_AppFull_TVRequestChannel(null, null); } _el_target.each(function(index, item) { $($(item).children()[tv_chElIdx - 1]).removeClass("focused"); @@ -3646,6 +3904,69 @@ HotelTV.ui_appfull = (function() { let _program = HotelTV.tvguide.program; let _tvProg = _program[_mmIdx].categories; + const __fxn_exitTvMenu = function() { + // 현재 재생중인 TV채널 종료 + HotelTV.hcap.ChannelShutDown(); + + if (_hndl_tmrTvChnMngr != null) { + clearInterval(_hndl_tmrTvChnMngr); + _hndl_tmrTvChnMngr = null; + console.log("TMR::>Destoried..."); + } + + // 메인 메뉴로 귀환 + $(document.activeElement).off('keydown'); + $('.main .mm').show(function() { + $('#lst_mmsel').trigger('refresh.owl.carousel', [0]); + }); + + $('.main').animate({ top: 0, left: 0 }, 1000, () => { + $('#lst_tvCtgbg').off('refresh.owl.carousel'); + $('#lst_tvCtgbg').off('change.owl.carousel'); + $('#lst_tvCtgbg').off('changed.owl.carousel'); + $('#lst_tvCtgbg').off('translated.owl.carousel'); + + $('#lst_tvCtgbg').owlCarousel('destroy'); + + $('.main .tv .bg #lst_tvCtgbg div').remove(); + _hndl_tvCtg = null; + _state.menu.stage.cur = "main"; + + setTimeout(function() { + __uifxn_AppFull_ShowMMHotKeyBtn(true); + __uifxn_AppFull_TopWidjetShow(true); + }, 500); + }); + } + + const __fxn_moveTvChannel = function(_tvProgram, _action) { + let _mmIdx = _state.menu.main.cur; + let _curChCtg = _state.menu.main[_mmIdx].cur; + let _curChIdx = Number(_state.menu.main[_mmIdx][_curChCtg].cur); + + if ( _action=="ch_up" ){ + if ((_curChIdx - 1) >= 1) { + _curChIdx -= 1; + _state.menu.main[_mmIdx][_curChCtg].cur = _curChIdx.toString(); + console.log(`TVCTG[${_tvProgram[_curChCtg].name}] CUR CH::>${_state.menu.main[_mmIdx][_curChCtg].cur}`); + + __uifxn_AppFull_TVUpdateChList("ch_up"); + } + }else if ( _action=="ch_down" ) { + if ((_curChIdx + 1) <= Number(_state.menu.main[_mmIdx][_curChCtg].cnt)) { + _curChIdx += 1; + _state.menu.main[_mmIdx][_curChCtg].cur = _curChIdx.toString(); + console.log(`TVCTG[${_tvProg[_curChCtg].name}] CUR CH::>${_state.menu.main[_mmIdx][_curChCtg].cur}`); + + __uifxn_AppFull_TVUpdateChList("ch_down"); + } + } + } + + // 초기 채널 카테고리 슬라이더 표시 시간 증가 + _lastTm.keyevt.tv_ctrl = new Date(); + _lastTm.keyevt.tv_ctrl.setSeconds(_lastTm.keyevt.tv_ctrl.getSeconds() + 3); + if (!(_mmIdx in _state.menu.main)) { _state.menu.main[_mmIdx] = { 'cnt': 0, @@ -3656,6 +3977,14 @@ HotelTV.ui_appfull = (function() { _state.menu.main[_mmIdx].cnt = _tvProg.length; } + // state내의 tv shortcut key관련 상태값 초기화및 화면 숨김 + _state.tv.shortkey = { + "idx": "1", + "scroll_offset": 0, + "ch_item_idx": 1, + }; + $('.main .tv .shortcut').hide(); + // 초기 메인 메뉴 KEY설정 _state.menu.stage.cur = "preparing_tv"; if (_state.menu.main[_mmIdx].cur == null) { @@ -3676,7 +4005,6 @@ HotelTV.ui_appfull = (function() { // TV 메뉴 카테고리 노드를 동적으로 구성 let _div_tvCgh_bglist = document.querySelector('#lst_tvCtgbg'); - //for (let _tvCtg_item in _tvProg) { for (let _tvCtg_idx = 1; _tvCtg_idx <= _tvProg.length; _tvCtg_idx++) { let _tvCtgInfo = _tvProg[_tvCtg_idx]; let _div_tvCtg_frame = document.createElement('div'); @@ -3727,11 +4055,10 @@ HotelTV.ui_appfull = (function() { } _div_tv_chepg.appendChild(_span_tv_chepginfo); - + // chframe에 자식 추가 _div_tv_chframe.appendChild(_div_tv_chepg); - let _div_tv_chlogo = document.createElement('div'); _div_tv_chlogo.setAttribute("id", "tvch_logo"); _sz_styleOpt = "background-image: url(" + _tvChInfo.logo.file.download + "); "; @@ -3797,127 +4124,61 @@ HotelTV.ui_appfull = (function() { $('#lst_tvCtgbg').trigger('prev.owl', [1000]) } else if (event.keyCode == gRmtKey.right) { $('#lst_tvCtgbg').trigger('next.owl', [1000]) - } else if (event.keyCode == 38 || event.keyCode == 427) { + } else if (event.keyCode == gRmtKey.up || event.keyCode == gRmtKey.chup) { // 채널 리스트 아이탬 이동(UP) - let _mmIdx = _state.menu.main.cur; - let _curChCtg = _state.menu.main[_mmIdx].cur; - let _curChIdx = Number(_state.menu.main[_mmIdx][_curChCtg].cur); - if ((_curChIdx - 1) >= 1) { - _curChIdx -= 1; - _state.menu.main[_mmIdx][_curChCtg].cur = _curChIdx.toString(); - console.log(`TVCTG[${_tvProg[_curChCtg].name}] CUR CH::>${_state.menu.main[_mmIdx][_curChCtg].cur}`); - - __uifxn_AppFull_TVUpdateChList("ch_up"); - } - } else if (event.keyCode == gRmtKey.down || event.keyCode == 428) { + __fxn_moveTvChannel(_tvProg, "ch_up"); + } else if (event.keyCode == gRmtKey.down || event.keyCode == gRmtKey.chdown) { // 채널 리스트 아이탬 이동(DOWN) - let _mmIdx = _state.menu.main.cur; - let _curChCtg = _state.menu.main[_mmIdx].cur; - let _curChIdx = Number(_state.menu.main[_mmIdx][_curChCtg].cur); - if ((_curChIdx + 1) <= Number(_state.menu.main[_mmIdx][_curChCtg].cnt)) { - _curChIdx += 1; - _state.menu.main[_mmIdx][_curChCtg].cur = _curChIdx.toString(); - console.log(`TVCTG[${_tvProg[_curChCtg].name}] CUR CH::>${_state.menu.main[_mmIdx][_curChCtg].cur}`); - - __uifxn_AppFull_TVUpdateChList("ch_down"); - } + __fxn_moveTvChannel(_tvProg, "ch_down"); } else if (event.keyCode == gRmtKey.enter) { // TV채널 플레이 } else if (event.keyCode == gRmtKey.back) { - // 현재 재생중인 TV채널 종료 - HotelTV.hcap.ChannelShutDown(); - - if (_hndl_tmrTvChnMngr != null) { - clearInterval(_hndl_tmrTvChnMngr); - _hndl_tmrTvChnMngr = null; - console.log("TMR::>Destoried..."); - } - - // 메인 메뉴로 귀환 - $(document.activeElement).off('keydown'); - $('.main .mm').show(function() { - $('#lst_mmsel').trigger('refresh.owl.carousel', [0]); - }); - - $('.main').animate({ top: 0, left: 0 }, 1000, () => { - $('#lst_tvCtgbg').off('refresh.owl.carousel'); - $('#lst_tvCtgbg').off('change.owl.carousel'); - $('#lst_tvCtgbg').off('changed.owl.carousel'); - $('#lst_tvCtgbg').off('translated.owl.carousel'); - - $('#lst_tvCtgbg').owlCarousel('destroy'); - - $('.main .tv .bg #lst_tvCtgbg div').remove(); - _hndl_tvCtg = null; - _state.menu.stage.cur = "main"; - - setTimeout(function() { - __uifxn_AppFull_ShowMMHotKeyBtn(true); - __uifxn_AppFull_TopWidjetShow(true); - }, 500); - }); + // TV 메뉴를 종료하고 메인 메뉴로 이동 + __fxn_exitTvMenu(); + } else if ( __uifxn_Utils_CheckKeyisNumber(event.keyCode)==true ){ + _state.menu.stage.prev = _state.menu.stage.cur; + _state.menu.stage.cur = "tvShortcut"; + //Navigate TV shortcut lists + __uifxn_AppFull_TVDrawShortCutList(true, "build", event.keyCode); } } else if (_state.menu.stage.cur == "tvCtgHide") { - if (event.keyCode == 427) { - // 채널 리스트 아이탬 이동(UP) - let _mmIdx = _state.menu.main.cur; - let _curChCtg = _state.menu.main[_mmIdx].cur; - let _curChIdx = Number(_state.menu.main[_mmIdx][_curChCtg].cur); - if ((_curChIdx - 1) >= 1) { - _curChIdx -= 1; - _state.menu.main[_mmIdx][_curChCtg].cur = _curChIdx.toString(); - console.log(`TVCTG[${_tvProg[_curChCtg].name}] CUR CH::>${_state.menu.main[_mmIdx][_curChCtg].cur}`); - - __uifxn_AppFull_TVUpdateChList("ch_up"); - } - } else if (event.keyCode == 428) { - // 채널 리스트 아이탬 이동(DOWN) - let _mmIdx = _state.menu.main.cur; - let _curChCtg = _state.menu.main[_mmIdx].cur; - let _curChIdx = Number(_state.menu.main[_mmIdx][_curChCtg].cur); - if ((_curChIdx + 1) <= Number(_state.menu.main[_mmIdx][_curChCtg].cnt)) { - _curChIdx += 1; - _state.menu.main[_mmIdx][_curChCtg].cur = _curChIdx.toString(); - console.log(`TVCTG[${_tvProg[_curChCtg].name}] CUR CH::>${_state.menu.main[_mmIdx][_curChCtg].cur}`); - - __uifxn_AppFull_TVUpdateChList("ch_down"); - } + if (event.keyCode == gRmtKey.chup) { + // 채널 리스트 아이탬 이동(CHUP) + __fxn_moveTvChannel(_tvProg, "ch_up"); + } else if (event.keyCode == gRmtKey.chdown) { + // 채널 리스트 아이탬 이동(CHDOWN) + __fxn_moveTvChannel(_tvProg, "ch_down"); } else if (event.keyCode == gRmtKey.back) { - // 현재 재생중인 TV채널 종료 - HotelTV.hcap.ChannelShutDown(); - - if (_hndl_tmrTvChnMngr != null) { - clearInterval(_hndl_tmrTvChnMngr); - _hndl_tmrTvChnMngr = null; - console.log("TMR::>Destoried..."); - } - - // 메인 메뉴로 귀환 - $(document.activeElement).off('keydown'); - $('.main .mm').show(function() { - $('#lst_mmsel').trigger('refresh.owl.carousel', [0]); - }); - - $('.main').animate({ top: 0, left: 0 }, 1000, () => { - $('#lst_tvCtgbg').off('refresh.owl.carousel'); - $('#lst_tvCtgbg').off('change.owl.carousel'); - $('#lst_tvCtgbg').off('changed.owl.carousel'); - $('#lst_tvCtgbg').off('translated.owl.carousel'); - - $('#lst_tvCtgbg').owlCarousel('destroy'); - - $('.main .tv .bg #lst_tvCtgbg div').remove(); - _hndl_tvCtg = null; - _state.menu.stage.cur = "main"; - - setTimeout(function() { - __uifxn_AppFull_ShowMMHotKeyBtn(true); - __uifxn_AppFull_TopWidjetShow(true); - }, 500); - }); + // TV 메뉴를 종료하고 메인 메뉴로 이동 + __fxn_exitTvMenu(); + } else if ( __uifxn_Utils_CheckKeyisNumber(event.keyCode)==true ) { + _state.menu.stage.prev = _state.menu.stage.cur; + _state.menu.stage.cur = "tvShortcut"; + //Navigate TV shortcut lists + __uifxn_AppFull_TVDrawShortCutList(true, "build", event.keyCode); } else { console.log("event.keyCode::>" + event.keyCode); } + } else if (_state.menu.stage.cur == "tvShortcut") { + // console.log("TV shortcut routine: key:" + event.keyCode); + if (event.keyCode == gRmtKey.back) { + // TV 메뉴를 종료하고 메인 메뉴로 이동 + //__fxn_exitTvMenu(); + __uifxn_AppFull_TVDrawShortCutList(false, "destory", event.keyCode); + _state.menu.stage.cur = _state.menu.stage.prev; + _state.menu.stage.prev = null; + } else if (event.keyCode == gRmtKey.enter) { + // 번호키를 이용한 채널 선택 팝업 삭제 + __uifxn_AppFull_TVDrawShortCutList(false, "destory", event.keyCode); + _state.menu.stage.cur = _state.menu.stage.prev; + _state.menu.stage.prev = null; + + _lastTm.keyevt.tv_ctrl = new Date(); + _lastTm.keyevt.tv_ctrl.setSeconds(_lastTm.keyevt.tv_ctrl.getSeconds() - 3); + } else { + __uifxn_AppFull_TVDrawShortCutList(true, "move", event.keyCode); + console.log("TVSHORTCUT CHNUM: " + _state.tv.shortkey.ch_item_idx); + } } else { console.log("TVMENU KEYEVT: Skip events::> Invalid menu stage:" + _state.menu.stage.cur); } @@ -3957,8 +4218,6 @@ HotelTV.ui_appfull = (function() { _state.menu.main[_mmIdx].prev = _state.menu.main[_mmIdx].cur; _state.menu.main[_mmIdx].cur = _curChCtg; console.log("CHANGED TV CATEGORY::> CURRENT TV CTG IDX::> " + _curChCtg); - - //__uifxn_AppFull_TVRequestChannel(); }); } @@ -3972,17 +4231,17 @@ HotelTV.ui_appfull = (function() { let _tm_diff_ms = 0; - if (_lastTm.keyevt == null) { - _lastTm.keyevt = new Date(); + if (_lastTm.keyevt.last == null) { + _lastTm.keyevt.last = new Date(); + console.log("keyevt.last is NULL"); return; } let _tm_cur = new Date(); - _tm_diff_ms = Math.floor(_tm_cur.getTime() - _lastTm.keyevt.getTime()); + _tm_diff_ms = Math.floor(_tm_cur.getTime() - _lastTm.keyevt.last.getTime()); //마지막 KEY 이벤트 수신 시간 갱신 - //console.log(`KeyDn Event Recoreded::> ${_lastTm.keyevt} TMDiff::> ${_tm_diff_ms}`); + //console.log(`KeyDn Event Recoreded::> ${_lastTm.keyevt.last} TMDiff::> ${_tm_diff_ms}`); - // if (_state.menu.stage.cur == "popup_message_card") { //HIDE NEWS and USER GUIDE TIPS if (_newsInfo == null || _newsInfo.length == 0) { @@ -3995,24 +4254,15 @@ HotelTV.ui_appfull = (function() { $('.guide>.tips').fadeOut(500); } return; - } else if (_state.menu.stage.cur == "tvCtgHide") { - //HIDE NEWS and USER GUIDE TIPS - if (_newsInfo == null || _newsInfo.length == 0) { - if ($('.news').css('display') != "none") { - $('.news').hide(); - } - } - - if ($('.guide>.tips').css('display') != "none") { - $('.guide>.tips').fadeOut(500); - } } - // TV Channel UI 지속 시간 8초 + // 가이드 UI 지속 시간 8초 if (_state.media.playing == false) { - if (_tm_diff_ms < 8000) { + if (_tm_diff_ms < 8000) + { + //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", "mypage"]; + let show_stages = ["hotkey_mm_red", "hotkey_mm_green", "hotkey_mm_yellow", "hotkey_mm_blue", "main", "sub", "ctzgen", "tvCtgShow", "tvCtgHide", "mypage"]; let sz_msg = null; if (show_stages.includes(_state.menu.stage.cur) == true) { switch (_state.menu.stage.cur) { @@ -4060,6 +4310,7 @@ HotelTV.ui_appfull = (function() { } break; case "tvCtgShow": + case "tvCtgHide": sz_msg = _trTbl.ui.guide.navi_tvchannel[_state.lang]; if ($('.guide>.tips').text() != sz_msg) { $('.guide>.tips').text(sz_msg); @@ -4069,7 +4320,7 @@ HotelTV.ui_appfull = (function() { if ($('.guide>.tips').css('display') == "none") { $('.guide>.tips').fadeIn(500, function() { - //SHOW NEWS + //HIDE NEWS if (_newsInfo == null || _newsInfo.length == 0) { if ($('.news').css('display') != "none") { $('.news').hide(); @@ -4089,14 +4340,17 @@ HotelTV.ui_appfull = (function() { $('.guide>.tips').fadeOut(500); } - if ($('.news').css('display') != "block") { + if ($('.news').css('display') != "none") { if ($('.news>.newsctz #hoteltv-news-ticker').children().length > 0) { $('.news>.newsctz #hoteltv-news-ticker').webTicker('stop'); $('.news').fadeOut(500); } } } - } else { + } + else + { + //KEY이벤트 발생이 8초가 초과한경우 //HIDE TIPS and then SHOW NEWS if ($('.guide>.tips').css('display') == "block") { $('.guide>.tips').fadeOut(500, function() { @@ -4105,11 +4359,18 @@ HotelTV.ui_appfull = (function() { $('.news').hide(); } } else { - if ($('.news').css('display') != "block") { - $('.news').fadeIn(500, function() { - __uifxn_AppFull_BldNews(); - $('.news>.newsctz #hoteltv-news-ticker').webTicker('cont'); - }); + if ( _state.menu.stage.cur=="tvCtgShow" || _state.menu.stage.cur=="tvCtgHide" ) + { + + } + else + { + if ($('.news').css('display') != "block") { + $('.news').fadeIn(500, function() { + __uifxn_AppFull_BldNews(); + $('.news>.newsctz #hoteltv-news-ticker').webTicker('cont'); + }); + } } } }); @@ -4119,11 +4380,23 @@ HotelTV.ui_appfull = (function() { $('.news').hide(); } } else { - if ($('.news').css('display') != "block") { - $('.news').fadeIn(500, function() { - __uifxn_AppFull_BldNews(); - $('.news>.newsctz #hoteltv-news-ticker').webTicker('cont'); - }); + if ( _state.menu.stage.cur=="tvCtgShow" || _state.menu.stage.cur=="tvCtgHide" ) + { + // if ($('.news').css('display') != "block") { + // if ($('.news>.newsctz #hoteltv-news-ticker').children().length > 0) { + // $('.news>.newsctz #hoteltv-news-ticker').webTicker('stop'); + // $('.news').fadeOut(500); + // } + // } + } + else + { + if ($('.news').css('display') != "block") { + $('.news').fadeIn(500, function() { + __uifxn_AppFull_BldNews(); + $('.news>.newsctz #hoteltv-news-ticker').webTicker('cont'); + }); + } } } }