UI Customize
This section explains how to change the UI of OvenPlayer, such as modify styles, view templates, and more.
CSS Skinning
How to change accent the color
You can easily change the color by overriding the
--op-accent-color class in your web page:1
<!doctype html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>OvenPlayer</title>
6
<style>
7
8
/* Change the accent color */
9
#player_id {
10
--op-accent-color: red;
11
}
12
13
</style>
14
</head>
15
<body>
16
17
<div id="player_id"></div>
18
19
<script src="https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js"></script>
20
<script>
21
22
// Initialize OvenPlayer
23
const player = OvenPlayer.create('player_id', {
24
sources: [
25
...
26
]
27
});
28
</script>
29
</body>
30
</html>
Copied!
How to change the style
1
ovenplayer
2
...
3
├── src/
4
│ ├── assets/
5
│ │ ├── fonts/
6
│ │ └── images/
7
│ ...
8
│ └── stylesheet/
9
│ └── ovenplayer.less
10
...
Copied!
assets/ contains the image file used as the button in OvenPlayer. And you can modify the style yourself in stylesheet/ovenplayer.less.Add and Edit a new UI
1
ovenplayer
2
...
3
├── src/
4
│ ├── js/
5
│ │ ├── api/
6
│ │ ├── utils/
7
│ │ └── view/
8
│ │ ├── components/
9
│ │ ├── engine/
10
│ │ │ ├── OvenTemplate.js
11
│ │ │ └── Templates.js
12
│ │ ├── example/
13
│ │ ├── global/
14
│ │ ├── view.js
15
│ │ └── viewTemplate.js
16
...
Copied!
The view of OvenPlayer has consisted of a template that extended OvenTemplate.
The template has a minimal life cycle starting with
onRendered() and ending with onDestroyed(), and you can set an event callback with a valid scope in the template..png?alt=media&token=f77796ed-2898-438f-abbb-5484f8ef3c07)
The top-level parent template is
view/view.js. View creates child Controls and Helpers templates. Also, Controls and Helpers create and control child templates, respectively.Through our example
TextView (view/example/textview.js), we will explain in the following part how child templates are created, controlled, and passed data by the parent template.Register a template
The OvenPlayer template has a pair of
controller and view, each named {templateName}.js and {templateName}Template.js.1
ovenplayer
2
...
3
├── src/
4
│ ├── js/
5
│ │ ├── api/
6
│ │ ├── utils/
7
│ │ └── view/
8
│ │ ├── components/
9
│ │ ├── engine/
10
│ │ ├── example/
11
│ │ │ ├── textview.js
12
│ │ │ └── textviewTemplate.js
13
...
Copied!
You need to register
view separately in Templates.We have configured
textviewTemplate.js corresponding to the view in the TextView. So you register textviewTemplate.js in view/engine/Templates.js.view/engine/Templates.js
1
import TextViewTemplate from 'view/example/textviewTemplate';
2
import ViewTemplate from 'view/viewTemplate';
3
import HelpersTemplate from 'view/components/helpers/mainTemplate';
4
...
5
6
const Templates = {
7
TextViewTemplate,
8
ViewTemplate,
9
HelpersTemplate,
10
BigButtonTemplate,
11
...
12
};
13
14
export default Templates;
Copied!
Use a template
In this part, we will show you how to create the TextView in
helpers/main.js, the top-level parent of Helpers.You import
textview.js which is controller in the TextView.view/components/helpers/main.js
1
import OvenTemplate from "view/engine/OvenTemplate";
2
import BigButton from "view/components/helpers/bigButton";
3
import MessageBox from "view/components/helpers/messageBox";
4
import CaptionViewer from "view/components/helpers/captionViewer";
5
import Spinner from "view/components/helpers/spinner";
6
//It adds a textview template for testing.
7
import TextView from 'view/example/textview';
8
...
9
10
const Helpers = function($container){
11
let bigButton = "", messageBox = "", captionViewer = "", spinner = "", textView;
12
...
13
14
const onRendered = function($current, template){
15
//It creates the TextView right after Helper is loaded on the screen.
16
textView = TextView($current, api, "Hello world. Nice to meet you.");
17
...
18
19
});
20
21
//Callback that is called when Helpers are removed in OvenPlayer.
22
const onDestroyed = function(template){
23
textView.destroy(); //When Helpers, which is the parent template, is removed, the textView is also removed.
24
25
api.off(READY, null, template);
26
api.off(PLAYER_STATE, null, template);
27
...
28
};
29
30
//The event to be used by Helpers. However, Helpers are used as a container for the template, so there are no special events.
31
const events = {
32
};
33
34
return OvenTemplate($container, "Helpers", null, events, onRendered, onDestroyed );
35
};
36
37
export default Helpers;
Copied!
The source of the
TextView is:/view/example/textview.js
1
import OvenTemplate from 'view/engine/OvenTemplate';
2
3
const TextView = function($container, api, text){
4
5
const onRendered = function($current, template){
6
};
7
8
const onDestroyed = function(template){
9
//Do nothing.
10
};
11
12
const events = {
13
"click .btn" : function(event, $current, template){
14
event.preventDefault();
15
alert("Hi!");
16
}
17
};
18
19
return OvenTemplate($container, "TextView", text events, onRendered, onDestroyed );
20
21
};
22
23
export default TextView;
Copied!
$container means the parent's element, and in onRendered(), onDestroyed(), and events(), $current means the element owned by each item./view/example/textviewTemplate.js
1
const TextViewTemplate = function(text){
2
return `<div class="textView" style="padding : 5px; background: red; position : absolute; top: 0;">` +
3
`<h3>${text}</h3>` +
4
`<button type="button" class="btn">button</button>` +
5
`</div>`;
6
};
7
8
export default TextViewTemplate;
Copied!
LikeA$
$container and $current in OvenPlayerTemplate consist of LikeA$ object.Create LikeA$ object
1
import LA$ from 'utils/likeA#x27;;
2
...
3
4
let $player = LA$("#player");
Copied!
Search element
1
$player.find(".textView');
Copied!
Access element
1
$player.find(".textView').get();
Copied!
Edit CSS
1
$player.find(".textView').css("color", "#d9d9d9");
Copied!
Please check
/utils/likeA$.js for more information. This is slightly more inconvenient than jquery but enough to control OvenPlayer.Build and Run
1
npm run watch
Copied!
You can see the added TextView by building OvenPlayer and running
dist/development/ index.html.
Test run screen
In this way, you can add a new UI or customize the template.
Last modified 3mo ago