diff --git a/procentric/application/app_hoteltv_full.html b/procentric/application/app_hoteltv_full.html index 1942413..e21a7d3 100755 --- a/procentric/application/app_hoteltv_full.html +++ b/procentric/application/app_hoteltv_full.html @@ -116,9 +116,31 @@
- + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
diff --git a/procentric/application/lib/hoteltv.hcap.js b/procentric/application/lib/hoteltv.hcap.js index 620bcc9..c0f7486 100755 --- a/procentric/application/lib/hoteltv.hcap.js +++ b/procentric/application/lib/hoteltv.hcap.js @@ -462,9 +462,15 @@ HotelTV.hcap = (function() { "rfBroadcastType": _lutBCastType[_param.rf.type], "onSuccess": function() { console.log("onSuccess"); + if ( _param.cbfxn.success!=null ){ + _param.cbfxn.success(); + } }, "onFailure": function(f) { console.log("onFailure : errorMessage = " + f.errorMessage); + if ( _param.cbfxn.failure!=null ){ + _param.cbfxn.failure(); + } } }); } else { @@ -1731,6 +1737,18 @@ HotelTV.hcap = (function() { } }, + /** + * _keyValue는 아래 코드중 하나 + * hcap.key.Code.ENTER + * hcap.key.Code.LEFT + * hcap.key.Code.RIGHT + * hcap.key.Code.BACK + * hcap.key.Code.UP + * hcap.key.Code.DOWN + * hcap.key.Code.CH_UP + * hcap.key.Code.CH_DOWN + * @param {enum} _keyValue + */ SendVirKeyEvent: function(_keyValue) { hcap.key.sendKey({ "virtualKeycode" : _keyValue, diff --git a/procentric/application/lib/hoteltv.js b/procentric/application/lib/hoteltv.js index e4744fa..90a0e1f 100755 --- a/procentric/application/lib/hoteltv.js +++ b/procentric/application/lib/hoteltv.js @@ -53,7 +53,7 @@ var HotelTV = HotelTV || { 'playing': false, 'shortkey': { 'idx': null, // 바로가기 번호 UI의 행번호(0부터 시작) - 'ch_item_idx': null, + 'ch_item_idx': null, // ALL Category내에서의 채널 index 'scroll_offset': null, }, }, diff --git a/procentric/application/lib/hoteltv.ui_appfull.js b/procentric/application/lib/hoteltv.ui_appfull.js index f008605..574811b 100755 --- a/procentric/application/lib/hoteltv.ui_appfull.js +++ b/procentric/application/lib/hoteltv.ui_appfull.js @@ -46,6 +46,19 @@ const gRmtKey = { tv: -2072443143, } +const gRmKeyCode2Num = { + "48" : 0, + "49" : 1, + "50" : 2, + "51" : 3, + "52" : 4, + "53" : 5, + "54" : 6, + "55" : 7, + "56" : 8, + "57" : 9, +}; + HotelTV.namespace('HotelTV.ui_appfull'); HotelTV.ui_appfull = (function() { @@ -59,7 +72,9 @@ HotelTV.ui_appfull = (function() { var _hndl_ctzGenBg = null; var _hndl_brochureBg = null; var _hndl_widget_topTime = null; + var _hndl_tvCtgyFrm = null; var _hndl_tmrTvChnMngr = null; + var _hndl_tmrTvShortcutMngr = null; var _hndl_tmrUgMngr = null; var _hndl_tmrCtzThumbAni = null; var _hndl_tmrCtzBgAni = null; @@ -68,7 +83,7 @@ HotelTV.ui_appfull = (function() { const _tmrEvt = { 'tvchannel_changed': null, 'keyevt': { - 'tv_num' :null, + 'tv_numBtn' :null, 'tv_ctrl' :null, 'last' :null, }, @@ -296,11 +311,14 @@ HotelTV.ui_appfull = (function() { */ function __uifxn_AppFull_OnKeyDnEvtRec(_evt) { const _state = HotelTV.state; - let _tm_diff_ms = 0; let _cur_date = new Date(); + let _valid_state_keyEvtOnTv = ["tvCtgShow", "tvCtgHide", "tvShortcut"]; + if ( __uifxn_Utils_CheckKeyisNumber(_evt.keyCode)==true ){ - _tmrEvt.keyevt.tv_num = _cur_date; + if ( _valid_state_keyEvtOnTv.includes(_state.menu.stage.cur)==true ){ + _tmrEvt.keyevt.tv_numBtn = _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 ) { @@ -470,12 +488,8 @@ HotelTV.ui_appfull = (function() { "HDMI-" + _evt.index + " : " + "connected = " + _evt.connected ); - if ( _state.menu.stage.cur=="tvCtgShow" || - _state.menu.stage.cur=="tvCtgHide" || - _state.menu.stage.cur=="tvShortcut" || - _state.menu.stage.cur=="tvPreparing" || - _state.menu.stage.cur=="language_selection" ) - { + let _valid_state_showsup_hdmi_unavailable = ["tvCtgShow", "tvCtgHide", "tvShortcut", "tvPreparing","language_selection"]; + if ( _valid_state_showsup_hdmi_unavailable.includes(_state.menu.stage.cur)==true ){ console.warn("HDMI input doesn't work tv mode"); //HDMI사용불가 말풍선 출력 HotelTV.ui_utils.ShowNotificationMsgBalloon(_trTbl.system.notice.event.external_input.hdmi_unavailable[_state.lang], 5); @@ -3954,66 +3968,134 @@ HotelTV.ui_appfull = (function() { $('#lst_smbg').trigger("to.owl.carousel", [_evt.page.index, 1000, true]); } + + + /** + * Return tv cagegory id by name + * @param {string} _ctgy_name + * @returns + */ + function __uifxn_AppFull_TVCtgyIdByName(_ctgy_name="all") { + let _program = HotelTV.tvguide.program; + let _tvCtgyInfoAll = null; + + for ( let _i=1; _i<=_program.length; _i++ ){ + if ( _program[_i].type=="tv" ){ + _tvCtgyInfoAll = _program[_i].categories; + break; + } + } + + if ( _tvCtgyInfoAll==null ){ + // ALL채널의 디폴트 인덱스번호는 1이라고 간주 + return 1; + } + + for (let _ctgyidx = 1; _ctgyidx <= _tvCtgyInfoAll.length; _ctgyidx++) { + if ( _tvCtgyInfoAll[_ctgyidx].name==_ctgy_name ){ + return _ctgyidx; + } + } + // ALL채널의 디폴트 인덱스번호는 1이라고 간주 + return 1; + } + /** * HotelTV UI[AppFull] Wrapper Function::> Get EPG Info by channel name * @param {string} _ch_name channel name */ - function __uifxn_AppFull_GetEpgInfoById(_ch_name) { - let _epgInfo = HotelTV.epg; + function __uifxn_AppFull_TVEpgByChName(_ch_name) { let _tm_cur = new Date(); + try { + // + let _epgInfo = HotelTV.epg; - if (_epgInfo == 'undefined' || _epgInfo == null) { - return null; - } - - if (Object.keys(_epgInfo).includes('schedules') != true || Object.keys(_epgInfo).includes('channels') != true) { - return null; - } - - //Find out epg schedule id - let _epg_schId = null; - for (let _j = 0; _j < _epgInfo.channels.length; _j++) { - if (_epgInfo.channels[_j].name == _ch_name) { - _epg_schId = _epgInfo.channels[_j].id; - } - } - - // EPG SHEDULE ID를 찾을 수 없으므로, null 반환. - if (_epg_schId == null) { return null; } - - let _epg_prom_info = null; - if (Object.keys(_epgInfo.schedules).includes(_epg_schId) != true) { - return null; - } - _epg_prom_info = _epgInfo.schedules[_epg_schId]; - - let _rtn_epg = null; - for (let _j in _epg_prom_info) { - let _schTm = new Date(); - - if (_epg_prom_info[_j].time.length != 5) { - 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))); + if (_epgInfo == 'undefined' || _epgInfo == null) { + return { "tm_cur": _tm_cur, "epg_info": null}; } - let _tdiff_cur = Math.round((_schTm - _tm_cur) / 60000); //Time diff in minuate - if (_rtn_epg == null) { - _rtn_epg = _epg_prom_info[_j]; + if (Object.keys(_epgInfo).includes('schedules') != true || Object.keys(_epgInfo).includes('channels') != true) { + return { "tm_cur": _tm_cur, "epg_info": null}; } - if (_tdiff_cur > 0) { - return _rtn_epg; + //Find out epg schedule id + let _epg_schId = null; + for (let _j = 0; _j < _epgInfo.channels.length; _j++) { + if (_epgInfo.channels[_j].name == _ch_name) { + _epg_schId = _epgInfo.channels[_j].id; + break; + } } - _rtn_epg = _epg_prom_info[_j]; - //console.log("CHNAME::>" + _ch_name + " TDiff::> " + _tdiff_cur); + + // EPG SHEDULE ID를 찾을 수 없으므로, null 반환. + if (_epg_schId == null) { return { "tm_cur": _tm_cur, "epg_info": null}; } + + let _epg_prom_info = null; + if (Object.keys(_epgInfo.schedules).includes(_epg_schId) != true) { + return { "tm_cur": _tm_cur, "epg_info": null}; + } + _epg_prom_info = _epgInfo.schedules[_epg_schId]; + + let _rtn_epg = null; + for (_j=0; _j<_epg_prom_info.length; _j++) { + let _schTmPrev = new Date(); + let _schTmCur = new Date(); + let _epgProgInf_Cur = _epg_prom_info[_j]; + let _epgProgInf_Prev = null; + + if (_epgProgInf_Cur.time.length != 5) { + console.log("EPG Schedule org time is NULL"); + } else { + _schTmCur.setHours(Number(_epgProgInf_Cur.time.charAt(0) + _epgProgInf_Cur.time.charAt(1))); + _schTmCur.setMinutes(Number(_epgProgInf_Cur.time.charAt(3) + _epgProgInf_Cur.time.charAt(4))); + + // EPG shedule정보는 인덱스 0부터 시작 + if ( _j>0 ){ + _epgProgInf_Prev = _epg_prom_info[_j-1]; + _schTmPrev.setHours(Number(_epgProgInf_Prev.time.charAt(0) + _epgProgInf_Prev.time.charAt(1))); + _schTmPrev.setMinutes(Number(_epgProgInf_Prev.time.charAt(3) + _epgProgInf_Prev.time.charAt(4))); + } + + let _t_playTotal = Math.round((_schTmCur - _schTmPrev) / 60000); //Total play time in minuate + let _t_playRemain = Math.round((_schTmCur - _tm_cur) / 60000); //Remain play time in minuate + + _rtn_epg = _epgProgInf_Cur; + if (_t_playRemain >= 0) { + //console.log("CHNAME::>" + _ch_name + " Remaining::> " + _t_playRemain); + _rtn_epg["progress_pcent"] = parseInt(((_t_playTotal-_t_playRemain)*100)/_t_playTotal, 10); + _rtn_epg["playing_time"] = `${_epgProgInf_Prev.time}~${_epgProgInf_Cur.time}`; + break; + } + } + } + return { "tm_cur": _tm_cur, "epg_info": _rtn_epg}; + } catch ( _err ) { + console.error(`fail to get epg info ${_err}`); + return { "tm_cur": _tm_cur, "epg_info": null}; } - return _rtn_epg; + } + + function __uifxn_AppFull_TVEpgFadeIn() { + let _state = HotelTV.state; + let _elDivTvChFrm = $('.main .tv .bg .chFrm'); + + _state.menu.stage.cur = "tvCtgShow"; + + if ( _elDivTvChFrm.css('display') == 'none') { + _elDivTvChFrm.fadeIn(200); + } + } + + function __uifxn_AppFull_TVEpgFadeOut() { + let _state = HotelTV.state; + const ____ifxn_fadeout_epg_div = function() { + _state.menu.stage.cur = "tvCtgHide"; + } + setTimeout(____ifxn_fadeout_epg_div); } /** - * HotelTV UI[AppFull] Wrapper Function::> TV Channel manager ui show/hide + * HotelTV UI[AppFull] Wrapper Function::> TV Channel ui show/hide manager */ function __uifxn_AppFull_TVChMngrUi() { let _state = HotelTV.state; @@ -4026,7 +4108,7 @@ HotelTV.ui_appfull = (function() { let _tm_cur = new Date(); _tm_diff_ms_tvctrl = Math.floor(_tm_cur.getTime() - _tmrEvt.keyevt.tv_ctrl.getTime()); //마지막 KEY 이벤트 수신 시간 갱신 - //console.log(`KeyDn Event Recoreded::> ${_tmrEvt.keyevt.tv_ctrl} TMDiff::> ${_tm_diff_ms}`); + //console.log(`KeyDn Event Recoreded::> ${_tmrEvt.keyevt.tv_ctrl} TMDiff::> ${_tm_diff_ms_tvctrl}`); // TV Channel UI 지속 시간 2초 if ( _state.menu.stage.cur=="tvShortcut" ) @@ -4035,23 +4117,85 @@ HotelTV.ui_appfull = (function() { } 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; - 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"; - }); + if ( _tm_diff_ms_tvctrl>=5000 ) + { + if ( _state.menu.stage.cur=="tvCtgShow" || _state.menu.stage.cur=="tvCtgHide" ) + { + let _elDivTvChFrm = $('.main .tv .bg .chFrm'); + + const ___ifxn_showTvEpgFrm = function() { + if ( _elDivTvChFrm.css('display') == 'none') { + _elDivTvChFrm.fadeIn(200); + } + } + + const ___ifxn_hideTvEpgFrm = function() { + if ( _elDivTvChFrm.css('display') != 'none') { + _elDivTvChFrm.fadeOut(500); + } + } + + if ( _state.menu.stage.cur=="tvCtgShow" ){ + //___ifxn_showTvEpgFrm(); + }else if ( _state.menu.stage.cur=="tvCtgHide" ){ + ___ifxn_hideTvEpgFrm(); + } } - } 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); + } + } + } + + /** + * HotelTV UI[AppFull] Wrapper Function::> TV shortcut ui show/hide manager + */ + function __uifxn_AppFull_TVShortcutUiMngr() { + + if (_hndl_tmrTvShortcutMngr == null) { + return; + } + + // try { + let _state = HotelTV.state; + let _mmIdx = _state.menu.main.cur; + let _programTv = HotelTV.tvguide.program[_mmIdx]; + + let _tm_cur = new Date(); + let _tm_diff_ms_tvNumBtn = Math.floor(_tm_cur.getTime() - _tmrEvt.keyevt.tv_numBtn.getTime()); + + let _elTvScutRoot = $('.main .tv .shortcut_mode0'); + + + const ___ifxn_fadeout_shortcutFrm = function() { + // TV바로가기 번호키 UI 드로잉 + if ( _elTvScutRoot.css('display') != 'none') { + _elTvScutRoot.fadeOut(500); } } - } + + if ( _tm_diff_ms_tvNumBtn > 4000 ) { + + clearInterval(_hndl_tmrTvShortcutMngr); + _hndl_tmrTvShortcutMngr = null; + + ___ifxn_fadeout_shortcutFrm(); + + if ( _programTv.shortcutkeyMode=="mode_0" ) { + if ( _state.tv.shortkey.ch_item_idx!=null ) { + const _mmIdx_tv = _state.menu.main.cur; + let _tvCtgAllIdx = _state.menu.main[_mmIdx].cur = __uifxn_AppFull_TVCtgyIdByName("all"); + let _tvChIdx = _state.menu.main[_mmIdx][_tvCtgAllIdx].cur = _state.tv.shortkey.ch_item_idx; + + _tmrEvt.keyevt.tv_ctrl = new Date(); + __uifxn_AppFull_TVUpdateChannel("on_shortcut"); + __uifxn_AppFull_TVRequestChannel(_tvCtgAllIdx, _tvChIdx, __uifxn_AppFull_TVEpgFadeIn); + } else { + __uifxn_AppFull_TVEpgFadeOut(); + } + } + } + // } catch ( _err ) { + // console.log(`Failure::> ${_err}`); + // } } /** @@ -4648,31 +4792,30 @@ HotelTV.ui_appfull = (function() { /** * HotelTV UI[AppFull] Wrapper Function::> request tv channel function + * @param {Number} _force_ctg_item_idx + * @param {Number} _force_ch_item_idx + * @param {function} _cbfxn_success + * @param {function} _cbfxn_failure */ - function __uifxn_AppFull_TVRequestChannel(_force_ctg_item_idx, _force_ch_item_idx) { + function __uifxn_AppFull_TVRequestChannel(_force_ctg_item_idx, _force_ch_item_idx, _cbfxn_success=null, _cbfxn_failure=null) { const _state = HotelTV.state; const _trTbl = HotelTV.translation; const _mmIdx_tv = _state.menu.main.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; - let _tvChInfo = _tvProg[_tvCtgIdx].channels[_tvChIdx]; - let _need_to_changeTVChannel = false; - let _tm_diff_ms = 0; + const _tvCtgyInfoAll = _program[_mmIdx_tv].categories; + let _tvChInfo = _tvCtgyInfoAll[_tvCtgIdx].channels[_tvChIdx]; + let _tm_diff_ms_TvRqt = 0; + if (_tmrEvt.tvchannel_changed == null) { _tmrEvt.tvchannel_changed = new Date(); - _need_to_changeTVChannel = true; } else { let _tm_cur = new Date(); - _tm_diff_ms = Math.floor(_tm_cur.getTime() - _tmrEvt.tvchannel_changed.getTime()); + _tm_diff_ms_TvRqt = Math.floor(_tm_cur.getTime() - _tmrEvt.tvchannel_changed.getTime()); //마지막 TV채널 변경 시간 갱신 _tmrEvt.tvchannel_changed = _tm_cur; - - if (_tm_diff_ms > 200) { - _need_to_changeTVChannel = true; - } } // 번호키로 채널 변경시 카테고리와 채널 아이탬의 인덱스 @@ -4680,95 +4823,153 @@ HotelTV.ui_appfull = (function() { //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]; + _tvChInfo = _tvCtgyInfoAll[_tvCtgIdx].channels[_tvChIdx]; + } + + if ( _tm_diff_ms_TvRqt!=0 && _tm_diff_ms_TvRqt <= 200) { + console.log(`SKIPPED::TVCTG[${_tvCtgyInfoAll[_tvCtgIdx].name}]` + + ` CUR CH IDX::>${_tvChIdx} EPGID: ${_tvChInfo.epg_id} URL::>${_tvChInfo.url} TMDIFF::>${_tm_diff_ms_TvRqt}`); + return; } + let _chReqParam = {}; + console.log(`CHANGE::TVCTG[${_tvCtgyInfoAll[_tvCtgIdx].name}]` + + ` CUR CH IDX::>${_tvChIdx} CHNAME:${_tvChInfo.name} EPGID: ${_tvChInfo.epg_id} URL::>${_tvChInfo.url} TMDIFF::>${_tm_diff_ms_TvRqt}`); + + if (_tvChInfo.type == "ptcrf") { + // RF + _chReqParam['rf'] = { + "type": _tvChInfo.RFType, + "major": _tvChInfo.majorNo, + "minor": _tvChInfo.minorNo, + "program": _tvChInfo.programNo, + "frequency": 0 + }; + + // CBFXN + _chReqParam['cbfxn'] = { + "success": _cbfxn_success, + "failure": _cbfxn_failure + }; + } else if (_tvChInfo.type == "ipstream") { + // IP STREAM URL + } else if (_tvChInfo.type == "encoder") { + // ENCODER + } + HotelTV.hcap.ChannelSetup(_tvChInfo.type, _chReqParam); + + //TODO: 아래 실제 채널 셋업 부분 주석처리 되어 있는데, IP와 RF모두 처리 할 수 있도록 구현할것 + //let _uri_stream = _tvChInfo.url.split('://@')[1]; + //let _typ_proto = _tvChInfo.url.split('://@')[0]; + //let _uri_ip = _uri_stream.split(':')[0]; + //let _uri_port = _uri_stream.split(':')[1]; + //console.log(`ip = ${_uri_ip} port=${_uri_port} protocol=${_typ_proto}`); + //HotelTV.hcap.ChannelSetup("ip", { "ip": _uri_ip, "port": Number(_uri_port), "ptype": _typ_proto }); - if (_need_to_changeTVChannel == true) { - let _chReqParam = {}; - console.log(`CHANGE::TVCTG[${_tvProg[_tvCtgIdx].name}]` + - ` CUR CH IDX::>${_tvChIdx} CHNAME:${_tvChInfo.name} EPGID: ${_tvChInfo.epg_id} URL::>${_tvChInfo.url} TMDIFF::>${_tm_diff_ms}`); + // { + // let min = Math.ceil(0); + // let max = Math.floor(16); + // let _major = Math.floor(Math.random() * (max - min + 1)) + min; + // console.log("Major=5 minor=" + _major); + // HotelTV.hcap.ChannelSetup("rf_analog_ntsc", { "major": _major, "minor": 0 }); + // } - if (_tvChInfo.type == "ptcrf") { - // RF - _chReqParam['rf'] = { - "type": _tvChInfo.RFType, - "major": _tvChInfo.majorNo, - "minor": _tvChInfo.minorNo, - "program": _tvChInfo.programNo, - "frequency": 0, - }; - } else if (_tvChInfo.type == "ipstream") { - // IP STREAM URL - } else if (_tvChInfo.type == "encoder") { - // ENCODER + HotelTV.api.ReportEvent([{ + 'power': true, + 'location':{ + 'catId':_tvCtgyInfoAll[_tvCtgIdx].id, + 'chId': _tvChInfo.id, } - HotelTV.hcap.ChannelSetup(_tvChInfo.type, _chReqParam); - - //TODO: 아래 실제 채널 셋업 부분 주석처리 되어 있는데, IP와 RF모두 처리 할 수 있도록 구현할것 - //let _uri_stream = _tvChInfo.url.split('://@')[1]; - //let _typ_proto = _tvChInfo.url.split('://@')[0]; - //let _uri_ip = _uri_stream.split(':')[0]; - //let _uri_port = _uri_stream.split(':')[1]; - //console.log(`ip = ${_uri_ip} port=${_uri_port} protocol=${_typ_proto}`); - //HotelTV.hcap.ChannelSetup("ip", { "ip": _uri_ip, "port": Number(_uri_port), "ptype": _typ_proto }); - - - // { - // let min = Math.ceil(0); - // let max = Math.floor(16); - // let _major = Math.floor(Math.random() * (max - min + 1)) + min; - // console.log("Major=5 minor=" + _major); - // HotelTV.hcap.ChannelSetup("rf_analog_ntsc", { "major": _major, "minor": 0 }); - // } - - HotelTV.api.ReportEvent([{ - 'power': true, - 'location':{ - 'catId':_tvProg[_tvCtgIdx].id, - 'chId': _tvChInfo.id, - } - }]) - } else { - console.log(`SKIPPED::TVCTG[${_tvProg[_tvCtgIdx].name}]` + - ` CUR CH IDX::>${_tvChIdx} EPGID: ${_tvChInfo.epg_id} URL::>${_tvChInfo.url} TMDIFF::>${_tm_diff_ms}`); - } + }]) } - /** - * HotelTV UI[AppFull] Wrapper Function::> build tv channel shortcut list - * @param {string} _action parameter - */ - function __uifxn_AppFull_TVDrawShortCutList(_show, _action, _keyCode) { + function __uifxn_AppFull_TVDrawShortcutKey_Mode0(_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; + let _tvCtgyInfoAll = _program[_mmIdx].categories; + let _tvCtgyAllChannels = null; - const __ifxn_getTvCtgAllId = function() { - for (let _ctgidx = 1; _ctgidx <= _tvProg.length; _ctgidx++) { - if ( _tvProg[_ctgidx].name=="all" ){ - return _ctgidx; - } - } - // ALL채널의 디폴트 인덱스번호는 1이라고 간주 - return 1; + const __ifxn_getChItemValue = function(_object, _key) { + return _object[_key]; } - const __ifxn_getTvIdxByChnumber = function(_dic_channel, _ch_num) { - for (let _ctgidx = 1; _ctgidx <= _tvProg.length; _ctgidx++) { - if ( _tvProg[_ctgidx].name=="all" ){ - return _ctgidx; + const __ifxn_getChItemIdxByNumber = function(_chNum) { + for (let _kk = 1; _kk <= _tvCtgyAllChannels.length; _kk++) { + if ( _tvCtgyAllChannels[_kk].number==_chNum ){ + return _kk; } } - // ALL채널의 디폴트 인덱스번호는 1이라고 간주 - return 1; } + + try { + let _strReqNumCur = ""; + let _strReqNumNext = ""; + let _elTvScutRoot = $('.main .tv .shortcut_mode0'); + + // ALL 카테고리 TV채널 정보 가져오기 + _tvCtgyAllChannels = _tvCtgyInfoAll[__uifxn_AppFull_TVCtgyIdByName("all")].channels; + + if ( _elTvScutRoot.css('display') == 'none') { + _elTvScutRoot.text(""); + _elTvScutRoot.fadeIn(200); + + if (_hndl_tmrTvShortcutMngr == null) { + _hndl_tmrTvShortcutMngr = setInterval(__uifxn_AppFull_TVShortcutUiMngr, 500); + console.log("TMR(TVChMngrShortcutUiMngr)::>Created..."); + } + } else { + //_strReqNumCur = Array.from(_elTvScutRoot.text()); + _strReqNumCur = _elTvScutRoot.text(); + } + + if ( _strReqNumCur.length<3 ){ + _state.tv.shortkey.ch_item_idx = null; + + _strReqNumNext = _strReqNumCur + gRmKeyCode2Num[_keyCode]; + _elTvScutRoot.text(_strReqNumNext); + + for (let _idx = 1; _idx <= _tvCtgyAllChannels.length; _idx++) + { + let _ChItem = _tvCtgyAllChannels[_idx]; + // _chNumber는 -기준으로 잘라낸 앞숫자, 예를들면 16-1이라면 _chNumber는 16이 됨. + let _ChNumber = __ifxn_getChItemValue(_ChItem, "number").toString().split('-'); + + // Find out matched channel + if ( Number(_ChNumber)==Number(_strReqNumNext) ){ + // Find out + _state.tv.shortkey.ch_item_idx = Number(__ifxn_getChItemIdxByNumber(_strReqNumNext)); + console.log("Find out matched channel index(of ALL category)::> " + _state.tv.shortkey.ch_item_idx); + break; + } + } + } else { + // + } + + } catch ( _err ) { + console.log(`Failure::> ${_err}`); + } + } + + /** + * HotelTV UI[AppFull] Wrapper Function::> build tv channel shortcut list(MODE1) + * @param {boolean} _show flag for show/hide shortcut mode1 popup + * @param {string} _action actions; build, move, exitWidthoutChchange, exitWidthChchage + * @param {Number} _keyCode key event key code + */ + function __uifxn_AppFull_TVDrawShortcutKey_Mode1(_show, _action, _keyCode) { + let _state = HotelTV.state; + let _mmIdx = _state.menu.main.cur; + let _trTbl = HotelTV.translation; + let _program = HotelTV.tvguide.program; + let _tvCtgyInfoAll = _program[_mmIdx].categories; + let _tvCtgyAllChannels = null; + const __ifxn_getChItemValue = function(_object, _key) { return _object[_key]; } @@ -4777,9 +4978,9 @@ HotelTV.ui_appfull = (function() { let _state = HotelTV.state; let _mmIdx = _state.menu.main.cur; - for (let _ctgidx = 1; _ctgidx <= _tvProg.length; _ctgidx++) { + for (let _ctgidx = 1; _ctgidx <= _tvCtgyInfoAll.length; _ctgidx++) { let _matched_ch_idx=null; - let _ch_info = _tvProg[_ctgidx].channels; + let _ch_info = _tvCtgyInfoAll[_ctgidx].channels; // 해당 카테고리의 채널 인덱스 찾기 for (let _chidx = 1; _chidx <= _ch_info.length; _chidx++) { if ( _ch_info[_chidx].number.toString()==_ch_number ){ @@ -4791,20 +4992,7 @@ HotelTV.ui_appfull = (function() { - - - - // 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 _elTvScutRoot = $('.main .tv .shortcut_mode1'); let _elTvScutSugesstion = _elTvScutRoot.children('#suggestion'); let _elTvScutChlistTbl = _elTvScutSugesstion.children('.ch_list'); let _elTvScutChlistRecord = _elTvScutChlistTbl.children('tbody'); @@ -4812,21 +5000,8 @@ HotelTV.ui_appfull = (function() { // 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[__ifxn_getTvCtgAllId()].channels; + _tvCtgyAllChannels = _tvCtgyInfoAll[__uifxn_AppFull_TVCtgyIdByName("all")].channels; try { let first_item = true; @@ -4841,11 +5016,11 @@ HotelTV.ui_appfull = (function() { "ch_item_idx": 1, }; - for (let _idx = 1; _idx <= _tvChitemAll.length; _idx++) + for (let _idx = 1; _idx <= _tvCtgyAllChannels.length; _idx++) { - let _ChItem = _tvChitemAll[_idx]; + let _ChItem = _tvCtgyAllChannels[_idx]; - if ( __ifxn_getChItemValue(_ChItem, "number").toString().includes( _tbl_keycode_to_num[_keyCode].toString())==true ) + if ( __ifxn_getChItemValue(_ChItem, "number").toString().includes( gRmKeyCode2Num[_keyCode].toString())==true ) { var _elTr_ChtmesRec = document.createElement('tr'); var _elDiv_ChItmesRec = document.createElement('div'); @@ -4913,7 +5088,7 @@ HotelTV.ui_appfull = (function() { } // 채널 요청 - __uifxn_AppFull_TVRequestChannel(__ifxn_getTvCtgAllId(), _state.tv.shortkey.ch_item_idx); + __uifxn_AppFull_TVRequestChannel(__uifxn_AppFull_TVCtgyIdByName("all"), _state.tv.shortkey.ch_item_idx); if ( _elTvScutRoot.css('display') != 'none') { _elTvScutRoot.fadeOut(500); @@ -4930,7 +5105,6 @@ HotelTV.ui_appfull = (function() { _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")); __ifxn_updateLastChIdxState(selectedTblItem.children(".scitem").children("#num").text()); @@ -4948,7 +5122,6 @@ HotelTV.ui_appfull = (function() { _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")); __ifxn_updateLastChIdxState(selectedTblItem.children(".scitem").children("#num").text()); @@ -4969,67 +5142,58 @@ HotelTV.ui_appfull = (function() { * HotelTV UI[AppFull] Wrapper Function::> update tv channel list within selected tv category * @param {string} _action parameter */ - function __uifxn_AppFull_TVUpdateChList(_action) { + function __uifxn_AppFull_TVUpdateChannel(_action) { const _state = HotelTV.state; 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 tv_chElIdx = Number(_tvChIdx) - 1; //엘리멘트 인덱스(0베이스) + const _tvChInfo = HotelTV.tvguide.program[_mmIdx_tv].categories[_tvCtgIdx].channels[_tvChIdx]; - //CENTER로 마킹된 엘리멘트 가져오기 - let _hndlOwlCtrEl = $('.main .tv .bg .owl-carousel .owl-stage-outer .owl-item.center'); - if (_hndlOwlCtrEl.length == 1) { - //현재 ACTIVATED(CENTER)된 OWL로부터 tvctgfrm_xxx과 같은 아이디 가져오기 - let _targetChListId = $(_hndlOwlCtrEl.find(".item")).attr('id'); - //_targetChListId는 tvctgfrm_xxxx와 같은 형식임 - let _el_target = $('#' + _targetChListId + ' .tvctg_chlist'); - 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(null, null); - }); - _el_target.each(function(index, item) { - $($(item).children()[tv_chElIdx]).addClass("focused"); - }); - _state.menu.stage.cur = "tvCtgShow"; - console.log("1st time ...."); - } - } 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(null, null); - }); - } else { - __uifxn_AppFull_TVRequestChannel(null, null); - } + let _trTbl = HotelTV.translation; + let _elDivTvChFrm = $('.main .tv .bg .chFrm'); + let _elDivTvChLogo = _elDivTvChFrm.find('.chLogo').children('#icon'); + let _elDivTvChNum = _elDivTvChFrm.find('.chNum').children('#number'); + let _elDivTvChDesc = _elDivTvChFrm.find('.chDesc'); + let _elDivTvChEpgName = _elDivTvChDesc.find('#epg_chname'); + let _elDivTvChEpgTitle = _elDivTvChDesc.find('#epg_title'); + let _elDivTvChEpgDetails = _elDivTvChDesc.find('#epg_details'); + let _egp_prog_inf = null; - _el_target.each(function(index, item) { - $($(item).children()[tv_chElIdx + 1]).removeClass("focused"); - $($(item).children()[tv_chElIdx]).addClass("focused"); - }); - } 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(null, null); - }); - } else { - __uifxn_AppFull_TVRequestChannel(null, null); - } - _el_target.each(function(index, item) { - $($(item).children()[tv_chElIdx - 1]).removeClass("focused"); - $($(item).children()[tv_chElIdx]).addClass("focused"); - }); - } - } else { - console.log("ERROR::> No centered Item"); + + //Update channel logo image + _elDivTvChLogo.css({ "background-image": "url(" + _tvChInfo.logo.file.download + ")" }); + + //Update channel number + _elDivTvChNum.text(_tvChInfo.number); + + //Update channel description + _elDivTvChEpgName.text(_tvChInfo.name); + _egp_prog_inf = __uifxn_AppFull_TVEpgByChName(_tvChInfo.epg); + _elDivTvChEpgDetails.find('#tm_current').text(_trTbl.ui.tv.epg.datetime[_state.lang] + _egp_prog_inf.tm_cur.getHours() + ":" + _egp_prog_inf.tm_cur.getMinutes() ); + if (_egp_prog_inf.epg_info != null) { + _elDivTvChEpgTitle.text(_egp_prog_inf.epg_info.name); + _elDivTvChEpgDetails.find('#tm_playing').text(_trTbl.ui.tv.epg.progamtime[_state.lang] + _egp_prog_inf.epg_info.playing_time); + + //let _new_progress_bar_width = parseInt(_elDivTvChEpgDetails.find("#tm_chart").width()*_egp_prog_inf.epg_info.progress_pcent/100); + let _new_progress_bar_width = parseInt(835*_egp_prog_inf.epg_info.progress_pcent/100); + _elDivTvChEpgDetails.find('.progress').width(_new_progress_bar_width); } - // Shortcut key 팝업 지우기 - // 채널 리스트에서 팝업을 빨리 띄우는 경우, 바로가기 팝업이 사라지지 않고 남아 있는 이슈 workaround - let _elTvScutRoot = $('.main .tv .shortcut'); - if ( _elTvScutRoot.css('display') != 'none') { - _elTvScutRoot.fadeOut(500); + // Fade in epg + __uifxn_AppFull_TVEpgFadeIn(); + + if (_action == "on_load") { + //_state.menu.stage.cur = "tvCtgShow"; + // TODO: Request Channel + } else if (_action == "ch_up") { + // TODO: Request Channel + } else if (_action == "ch_down") { + // TODO: Request Channel + } else if ( _action=="on_shortcut" ) { + // } + + __uifxn_AppFull_TVRequestChannel(null, null, __uifxn_AppFull_TVEpgFadeOut, __uifxn_AppFull_TVEpgFadeOut); } /** @@ -5611,8 +5775,8 @@ HotelTV.ui_appfull = (function() { 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 _programTv = HotelTV.tvguide.program[_mmIdx]; + let _tvCtgyInfoAll = _programTv.categories; const __ifxn_exitTvMenu = function() { // 현재 재생중인 TV채널 종료 @@ -5624,6 +5788,12 @@ HotelTV.ui_appfull = (function() { console.log("TMR::>Destoried..."); } + if (_hndl_tmrTvShortcutMngr != null) { + clearInterval(_hndl_tmrTvShortcutMngr); + _hndl_tmrTvShortcutMngr = null; + console.log("TMR::>Destoried..."); + } + // 메인 메뉴로 귀환 $(document.activeElement).off('keydown'); $('.main .mm').show(function() { @@ -5631,15 +5801,15 @@ HotelTV.ui_appfull = (function() { }); $('.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_tvCtgyFrm').off('refresh.owl.carousel'); + $('#lst_tvCtgyFrm').off('change.owl.carousel'); + $('#lst_tvCtgyFrm').off('changed.owl.carousel'); + $('#lst_tvCtgyFrm').off('translated.owl.carousel'); - $('#lst_tvCtgbg').owlCarousel('destroy'); + $('#lst_tvCtgyFrm').owlCarousel('destroy'); - $('.main .tv .bg #lst_tvCtgbg div').remove(); - _hndl_tvCtg = null; + $('.main .tv .bg #lst_tvCtgyFrm div').remove(); + _hndl_tvCtgyFrm = null; _state.menu.stage.cur = "main"; setTimeout(function() { @@ -5649,27 +5819,32 @@ HotelTV.ui_appfull = (function() { }); } - const __ifxn_moveTvChannel = function(_tvProgram, _action) { + const __ifxn_moveTvChannel = function(_tvCtgyDataAll, _action) { let _mmIdx = _state.menu.main.cur; let _curChCtg = _state.menu.main[_mmIdx].cur; + let _curChCntInCtg = Number(_state.menu.main[_mmIdx][_curChCtg].cnt); 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 { + _curChIdx = _curChCntInCtg; } + _state.menu.main[_mmIdx][_curChCtg].cur = _curChIdx.toString(); + console.log(`TVCTG[${_tvCtgyDataAll[_curChCtg].name}] CUR CH::>${_state.menu.main[_mmIdx][_curChCtg].cur}`); + + __uifxn_AppFull_TVUpdateChannel("ch_up"); }else if ( _action=="ch_down" ) { - if ((_curChIdx + 1) <= Number(_state.menu.main[_mmIdx][_curChCtg].cnt)) { + if ((_curChIdx + 1) <= _curChCntInCtg) { _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"); + } else { + _curChIdx = 1; } + _state.menu.main[_mmIdx][_curChCtg].cur = _curChIdx.toString(); + console.log(`TVCTG[${_tvCtgyDataAll[_curChCtg].name}] CUR CH::>${_state.menu.main[_mmIdx][_curChCtg].cur}`); + + __uifxn_AppFull_TVUpdateChannel("ch_down"); } } @@ -5684,113 +5859,61 @@ HotelTV.ui_appfull = (function() { 'prev': null, //마지막 TV카테고리 }; // TV Program category 개수 - _state.menu.main[_mmIdx].cnt = _tvProg.length; + _state.menu.main[_mmIdx].cnt = _tvCtgyInfoAll.length; } // state내의 tv shortcut key관련 상태값 초기화및 화면 숨김 + // mode_0에서는 ch_item_idx를 null로하고, mode_1에서는 ch_item_idx를 1로 초기화함. _state.tv.shortkey = { "idx": "1", "scroll_offset": 0, "ch_item_idx": 1, }; - $('.main .tv .shortcut').hide(); + + if ( _programTv.shortcutkeyMode=="mode_0" ) { + _state.tv.shortkey.ch_item_idx = null; + } // 초기 메인 메뉴 KEY설정 _state.menu.stage.cur = "tvPreparing"; if (_state.menu.main[_mmIdx].cur == null) { - _state.menu.main[_mmIdx].cur = Object.keys(_tvProg)[0]; + _state.menu.main[_mmIdx].cur = Object.keys(_tvCtgyInfoAll)[0]; // 각 채널 카테고리별 채널 개수 및 이전 시청 채널 과 현재 시청 채널 정보 초기화 - //for (let _tvCtg_item in _tvProg) { - for (let _i = 1; _i <= _tvProg.length; _i++) { + for (let _i = 1; _i <= _tvCtgyInfoAll.length; _i++) { _state.menu.main[_mmIdx][_i] = { 'cnt': 0, 'cur': null, 'prev': null, }; - _state.menu.main[_mmIdx][_i].cnt = _tvProg[_i].channels.length; - _state.menu.main[_mmIdx][_i].cur = Object.keys(_tvProg[_i].channels)[0]; + _state.menu.main[_mmIdx][_i].cnt = _tvCtgyInfoAll[_i].channels.length; + _state.menu.main[_mmIdx][_i].cur = Object.keys(_tvCtgyInfoAll[_i].channels)[0]; } } // TV 메뉴 카테고리 노드를 동적으로 구성 - let _div_tvCgh_bglist = document.querySelector('#lst_tvCtgbg'); - for (let _tvCtg_idx = 1; _tvCtg_idx <= _tvProg.length; _tvCtg_idx++) { - let _tvCtgInfo = _tvProg[_tvCtg_idx]; + let _div_tvCgh_bglist = document.querySelector('#lst_tvCtgyFrm'); + for (let _tvCtg_idx = 1; _tvCtg_idx <= _tvCtgyInfoAll.length; _tvCtg_idx++) { + let _tvCtgItem = _tvCtgyInfoAll[_tvCtg_idx]; let _div_tvCtg_frame = document.createElement('div'); let _sz_styleOpt = null; // TV 메뉴 카테고리 노드를 동적으로 구성 _div_tvCtg_frame.className = 'item'; - _div_tvCtg_frame.id = 'tvctgfrm_' + _tvCtgInfo.name.replace(/\s/g, '').toLowerCase(); + _div_tvCtg_frame.id = 'tvctgfrm_' + _tvCtgItem.name.replace(/\s/g, '').toLowerCase(); _div_tvCtg_frame.setAttribute("tvctgidx", _tvCtg_idx); // TV 카테고리 타이틀 let _div_tvCtg_title = document.createElement('div'); _div_tvCtg_title.setAttribute("id", "tvctg_title"); - _div_tvCtg_title.textContent = _trTbl.ui.tv.title.category[_tvCtgInfo.name][_state.lang]; + _div_tvCtg_title.textContent = _trTbl.ui.tv.title.category[_tvCtgItem.name][_state.lang]; _div_tvCtg_frame.appendChild(_div_tvCtg_title); - // ADD Upper Arrow - let _div_tvCtg_arUp = document.createElement('div'); - _div_tvCtg_arUp.setAttribute("id", "tvctg_arrow_up"); - _div_tvCtg_frame.appendChild(_div_tvCtg_arUp); - - // TV CHANNEL LIST LIST UNDER Given TV CATEGORY - let _div_tv_chlist = document.createElement('div'); - _div_tv_chlist.setAttribute("class", "tvctg_chlist"); - - for (let _tvCh_idx = 1; _tvCh_idx <= _tvCtgInfo.channels.length; _tvCh_idx++) { - let _tvChInfo = _tvCtgInfo.channels[_tvCh_idx]; - let _div_tv_chframe = document.createElement('div'); - _div_tv_chframe.setAttribute("class", "tvch_item_frame"); - _div_tv_chframe.setAttribute("idx", _tvCh_idx); - _div_tv_chframe.setAttribute("ch_num", _tvChInfo.number); - - let _div_tv_chepg = document.createElement('div'); - _div_tv_chepg.setAttribute("class", "tvch_epg"); - - let _span_tv_chtitle = document.createElement('span'); - _span_tv_chtitle.setAttribute("id", "tvch_epg_title"); - _span_tv_chtitle.textContent = _tvChInfo.title[_state.lang]; - _span_tv_chtitle.setAttribute("ch_num", "CH:" + _tvChInfo.number + "]"); - _div_tv_chepg.appendChild(_span_tv_chtitle); - - let _span_tv_chepginfo = document.createElement('span'); - _span_tv_chepginfo.setAttribute("id", "tvch_epg_info"); - _span_tv_chepginfo.setAttribute("epg_id", _tvChInfo.epg); - let _egp_prog_inf = __uifxn_AppFull_GetEpgInfoById(_tvChInfo.epg); - if (_egp_prog_inf != null) { - _span_tv_chepginfo.textContent = _egp_prog_inf.name; - } - _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 + "); "; - _sz_styleOpt += "background-repeat: no-repeat; background-position: center center; background-size: 100%; "; - _div_tv_chlogo.setAttribute("style", _sz_styleOpt); - _div_tv_chframe.appendChild(_div_tv_chlogo); - - - _div_tv_chlist.appendChild(_div_tv_chframe); - } - _div_tvCtg_frame.appendChild(_div_tv_chlist); - - // ADD Down Arrow - let _div_tvCtg_arDn = document.createElement('div'); - _div_tvCtg_arDn.setAttribute("id", "tvctg_arrow_down"); - _div_tvCtg_frame.appendChild(_div_tvCtg_arDn); - //TV 카테고리 프레임 엘리멘트에 Child엘레멘트 추가 _div_tvCgh_bglist.appendChild(_div_tvCtg_frame); } - _hndl_tvCtg = $('#lst_tvCtgbg'); + _hndl_tvCtgyFrm = $('#lst_tvCtgyFrm'); //owlCarousel을 초기화 하기 전에 등록해야할 callback 함수들 //initialized.owl.carousel같은 이벤트는 생성하기 전에 등록해야함. @@ -5802,13 +5925,14 @@ HotelTV.ui_appfull = (function() { //[5]refresh //[6]translate - _hndl_tvCtg.owlCarousel({ + _hndl_tvCtgyFrm.owlCarousel({ center: true, items: 1, //Number of Items on Screen what you want loop: true, margin: 0, nav: true, dots: false, + autoWidth:false, smartSpeed: 100, lazyLoad: true, mouseDrag: false, @@ -5820,26 +5944,28 @@ HotelTV.ui_appfull = (function() { $('.main .tv .bg').show(function() { $('.main .mm').fadeOut(1000); $('.main').animate({ top: -1080, left: 0 }, 1000, function() { - // Create Timer handle for channel guide ui show/hide + // Create Timer handle for TV EPG OSD & Shortcut key popup show/hide if (_hndl_tmrTvChnMngr == null) { _hndl_tmrTvChnMngr = setInterval(__uifxn_AppFull_TVChMngrUi, 500); - console.log("TMR::>Created..."); + console.log("TMR(TVChMngrUi)::>Created..."); } - $('#lst_tvCtgbg').trigger('translated.owl.carousel', [0]); + $('#lst_tvCtgyFrm').trigger('translated.owl.carousel', [0]); $(document.activeElement).keydown(function(event) { //attach event listener if (_state.menu.stage.cur == "tvCtgShow") { if (event.keyCode == gRmtKey.left) { - $('#lst_tvCtgbg').trigger('prev.owl', [1000]) + // TODO:: mode_0에서 카테고리 ALL만 사용, 향후 다른 카테고리도 사용할수 있는 방안 모색 + //$('#lst_tvCtgyFrm').trigger('prev.owl', [1000]) } else if (event.keyCode == gRmtKey.right) { - $('#lst_tvCtgbg').trigger('next.owl', [1000]) + // TODO:: mode_0에서 카테고리 ALL만 사용, 향후 다른 카테고리도 사용할수 있는 방안 모색 + //$('#lst_tvCtgyFrm').trigger('next.owl', [1000]) } else if (event.keyCode == gRmtKey.up || event.keyCode == gRmtKey.chup) { // 채널 리스트 아이탬 이동(UP) - __ifxn_moveTvChannel(_tvProg, "ch_up"); + __ifxn_moveTvChannel(_tvCtgyInfoAll, "ch_up"); } else if (event.keyCode == gRmtKey.down || event.keyCode == gRmtKey.chdown) { // 채널 리스트 아이탬 이동(DOWN) - __ifxn_moveTvChannel(_tvProg, "ch_down"); + __ifxn_moveTvChannel(_tvCtgyInfoAll, "ch_down"); } else if (event.keyCode == gRmtKey.enter) { // TV채널 플레이 } else if (event.keyCode == gRmtKey.back) { @@ -5847,26 +5973,40 @@ HotelTV.ui_appfull = (function() { __ifxn_exitTvMenu(); } else if ( __uifxn_Utils_CheckKeyisNumber(event.keyCode)==true ){ //Navigate TV shortcut lists - if ( __uifxn_AppFull_TVDrawShortCutList(true, "build", event.keyCode)==0 ){ - _state.menu.stage.prev = _state.menu.stage.cur; + if ( _programTv.shortcutkeyMode=="mode_0" ) { _state.menu.stage.cur = "tvShortcut"; + __uifxn_AppFull_TVDrawShortcutKey_Mode0(event.keyCode); + } else if ( _programTv.shortcutkeyMode=="mode_1" ) { + if ( __uifxn_AppFull_TVDrawShortcutKey_Mode1(true, "build", event.keyCode)==0 ){ + _state.menu.stage.prev = _state.menu.stage.cur; + _state.menu.stage.cur = "tvShortcut"; + } } } } else if (_state.menu.stage.cur == "tvCtgHide") { - if (event.keyCode == gRmtKey.up || event.keyCode == gRmtKey.chup) { + if (event.keyCode == gRmtKey.left) { + $('#lst_tvCtgyFrm').trigger('prev.owl', [1000]) + } else if (event.keyCode == gRmtKey.right) { + $('#lst_tvCtgyFrm').trigger('next.owl', [1000]) + } else if (event.keyCode == gRmtKey.up || event.keyCode == gRmtKey.chup) { // 채널 리스트 아이탬 이동(CHUP) - __ifxn_moveTvChannel(_tvProg, "ch_up"); + __ifxn_moveTvChannel(_tvCtgyInfoAll, "ch_up"); } else if (event.keyCode == gRmtKey.down || event.keyCode == gRmtKey.chdown) { // 채널 리스트 아이탬 이동(CHDOWN) - __ifxn_moveTvChannel(_tvProg, "ch_down"); + __ifxn_moveTvChannel(_tvCtgyInfoAll, "ch_down"); } else if (event.keyCode == gRmtKey.back) { // TV 메뉴를 종료하고 메인 메뉴로 이동 __ifxn_exitTvMenu(); } else if ( __uifxn_Utils_CheckKeyisNumber(event.keyCode)==true ) { //Navigate TV shortcut lists - if ( __uifxn_AppFull_TVDrawShortCutList(true, "build", event.keyCode)==0 ){ - _state.menu.stage.prev = _state.menu.stage.cur; + if ( _programTv.shortcutkeyMode=="mode_0" ) { _state.menu.stage.cur = "tvShortcut"; + __uifxn_AppFull_TVDrawShortcutKey_Mode0(event.keyCode); + } else if ( _programTv.shortcutkeyMode=="mode_1" ) { + if ( __uifxn_AppFull_TVDrawShortcutKey_Mode1(true, "build", event.keyCode)==0 ){ + _state.menu.stage.prev = _state.menu.stage.cur; + _state.menu.stage.cur = "tvShortcut"; + } } } else { console.log("event.keyCode::>" + event.keyCode); @@ -5874,21 +6014,36 @@ HotelTV.ui_appfull = (function() { } else if (_state.menu.stage.cur == "tvShortcut") { // console.log("TV shortcut routine: key:" + event.keyCode); if (event.keyCode == gRmtKey.back) { - // TV 메뉴를 종료하고 메인 메뉴로 이동 - //__ifxn_exitTvMenu(); - __uifxn_AppFull_TVDrawShortCutList(false, "exitWithoutChchange", event.keyCode); + // TV메뉴로 복귀 + if ( _programTv.shortcutkeyMode=="mode_0" ) { + // + } else if ( _programTv.shortcutkeyMode=="mode_1" ) { + __uifxn_AppFull_TVDrawShortcutKey_Mode1(false, "exitWithoutChchange", 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, "exitWithChchange", event.keyCode); + if ( _programTv.shortcutkeyMode=="mode_0" ) { + // + } else if ( _programTv.shortcutkeyMode=="mode_1" ) { + __uifxn_AppFull_TVDrawShortcutKey_Mode1(false, "exitWithChchange", event.keyCode); + } _state.menu.stage.cur = _state.menu.stage.prev; _state.menu.stage.prev = null; _tmrEvt.keyevt.tv_ctrl = new Date(); _tmrEvt.keyevt.tv_ctrl.setSeconds(_tmrEvt.keyevt.tv_ctrl.getSeconds() - 3); + } else if ( __uifxn_Utils_CheckKeyisNumber(event.keyCode)==true ) { + if ( _programTv.shortcutkeyMode=="mode_0" ) { + __uifxn_AppFull_TVDrawShortcutKey_Mode0(event.keyCode); + } } else { - __uifxn_AppFull_TVDrawShortCutList(true, "move", event.keyCode); + if ( _programTv.shortcutkeyMode=="mode_0" ) { + // + } else if ( _programTv.shortcutkeyMode=="mode_1" ) { + __uifxn_AppFull_TVDrawShortcutKey_Mode1(true, "move", event.keyCode); + } console.log("TVSHORTCUT CHNUM: " + _state.tv.shortkey.ch_item_idx); } } else { @@ -5898,42 +6053,42 @@ HotelTV.ui_appfull = (function() { }); }); - $('#lst_tvCtgbg').on('translated.owl.carousel', function(event) { - __uifxn_AppFull_TVUpdateChList("on_load"); - HotelTV.ui_utils.ShowNotificationMsgBalloon(_trTbl.ui.guide.navi_tvcategory[_state.lang], 10); + $('#lst_tvCtgyFrm').on('translated.owl.carousel', function(event) { + __uifxn_AppFull_TVUpdateChannel("on_load"); + // HotelTV.ui_utils.ShowNotificationMsgBalloon(_trTbl.ui.guide.navi_tvcategory[_state.lang], 10); }); - $('#lst_tvCtgbg').on('changed.owl.carousel', function(event) { + $('#lst_tvCtgyFrm').on('changed.owl.carousel', function(event) { // Update HotelTV sub menu status let _state = HotelTV.state; let _mmIdx = _state.menu.main.cur; - let _hndlOwlEl = $('.main .tv .bg .owl-carousel .owl-stage-outer .owl-item'); + let _hndlOwlEl = $('.main .tv .bg .owl-carousel#lst_tvCtgyFrm .owl-stage-outer .owl-item'); let _acvatedEl = null; - let _curChListEl = null; - let _curChCtg = null; + let _curChCtgyIdx = null; let _bHasValidData = false; if (_hndlOwlEl) { _acvatedEl = $(_hndlOwlEl.children()[event.item.index]); if (_acvatedEl) { - _curChListEl = _acvatedEl.find(".tvctg_chlist"); - if (_curChListEl) { - _curChCtg = _acvatedEl.attr('tvctgidx'); - _bHasValidData = true; - } + _curChCtgyIdx = _acvatedEl.attr('tvctgidx'); } } - if (_bHasValidData != true) { - return; - } + + // if (_bHasValidData != true) { + // return; + // } + // 현재 채널 카테고리 인덱스 갱신 _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); + _state.menu.main[_mmIdx].cur = _curChCtgyIdx; + console.log("CHANGED TV CATEGORY::> CURRENT TV CTG IDX::> " + _curChCtgyIdx); }); } + /** + * HotelTV UI[AppFull] Wrapper Function::> Buildup language selector popup menu + */ function __uifxn_AppFull_Build_LangSel() { let _state = HotelTV.state; let _trTbl = HotelTV.translation; @@ -6061,7 +6216,7 @@ HotelTV.ui_appfull = (function() { let _newsInfo = HotelTV.news; let _trTbl = HotelTV.translation; - let _tm_diff_ms = 0; + let _tm_diff_ms_guibar = 0; if (_tmrEvt.keyevt.last == null) { _tmrEvt.keyevt.last = new Date(); @@ -6070,9 +6225,9 @@ HotelTV.ui_appfull = (function() { } let _tm_cur = new Date(); - _tm_diff_ms = Math.floor(_tm_cur.getTime() - _tmrEvt.keyevt.last.getTime()); + _tm_diff_ms_guibar = Math.floor(_tm_cur.getTime() - _tmrEvt.keyevt.last.getTime()); //마지막 KEY 이벤트 수신 시간 갱신 - //console.log(`KeyDn Event Recoreded::> ${_tmrEvt.keyevt.last} TMDiff::> ${_tm_diff_ms}`); + //console.log(`KeyDn Event Recoreded::> ${_tmrEvt.keyevt.last} TMDiff::> ${_tm_diff_ms_guibar}`); if (_state.menu.stage.cur == "mypage_popup_message_card") { //HIDE NEWS and USER GUIDE TIPS @@ -6090,11 +6245,12 @@ HotelTV.ui_appfull = (function() { // 가이드 UI 지속 시간 8초 if (_state.media.playing == false) { - if (_tm_diff_ms < 8000) + if (_tm_diff_ms_guibar < 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", "tvCtgHide", "mypage_select_menu"]; + // Check needed shows up bottom user guide, update user guide sentance. if (show_stages.includes(_state.menu.stage.cur) == true) { const ___ifxn_updateGuideMsg = function(_szMsg) { if ($('.guide>.tips').attr("value") != _szMsg) { @@ -6102,6 +6258,7 @@ HotelTV.ui_appfull = (function() { $('.guide>.tips').html(_szMsg); } } + switch (_state.menu.stage.cur) { case "hotkey_mm_red": ___ifxn_updateGuideMsg(_trTbl.ui.guide.navi_brochure[_state.lang]); @@ -6173,7 +6330,7 @@ HotelTV.ui_appfull = (function() { } else { if ( _state.menu.stage.cur=="tvCtgShow" || _state.menu.stage.cur=="tvCtgHide" ) { - + } else { @@ -6810,7 +6967,7 @@ HotelTV.ui_appfull = (function() { $('.main .mm .slider').fadeIn(500, function() { if (_hndl_tmrUgMngr == null) { _hndl_tmrUgMngr = setInterval(__uifxn_AppFull_GuideBarUiMngr, 1000); - console.log("TMR::>Created..."); + console.log("TMR(GuideBarUiMngr)::>Created..."); } $('.main .mm .slider .owl-item').addClass('unfocus'); $('#lst_mmsel').trigger("to.owl.carousel", [0, 10, true]); @@ -7463,7 +7620,7 @@ HotelTV.ui_appfull = (function() { let _el_epg_items = $(_item[_idx]).find('span#tvch_epg_info') _el_epg_items.each(function(_j, _ch) { let _epg_id = _ch.attr('epg_id'); - let _epg_inf = __uifxn_AppFull_GetEpgInfoById(_epg_id); + let _epg_inf = __uifxn_AppFull_TVEpgByChName(_epg_id); if (_epg_inf != null) { _ch.text(_egp_prog_inf.name); } else { diff --git a/procentric/application/theme/HIM00001/hoteltv.app.full.tv.css b/procentric/application/theme/HIM00001/hoteltv.app.full.tv.css index 6c145e4..ba68b6d 100755 --- a/procentric/application/theme/HIM00001/hoteltv.app.full.tv.css +++ b/procentric/application/theme/HIM00001/hoteltv.app.full.tv.css @@ -17,147 +17,248 @@ height: 100%; padding: 0px; background: url(tv:); + /* background: url(https://cropper.watch.aetnd.com/public-content-aetn.video.aetnd.com/video-thumbnails/AETN-History_VMS/21/200/tdih-jun01-HD.jpg); */ overflow: hidden; display: none; } -.main .tv .bg div#lst_tvCtgbg { +/************************************************************/ +/* TV CATEGORY FRAME STYLE [ START ] */ +/************************************************************/ +.main .tv .bg #lst_tvCtgyFrm { + position: relative; + top: 0%; + left: 37%; + max-width: 26%; + width: 26%; + height: 50px; + margin: 0; + padding: 0; + /* background-color: red; */ + overflow: hidden; +} + +.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer { width: 100%; height: 100%; margin: 0; padding: 0; } -.main .tv .bg .owl-carousel .owl-stage-outer { - width: 780px; - height: 100%; - margin: 0; - padding: 0; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage { +.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage{ width: 100%; - height: 100%; + height: 50px; margin: 0; padding: 0; } -.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item .item { - position: absolute; - top: 116px; - /* left: 80px; - width: 1840px; */ - height: 844px; - margin: 20px 20px 20px 20px; - padding: 5px 20px 5px 20px; - background-color: rgba(0, 0, 0, 0.4); - filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); +.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage .owl-item .item { + background-color: rgba(0, 0, 0, 0.4); */ + /* filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); */ border: solid rgb(137, 139, 129); - border-radius: 10px; + /* border-radius: 10px; */ /* background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(120, 120, 120, 0.7) 70%, rgba(0, 0, 0, 0.7) 85%); */ + /* border-color: rgba(230,230,230,0.3) transparent transparent transparent; */ + /* border-width: 50px 50px 0 0; */ + /* box-sizing: border-box; */ overflow: hidden; } -.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_title { - line-height: 100px; - padding: 0; - margin: 0 0 10px 0; - font-size: 80px; - color: rgb(235, 235, 235); - white-space: nowrap; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist { - max-width: 680px; - height: 640px; - font-size: 32px; - overflow: hidden; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame { - height: 110px; - margin: 10px 0 10px 0; - z-index: 1; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame .tvch_epg { - float: left; - margin: 0 0 0 186px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused .tvch_epg { - margin: 0 0 0 210px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title { - font-size: 32px; - width: 468px; - color: rgb(255, 255, 255); - border-bottom: solid; - border-bottom-color: rgba(94, 90, 86, 0.8); - white-space: nowrap; - display: block; - overflow: hidden; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_epg_title { - border-bottom-color: rgb(181, 218, 16); - color: rgb(181, 218, 16); +.main .tv .bg #lst_tvCtgyFrm .item #tvctg_title { + line-height: 50px; + /* padding: 0 0 0 10px; */ + /* margin: 0 0 0px 10px; */ font-size: 40px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title::before { - content: attr(ch_num); - font-size: 32px; - text-align: left; - margin: 20px 10px 0 0; - padding: 0 5px 0 5px; - color: rgb(10, 10, 10); - background-color: rgba(210, 210, 210, 1); - text-shadow: 0 0 5px rgba(68, 68, 68, 1), 0 0 20px rgba(10, 175, 230, 0); - border-radius: 5px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_info { + text-align: center; + vertical-align: middle; color: rgb(235, 235, 235); + white-space: nowrap; + display: none; +} +/************************************************************/ +/* TV CATEGORY FRAME STYLE [ END ] */ +/************************************************************/ + + +/************************************************************/ +/* TV CHANNEL FRAME STYLE [ START ] */ +/************************************************************/ +.main .tv .bg .chFrm { + position: absolute; + top: 82%; + left: 0 px; + width: 100%; + height: 134px; + margin: 0; + padding: 0; + color: rgba(245,245,245,1.0); + background-color: rgba(0,0,0,0.8); + display: flex; + overflow: hidden; } -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_logo { - width: 176px; - height: 110px; - background-color: rgba(255, 255, 255, 1); +.main .tv .bg .chFrm .chLogo { + width: 15%; + height: 100%; + margin: 0; + padding: 10px 10px 10px 10px; +} + +.main .tv .bg .chFrm .chLogo #icon{ + width: 100%; + height: 100%; + margin: 0; + padding: 0; + background-repeat: no-repeat; + background-color: rgba(255,255,255,1); + background-size: contain; + background-repeat: no-repeat; + background-position: center center; border-radius: 10px; + border: 2px solid rgb(67, 82, 105); } -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_logo { - border: solid rgb(181, 218, 16); - transform: scale(1.14); - transform-origin: 2% 48%; - z-index: 2; +.main .tv .bg .chFrm .chNum { + width: 10%; + height: 100%; + margin: 0; + padding: 0; } -.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_up { - width: 30px; - height: 30px; - margin: 10px 0 0 70px; +.main .tv .bg .chFrm .chNum #arrow_up{ + padding: 0; + width: 22px; + height: 22px; + margin: 10px 0 0 86px; transform: rotate(-45deg) skew(15deg, 15deg); border-top: 5px #fff solid; border-right: 5px #fff solid; + /* text-align: center; */ + display: block; } -.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_down { - width: 30px; - height: 30px; - margin: 10px 0 0 70px; +.main .tv .bg .chFrm .chNum #number{ + width: 100%; + height: 48%; + margin: 0; + padding: 0; + line-height: 64px; + font-size: 48px; + text-align: center; + vertical-align: middle; + display: block; + /* background-color: red; */ +} + +.main .tv .bg .chFrm .chNum #arrow_down{ + width: 22px; + height: 22px; + margin: 0px 0 0 86px; transform: rotate(135deg) skew(15deg, 15deg); border-top: 5px #fff solid; border-right: 5px #fff solid; + display: block; } -/*************************/ -/* STYLE for TV Shortcut */ -/*************************/ -.main .tv .shortcut { +.main .tv .bg .chFrm .chDesc { + width: 75%; + height: 100%; + margin: 0; + padding: 5px 0px 5px 0px; +} + +.main .tv .bg .chFrm .chDesc #epg_chname{ + width: 100%; + height: 34px; + line-height: 34px; + font-size: 30px; + margin: 0; + padding: 0; +} + +.main .tv .bg .chFrm .chDesc #epg_title{ + width: 100%; + height: 60px; + line-height: 60px; + font-size: 50px; + margin: 0; + padding: 0; + white-space: nowrap; + overflow: hidden; +} + +.main .tv .bg .chFrm .chDesc #epg_details{ + width: 100%; + height: 28px; + margin: 0; + padding: 0; + display: flex; + line-height: 28px; + font-size: 20px; + overflow: hidden; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_current{ + width: 20%; + height: 100%; + margin: 0; + padding: 0; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_playing{ + width: 20%; + height: 100%; + margin: 0; + padding: 0; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_chart{ + width: 58%; + height: 86%; + margin: 0; + padding: 0; + background-color: rgba(80,80,80,0.8); + border-radius: 10px; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_chart .progress{ + margin: 5px 5px 0px 5px; + /* padding: 14px 0px 0px 0px; */ + height: 14px; + /* vertical-align: middle; */ + background-color: rgba(245,245,245,0.8); + border-radius: 10px; +} + +/************************************************************/ +/* TV CHANNEL FRAME STYLE [ END ] */ +/************************************************************/ + +/************************************************************/ +/* TV SHORTCUT STYLE [ START ] */ +/************************************************************/ +.main .tv .shortcut_mode0 { + position: absolute; + top: 1%; + left: 87%; + width: 12%; + height: 72px; + /* background: rgba(0, 0, 0, 0.7); */ + /* background-color: red; */ + background-color: rgba(0, 0, 0, 0.8); + padding: 0px 0px 0px 0px; + border-top: 5px solid rgb(40, 40, 40); + border-bottom: 5px solid rgb(40, 40, 40); + display: none; + font-size: 52px; + line-height: 62px; + color: rgb(245,245,245); + text-align: center; + display: none; +} + + +.main .tv .shortcut_mode1 { position: absolute; top: 18%; left: 75%; @@ -167,22 +268,23 @@ 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); + display: none; } -.main .tv .shortcut div#suggestion { +.main .tv .shortcut_mode1 div#suggestion { position: absolute; width: 100%; height: 84%; } -.main .tv .shortcut div#suggestion table { +.main .tv .shortcut_mode1 div#suggestion table { width: 100%; height: 100%; /* padding: 3px 0px 3px 0px; */ border-collapse: collapse; } -.main .tv .shortcut .ch_list>#record { +.main .tv .shortcut_mode1 .ch_list>#record { position: absolute; width: 100%; height: 100%; @@ -191,7 +293,7 @@ padding: 14px 0px 0px 0px; } -.main .tv .shortcut .ch_list>#record tr { +.main .tv .shortcut_mode1 .ch_list>#record tr { width: 96%; display: block; float: left; @@ -200,20 +302,20 @@ border-top: 1px solid rgb(67, 82, 105); } -.main .tv .shortcut .ch_list>#record tr.active { +.main .tv .shortcut_mode1 .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 { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem { font-size: 40px; line-height: 1; width: 100%; } -.main .tv .shortcut .ch_list>#record tr>.scitem>#logo { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#logo { width: 24%; height: 40px; /* height: 100%; */ @@ -227,7 +329,7 @@ /* margin: 1%; */ } -.main .tv .shortcut .ch_list>#record tr>.scitem>#num { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#num { width: 18%; float: left; text-align: center; @@ -235,7 +337,7 @@ overflow: hidden; } -.main .tv .shortcut .ch_list>#record tr>.scitem>#title { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#title { width: 54%; float: left; text-align: center; @@ -244,3 +346,7 @@ overflow: hidden; /* margin: 4px 0px 1px 0px; */ } + +/************************************************************/ +/* TV SHORTCUT STYLE [ END ] */ +/************************************************************/ \ No newline at end of file diff --git a/procentric/application/theme/HJS00001/hoteltv.app.full.tv.css b/procentric/application/theme/HJS00001/hoteltv.app.full.tv.css index 6c145e4..ba68b6d 100755 --- a/procentric/application/theme/HJS00001/hoteltv.app.full.tv.css +++ b/procentric/application/theme/HJS00001/hoteltv.app.full.tv.css @@ -17,147 +17,248 @@ height: 100%; padding: 0px; background: url(tv:); + /* background: url(https://cropper.watch.aetnd.com/public-content-aetn.video.aetnd.com/video-thumbnails/AETN-History_VMS/21/200/tdih-jun01-HD.jpg); */ overflow: hidden; display: none; } -.main .tv .bg div#lst_tvCtgbg { +/************************************************************/ +/* TV CATEGORY FRAME STYLE [ START ] */ +/************************************************************/ +.main .tv .bg #lst_tvCtgyFrm { + position: relative; + top: 0%; + left: 37%; + max-width: 26%; + width: 26%; + height: 50px; + margin: 0; + padding: 0; + /* background-color: red; */ + overflow: hidden; +} + +.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer { width: 100%; height: 100%; margin: 0; padding: 0; } -.main .tv .bg .owl-carousel .owl-stage-outer { - width: 780px; - height: 100%; - margin: 0; - padding: 0; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage { +.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage{ width: 100%; - height: 100%; + height: 50px; margin: 0; padding: 0; } -.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item .item { - position: absolute; - top: 116px; - /* left: 80px; - width: 1840px; */ - height: 844px; - margin: 20px 20px 20px 20px; - padding: 5px 20px 5px 20px; - background-color: rgba(0, 0, 0, 0.4); - filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); +.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage .owl-item .item { + background-color: rgba(0, 0, 0, 0.4); */ + /* filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); */ border: solid rgb(137, 139, 129); - border-radius: 10px; + /* border-radius: 10px; */ /* background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(120, 120, 120, 0.7) 70%, rgba(0, 0, 0, 0.7) 85%); */ + /* border-color: rgba(230,230,230,0.3) transparent transparent transparent; */ + /* border-width: 50px 50px 0 0; */ + /* box-sizing: border-box; */ overflow: hidden; } -.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_title { - line-height: 100px; - padding: 0; - margin: 0 0 10px 0; - font-size: 80px; - color: rgb(235, 235, 235); - white-space: nowrap; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist { - max-width: 680px; - height: 640px; - font-size: 32px; - overflow: hidden; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame { - height: 110px; - margin: 10px 0 10px 0; - z-index: 1; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame .tvch_epg { - float: left; - margin: 0 0 0 186px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused .tvch_epg { - margin: 0 0 0 210px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title { - font-size: 32px; - width: 468px; - color: rgb(255, 255, 255); - border-bottom: solid; - border-bottom-color: rgba(94, 90, 86, 0.8); - white-space: nowrap; - display: block; - overflow: hidden; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_epg_title { - border-bottom-color: rgb(181, 218, 16); - color: rgb(181, 218, 16); +.main .tv .bg #lst_tvCtgyFrm .item #tvctg_title { + line-height: 50px; + /* padding: 0 0 0 10px; */ + /* margin: 0 0 0px 10px; */ font-size: 40px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title::before { - content: attr(ch_num); - font-size: 32px; - text-align: left; - margin: 20px 10px 0 0; - padding: 0 5px 0 5px; - color: rgb(10, 10, 10); - background-color: rgba(210, 210, 210, 1); - text-shadow: 0 0 5px rgba(68, 68, 68, 1), 0 0 20px rgba(10, 175, 230, 0); - border-radius: 5px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_info { + text-align: center; + vertical-align: middle; color: rgb(235, 235, 235); + white-space: nowrap; + display: none; +} +/************************************************************/ +/* TV CATEGORY FRAME STYLE [ END ] */ +/************************************************************/ + + +/************************************************************/ +/* TV CHANNEL FRAME STYLE [ START ] */ +/************************************************************/ +.main .tv .bg .chFrm { + position: absolute; + top: 82%; + left: 0 px; + width: 100%; + height: 134px; + margin: 0; + padding: 0; + color: rgba(245,245,245,1.0); + background-color: rgba(0,0,0,0.8); + display: flex; + overflow: hidden; } -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_logo { - width: 176px; - height: 110px; - background-color: rgba(255, 255, 255, 1); +.main .tv .bg .chFrm .chLogo { + width: 15%; + height: 100%; + margin: 0; + padding: 10px 10px 10px 10px; +} + +.main .tv .bg .chFrm .chLogo #icon{ + width: 100%; + height: 100%; + margin: 0; + padding: 0; + background-repeat: no-repeat; + background-color: rgba(255,255,255,1); + background-size: contain; + background-repeat: no-repeat; + background-position: center center; border-radius: 10px; + border: 2px solid rgb(67, 82, 105); } -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_logo { - border: solid rgb(181, 218, 16); - transform: scale(1.14); - transform-origin: 2% 48%; - z-index: 2; +.main .tv .bg .chFrm .chNum { + width: 10%; + height: 100%; + margin: 0; + padding: 0; } -.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_up { - width: 30px; - height: 30px; - margin: 10px 0 0 70px; +.main .tv .bg .chFrm .chNum #arrow_up{ + padding: 0; + width: 22px; + height: 22px; + margin: 10px 0 0 86px; transform: rotate(-45deg) skew(15deg, 15deg); border-top: 5px #fff solid; border-right: 5px #fff solid; + /* text-align: center; */ + display: block; } -.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_down { - width: 30px; - height: 30px; - margin: 10px 0 0 70px; +.main .tv .bg .chFrm .chNum #number{ + width: 100%; + height: 48%; + margin: 0; + padding: 0; + line-height: 64px; + font-size: 48px; + text-align: center; + vertical-align: middle; + display: block; + /* background-color: red; */ +} + +.main .tv .bg .chFrm .chNum #arrow_down{ + width: 22px; + height: 22px; + margin: 0px 0 0 86px; transform: rotate(135deg) skew(15deg, 15deg); border-top: 5px #fff solid; border-right: 5px #fff solid; + display: block; } -/*************************/ -/* STYLE for TV Shortcut */ -/*************************/ -.main .tv .shortcut { +.main .tv .bg .chFrm .chDesc { + width: 75%; + height: 100%; + margin: 0; + padding: 5px 0px 5px 0px; +} + +.main .tv .bg .chFrm .chDesc #epg_chname{ + width: 100%; + height: 34px; + line-height: 34px; + font-size: 30px; + margin: 0; + padding: 0; +} + +.main .tv .bg .chFrm .chDesc #epg_title{ + width: 100%; + height: 60px; + line-height: 60px; + font-size: 50px; + margin: 0; + padding: 0; + white-space: nowrap; + overflow: hidden; +} + +.main .tv .bg .chFrm .chDesc #epg_details{ + width: 100%; + height: 28px; + margin: 0; + padding: 0; + display: flex; + line-height: 28px; + font-size: 20px; + overflow: hidden; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_current{ + width: 20%; + height: 100%; + margin: 0; + padding: 0; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_playing{ + width: 20%; + height: 100%; + margin: 0; + padding: 0; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_chart{ + width: 58%; + height: 86%; + margin: 0; + padding: 0; + background-color: rgba(80,80,80,0.8); + border-radius: 10px; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_chart .progress{ + margin: 5px 5px 0px 5px; + /* padding: 14px 0px 0px 0px; */ + height: 14px; + /* vertical-align: middle; */ + background-color: rgba(245,245,245,0.8); + border-radius: 10px; +} + +/************************************************************/ +/* TV CHANNEL FRAME STYLE [ END ] */ +/************************************************************/ + +/************************************************************/ +/* TV SHORTCUT STYLE [ START ] */ +/************************************************************/ +.main .tv .shortcut_mode0 { + position: absolute; + top: 1%; + left: 87%; + width: 12%; + height: 72px; + /* background: rgba(0, 0, 0, 0.7); */ + /* background-color: red; */ + background-color: rgba(0, 0, 0, 0.8); + padding: 0px 0px 0px 0px; + border-top: 5px solid rgb(40, 40, 40); + border-bottom: 5px solid rgb(40, 40, 40); + display: none; + font-size: 52px; + line-height: 62px; + color: rgb(245,245,245); + text-align: center; + display: none; +} + + +.main .tv .shortcut_mode1 { position: absolute; top: 18%; left: 75%; @@ -167,22 +268,23 @@ 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); + display: none; } -.main .tv .shortcut div#suggestion { +.main .tv .shortcut_mode1 div#suggestion { position: absolute; width: 100%; height: 84%; } -.main .tv .shortcut div#suggestion table { +.main .tv .shortcut_mode1 div#suggestion table { width: 100%; height: 100%; /* padding: 3px 0px 3px 0px; */ border-collapse: collapse; } -.main .tv .shortcut .ch_list>#record { +.main .tv .shortcut_mode1 .ch_list>#record { position: absolute; width: 100%; height: 100%; @@ -191,7 +293,7 @@ padding: 14px 0px 0px 0px; } -.main .tv .shortcut .ch_list>#record tr { +.main .tv .shortcut_mode1 .ch_list>#record tr { width: 96%; display: block; float: left; @@ -200,20 +302,20 @@ border-top: 1px solid rgb(67, 82, 105); } -.main .tv .shortcut .ch_list>#record tr.active { +.main .tv .shortcut_mode1 .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 { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem { font-size: 40px; line-height: 1; width: 100%; } -.main .tv .shortcut .ch_list>#record tr>.scitem>#logo { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#logo { width: 24%; height: 40px; /* height: 100%; */ @@ -227,7 +329,7 @@ /* margin: 1%; */ } -.main .tv .shortcut .ch_list>#record tr>.scitem>#num { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#num { width: 18%; float: left; text-align: center; @@ -235,7 +337,7 @@ overflow: hidden; } -.main .tv .shortcut .ch_list>#record tr>.scitem>#title { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#title { width: 54%; float: left; text-align: center; @@ -244,3 +346,7 @@ overflow: hidden; /* margin: 4px 0px 1px 0px; */ } + +/************************************************************/ +/* TV SHORTCUT STYLE [ END ] */ +/************************************************************/ \ No newline at end of file diff --git a/procentric/application/theme/HTL00001/hoteltv.app.full.tv.css b/procentric/application/theme/HTL00001/hoteltv.app.full.tv.css index 6c145e4..ba68b6d 100755 --- a/procentric/application/theme/HTL00001/hoteltv.app.full.tv.css +++ b/procentric/application/theme/HTL00001/hoteltv.app.full.tv.css @@ -17,147 +17,248 @@ height: 100%; padding: 0px; background: url(tv:); + /* background: url(https://cropper.watch.aetnd.com/public-content-aetn.video.aetnd.com/video-thumbnails/AETN-History_VMS/21/200/tdih-jun01-HD.jpg); */ overflow: hidden; display: none; } -.main .tv .bg div#lst_tvCtgbg { +/************************************************************/ +/* TV CATEGORY FRAME STYLE [ START ] */ +/************************************************************/ +.main .tv .bg #lst_tvCtgyFrm { + position: relative; + top: 0%; + left: 37%; + max-width: 26%; + width: 26%; + height: 50px; + margin: 0; + padding: 0; + /* background-color: red; */ + overflow: hidden; +} + +.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer { width: 100%; height: 100%; margin: 0; padding: 0; } -.main .tv .bg .owl-carousel .owl-stage-outer { - width: 780px; - height: 100%; - margin: 0; - padding: 0; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage { +.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage{ width: 100%; - height: 100%; + height: 50px; margin: 0; padding: 0; } -.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item .item { - position: absolute; - top: 116px; - /* left: 80px; - width: 1840px; */ - height: 844px; - margin: 20px 20px 20px 20px; - padding: 5px 20px 5px 20px; - background-color: rgba(0, 0, 0, 0.4); - filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); +.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage .owl-item .item { + background-color: rgba(0, 0, 0, 0.4); */ + /* filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); */ border: solid rgb(137, 139, 129); - border-radius: 10px; + /* border-radius: 10px; */ /* background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(120, 120, 120, 0.7) 70%, rgba(0, 0, 0, 0.7) 85%); */ + /* border-color: rgba(230,230,230,0.3) transparent transparent transparent; */ + /* border-width: 50px 50px 0 0; */ + /* box-sizing: border-box; */ overflow: hidden; } -.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_title { - line-height: 100px; - padding: 0; - margin: 0 0 10px 0; - font-size: 80px; - color: rgb(235, 235, 235); - white-space: nowrap; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist { - max-width: 680px; - height: 640px; - font-size: 32px; - overflow: hidden; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame { - height: 110px; - margin: 10px 0 10px 0; - z-index: 1; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame .tvch_epg { - float: left; - margin: 0 0 0 186px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused .tvch_epg { - margin: 0 0 0 210px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title { - font-size: 32px; - width: 468px; - color: rgb(255, 255, 255); - border-bottom: solid; - border-bottom-color: rgba(94, 90, 86, 0.8); - white-space: nowrap; - display: block; - overflow: hidden; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_epg_title { - border-bottom-color: rgb(181, 218, 16); - color: rgb(181, 218, 16); +.main .tv .bg #lst_tvCtgyFrm .item #tvctg_title { + line-height: 50px; + /* padding: 0 0 0 10px; */ + /* margin: 0 0 0px 10px; */ font-size: 40px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title::before { - content: attr(ch_num); - font-size: 32px; - text-align: left; - margin: 20px 10px 0 0; - padding: 0 5px 0 5px; - color: rgb(10, 10, 10); - background-color: rgba(210, 210, 210, 1); - text-shadow: 0 0 5px rgba(68, 68, 68, 1), 0 0 20px rgba(10, 175, 230, 0); - border-radius: 5px; -} - -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_info { + text-align: center; + vertical-align: middle; color: rgb(235, 235, 235); + white-space: nowrap; + display: none; +} +/************************************************************/ +/* TV CATEGORY FRAME STYLE [ END ] */ +/************************************************************/ + + +/************************************************************/ +/* TV CHANNEL FRAME STYLE [ START ] */ +/************************************************************/ +.main .tv .bg .chFrm { + position: absolute; + top: 82%; + left: 0 px; + width: 100%; + height: 134px; + margin: 0; + padding: 0; + color: rgba(245,245,245,1.0); + background-color: rgba(0,0,0,0.8); + display: flex; + overflow: hidden; } -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_logo { - width: 176px; - height: 110px; - background-color: rgba(255, 255, 255, 1); +.main .tv .bg .chFrm .chLogo { + width: 15%; + height: 100%; + margin: 0; + padding: 10px 10px 10px 10px; +} + +.main .tv .bg .chFrm .chLogo #icon{ + width: 100%; + height: 100%; + margin: 0; + padding: 0; + background-repeat: no-repeat; + background-color: rgba(255,255,255,1); + background-size: contain; + background-repeat: no-repeat; + background-position: center center; border-radius: 10px; + border: 2px solid rgb(67, 82, 105); } -.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_logo { - border: solid rgb(181, 218, 16); - transform: scale(1.14); - transform-origin: 2% 48%; - z-index: 2; +.main .tv .bg .chFrm .chNum { + width: 10%; + height: 100%; + margin: 0; + padding: 0; } -.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_up { - width: 30px; - height: 30px; - margin: 10px 0 0 70px; +.main .tv .bg .chFrm .chNum #arrow_up{ + padding: 0; + width: 22px; + height: 22px; + margin: 10px 0 0 86px; transform: rotate(-45deg) skew(15deg, 15deg); border-top: 5px #fff solid; border-right: 5px #fff solid; + /* text-align: center; */ + display: block; } -.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_down { - width: 30px; - height: 30px; - margin: 10px 0 0 70px; +.main .tv .bg .chFrm .chNum #number{ + width: 100%; + height: 48%; + margin: 0; + padding: 0; + line-height: 64px; + font-size: 48px; + text-align: center; + vertical-align: middle; + display: block; + /* background-color: red; */ +} + +.main .tv .bg .chFrm .chNum #arrow_down{ + width: 22px; + height: 22px; + margin: 0px 0 0 86px; transform: rotate(135deg) skew(15deg, 15deg); border-top: 5px #fff solid; border-right: 5px #fff solid; + display: block; } -/*************************/ -/* STYLE for TV Shortcut */ -/*************************/ -.main .tv .shortcut { +.main .tv .bg .chFrm .chDesc { + width: 75%; + height: 100%; + margin: 0; + padding: 5px 0px 5px 0px; +} + +.main .tv .bg .chFrm .chDesc #epg_chname{ + width: 100%; + height: 34px; + line-height: 34px; + font-size: 30px; + margin: 0; + padding: 0; +} + +.main .tv .bg .chFrm .chDesc #epg_title{ + width: 100%; + height: 60px; + line-height: 60px; + font-size: 50px; + margin: 0; + padding: 0; + white-space: nowrap; + overflow: hidden; +} + +.main .tv .bg .chFrm .chDesc #epg_details{ + width: 100%; + height: 28px; + margin: 0; + padding: 0; + display: flex; + line-height: 28px; + font-size: 20px; + overflow: hidden; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_current{ + width: 20%; + height: 100%; + margin: 0; + padding: 0; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_playing{ + width: 20%; + height: 100%; + margin: 0; + padding: 0; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_chart{ + width: 58%; + height: 86%; + margin: 0; + padding: 0; + background-color: rgba(80,80,80,0.8); + border-radius: 10px; +} + +.main .tv .bg .chFrm .chDesc #epg_details #tm_chart .progress{ + margin: 5px 5px 0px 5px; + /* padding: 14px 0px 0px 0px; */ + height: 14px; + /* vertical-align: middle; */ + background-color: rgba(245,245,245,0.8); + border-radius: 10px; +} + +/************************************************************/ +/* TV CHANNEL FRAME STYLE [ END ] */ +/************************************************************/ + +/************************************************************/ +/* TV SHORTCUT STYLE [ START ] */ +/************************************************************/ +.main .tv .shortcut_mode0 { + position: absolute; + top: 1%; + left: 87%; + width: 12%; + height: 72px; + /* background: rgba(0, 0, 0, 0.7); */ + /* background-color: red; */ + background-color: rgba(0, 0, 0, 0.8); + padding: 0px 0px 0px 0px; + border-top: 5px solid rgb(40, 40, 40); + border-bottom: 5px solid rgb(40, 40, 40); + display: none; + font-size: 52px; + line-height: 62px; + color: rgb(245,245,245); + text-align: center; + display: none; +} + + +.main .tv .shortcut_mode1 { position: absolute; top: 18%; left: 75%; @@ -167,22 +268,23 @@ 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); + display: none; } -.main .tv .shortcut div#suggestion { +.main .tv .shortcut_mode1 div#suggestion { position: absolute; width: 100%; height: 84%; } -.main .tv .shortcut div#suggestion table { +.main .tv .shortcut_mode1 div#suggestion table { width: 100%; height: 100%; /* padding: 3px 0px 3px 0px; */ border-collapse: collapse; } -.main .tv .shortcut .ch_list>#record { +.main .tv .shortcut_mode1 .ch_list>#record { position: absolute; width: 100%; height: 100%; @@ -191,7 +293,7 @@ padding: 14px 0px 0px 0px; } -.main .tv .shortcut .ch_list>#record tr { +.main .tv .shortcut_mode1 .ch_list>#record tr { width: 96%; display: block; float: left; @@ -200,20 +302,20 @@ border-top: 1px solid rgb(67, 82, 105); } -.main .tv .shortcut .ch_list>#record tr.active { +.main .tv .shortcut_mode1 .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 { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem { font-size: 40px; line-height: 1; width: 100%; } -.main .tv .shortcut .ch_list>#record tr>.scitem>#logo { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#logo { width: 24%; height: 40px; /* height: 100%; */ @@ -227,7 +329,7 @@ /* margin: 1%; */ } -.main .tv .shortcut .ch_list>#record tr>.scitem>#num { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#num { width: 18%; float: left; text-align: center; @@ -235,7 +337,7 @@ overflow: hidden; } -.main .tv .shortcut .ch_list>#record tr>.scitem>#title { +.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#title { width: 54%; float: left; text-align: center; @@ -244,3 +346,7 @@ overflow: hidden; /* margin: 4px 0px 1px 0px; */ } + +/************************************************************/ +/* TV SHORTCUT STYLE [ END ] */ +/************************************************************/ \ No newline at end of file diff --git a/procentric/application/theme/hoteltv.ui_utils.css b/procentric/application/theme/hoteltv.ui_utils.css index 91a3e19..c0c78b7 100755 --- a/procentric/application/theme/hoteltv.ui_utils.css +++ b/procentric/application/theme/hoteltv.ui_utils.css @@ -7,6 +7,7 @@ padding: 0px; /* background-image: url(./images/hoteltv_service_preparing.png); */ background-image: url(/procentric/application/images/hoteltv_service_preparing_joson.jpg); + /* background-image: url(/procentric/application/images/hoteltv_service_preparing.png); */ background-size: cover; background-repeat: no-repeat; } @@ -140,4 +141,4 @@ overflow-wrap: break-word; word-wrap: break-word; display: none; -} \ No newline at end of file +}