Maui-widget는 기존에 MayUHD-widget 이 고도화된 Widget Library 이며, Redlab에서 개발되고 있는 차세대 양방향 하이브리드 OTT 에서 등록해서 사용할 수 있는 Library 입니다.
-
Import
-
html import
<script src="https://cdn.jsdelivr.net/npm/[email protected]/maui-widget.min.js"></script> <!-- OR --> <script src="https://cdn.jsdelivr.net/npm/may-widget" type="text/javascript"></script> <!-- OR --> <script src="maui-widget.js"></script>
-
ECMA6
// your index.js import mauiWidget from 'maui-widget'
-
-
Methods
-
addEventListener(type:string, callback:fcuntion)
/** * keyDown Event */ $mw.addEventListener("keydown", function (e) { }); /** * keyUp Event */ $mw.addEventListener("keyup", function (e) { }); /** * Video Play */ $mw.addEventListener('video.play', function () { }); /** * Video Error */ $mw.addEventListener('video.error', function () { }); /** * Video Eended / finish */ $mw.addEventListener('video.finish', function () { });
-
removeEventListener(type:string, callback:fcuntion)
-
video
- videoPlay(url:string)
- videoStop
- videoResume
- videoPause
- videoGetCurrentTime(callback:function)
- videoSetCurrentTime
- videoGetDuration(callback:function)
/** * Video Play * @param {string} url */ $mw.videoPlay('http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'); /** * Video Pause */ $mw.videoPause(); /** * Video Resume */ $mw.videoResume(); /** * Video Stop */ $mw.videoStop(); /** * Get Current Time Video * @param {function} time callback */ $mw.videoGetCurrentTime(function (time) { console.log('video time', time); }); /** * Set Current Time Video * @param {number} set duration */ $mw.videoSetCurrentTime(50); /** * Get Duration Video * @param {function} duration - time */ $mw.getDuration(function (duration) { console.log('video duration', duration); })
-
Device
-
getDeviceInfo
$mw.getDeviceInfo(function (data) { console.log(data) });
//result { "sn" : "", "network" : { "mac" : "", "mac_wifi" : "", "gatway" : "", "dns" : "", "ip_lan" : "" } }
-
-
User Certification(사용자 인증)
-
userCertification
// mac, callback $mw.userCertification(user.network.mac, function (data) { console.log(data.login) })
-
-
keyboard에 event 로 받을 수 있는 type은 keydown, keyup 2가지가 있습니다. 또한 W3C 규격으로 keyBoard Event 를 받을 수 있습니다.
현재는 maui.js(고도화 된 라이브러리) 또는 mayuhd-driver.js 받아 Project 에 import 해서 사용할 수 있습니다. document, window에 직접 Event Listener 를 추가하는 것은 Error 가 인식이 안되는 현상이 있습니다.
-
KeyEvent 등록 방법
-
MayUHD / maui
$mw.addEventListener("keydown", function (e) { const keyCode = e.keyCode; console.log(keyCode); }); $mw.addEventListener("keyup", function (e) { const keyCode = e.keyCode; console.log(keyCode); });
-
-
리모컨 지원항목
-
HiTV
Key 기능 key code MEDIA_RED확장 기능을 사용할 경우 사용183MEDIA_GREEN확장 기능을 사용할 경우 사용184MEDIA_YELLO확장 기능을 사용할 경우 사용185MEDIA_BLUE확장 기능을 사용할 경우 사용186BACK 뒤로가기 27 DPAD_UP 위 38 DPAD_LEFT 왼쪽 37 OK 확인(Enter) 13 DPAD_RIGHT 오른쪽 39 DPAD_DOWN 아래 40 NUMBER_1 숫자 1 49 NUMBER_2 숫자 2 50 NUMBER_3 숫자 3 51 NUMBER_4 숫자 4 52 NUMBER_5 숫자 5 53 NUMBER_6 숫자 6 54 NUMBER_7 숫자 7 55 NUMBER_8 숫자 8 56 NUMBER_9 숫자 9 57 NUMBER_0 숫자 0 48 BACKSPACE backspace 27
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: rgba(0, 0, 0, .7);
padding: 0;
margin: 0;
}
#box-container {
display: block;
padding: 0;
margin: 0;
}
#box-container>.box {
text-align: center;
align-items: center;
float: left;
height: 300px;
width: 33%;
padding: 20px;
font-size: 12rem;
padding: 0;
margin: 0;
}
.box.focus {
color: white;
}
</style>
</head>
<body>
<div id="box-container">
</div>
<script src="https://cdn.jsdelivr.net/npm/may-widget/maui-widget.min.js" type="text/javascript"></script>
<script>
(function () {
const b = document.getElementById('box-container');
const max = 9;
var index = 0;
for (var i = 0; i < max; i++) {
var box = document.createElement('DIV');
box.className = 'box';
box.innerText = i;
box.style = 'background-color:' + ('#' + Math.random().toString(16).substr(-6));
b.appendChild(box);
}
b.childNodes[index + 1].setAttribute('class', 'box focus');
function moveBoxByIndex(keyCode) {
if (keyCode < 37 || keyCode > 40) {
return index;
}
b.childNodes[index + 1].setAttribute('class', 'box');
if (keyCode === 37) {
index -= 1;
} else if (keyCode === 38) {
index -= 3;
} else if (keyCode === 39) {
index += 1;
} else if (keyCode === 40) {
index += 3;
}
if (index < 0) {
index = 0;
} else if (index >= max) {
index = max - 1;
}
b.childNodes[index + 1].setAttribute('class', 'box focus');
return index;
}
$mw.addEventListener("keydown", function (e) {
const keyCode = e.keyCode;
moveBoxByIndex(keyCode);
});
$mw.addEventListener("keyup", function (e) {
const keyCode = e.keyCode;
});
}());
</script>
</body>
</html>
-
widget 에서 keyboard, video control
-
device info 가져오기
-
$MayUHD -> $maui 로 변경
-
video duration 가져오기 및 비디오 에 미흡한 기능 추가
-
8VSB, QAM 재생
-
package.json 추가 기능 정리
Launcher 에서 Widget App 을 실행하는데 기본 셋팅이며, 기본적으로 npm, package.json(https://docs.npmjs.com/files/package.jsonpacakge.json) 규격에 따릅니다.
package.json 신규 추가 항목
-
widgetType-
type : string -
Values구분비고pagefull screen web app 이며, Menu 항목 또는 관리자(방송국)에서 설정할 경우, Launcher 가 실행 하자마자 maui(May-UI) 대신 실행할 수 있도록 할 수 있다.channel-web-appLive 방송 Channel 항목에 방송 대신 web app 이 full screen 으로 표시할 수 있다. 예를 들어 300번 채널에 VOD 광고 widget 을 추가하고 싶을 경우, 300 번을 설정후 channel-web-app 으로 package.json 에 입력하면 된다.windowTV ticker 방식으로 화면에 노출되는 기능
-
-
userPermission-
type : string-array
-
Values구분비고videoVideo(IP)를 control(play, pause, resume, stop, currentTime, duration) 한다.8VSB8VSB 방송을 control 한다.QAMQAM 방송을 control 한다.settingOTT에 Setting 을 가져오거나 설정한다.deviceInfodevice 에 sn, mac 정보들을 가져온다. -
keyEventstype : integer-arrayValues : https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
-
runPatternwidgetType 중 window 만 해당되는 기능입니다.type: stringValues
구분비고routerURLlauncher 에 현재 경로에 따라서 실행categoryHistory특정 카테고리 메뉴에 도달 했을때 실행
-
-
Example package.json{ "name": "sample-widget", "version": "0.0.1", "description": "샘플 widget project", "main": "server.js", "scripts": { "start": "node server.js" }, "author": "donghyun, kim (Redlab)", "license": "ISC", "dependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.0", "body-parser": "^1.18.2", "express": "^4.15.5" }, "devDependencies": { "nodemon": "^1.12.1" }, "homepage": "http://127.0.0.1:4000", "widgetType": "fullPage", "usePermission": [ "video", "deviceInfo" ], "keyEvents": [ 37, 38, 39, 40, 13, 27 ] }