Hi all, I am wondering if it is possible to add a new button on the Control bar which role is to restart the playback. I know that there is a notification that can be used for such action, and I already created an html button for doing that. But I would like to include the button in the Control bar and I have no idea how to do it. Anybody has a clue? Could it be also possible to do in the playlist navigation frame?
Hi toreik, Yes I did. I finally modified the css source and defined new class for such button. Specifically I worked on the Playlist button container. If you want I can share with you what I did.
Hi torerik. Below the new css class I defined for my new button (as I said it is associated to the playlist button container):
.playlistAPI .rstBtn {
width: 16px;
height: 16px;
float: left;
margin-right:8px;
background-image: url(âdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5RDhFNkIwRkUwNkRFNTExODA2RTk2MTJDMURFOTdBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowODc1NTRERTZERkMxMUU1QTBGQUU4NkUwQUU5NzgxNyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowODc1NTRERDZERkMxMUU1QTBGQUU4NkUwQUU5NzgxNyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlEOEU2QjBGRTA2REU1MTE4MDZFOTYxMkMxREU5N0EzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlEOEU2QjBGRTA2REU1MTE4MDZFOTYxMkMxREU5N0EzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+UaLO0AAAAPJJREFUGBkFwbFKFAAAgOEfPHUs8gHaykACdXPwDWprq8HzJSICh4LAxcTJJxCJ6iUiqNNb3IOOg/O4JZKgXL6+L0mSJEmSpCTJhncuzV375sBDueeJkmTPDAD8tO/MPyV54S+mTgztee8HYKHkgQW+2pIkO36BuZJDLGxLkjs+AG6UnLrySpLkse/GLox9VrJkWZIkGVi1YiAlGVixaiBJkixbUvLJ2IVLI5uSJC9dOVJyA/joriTZco3XSubgt11JsukLJu4rWQAmTgwNHZvij2dScuvcvgkAmHouKXlqTda9MTIzM/LWI0lKkiRJkiTpP2qPWikFd7xPAAAAAElFTkSuQmCCâ);
}
Class above was created using as a template the class âprevBtnâ and ânextBtnâ.
Css class above was overwrote in order to increase the containers dimension, and include a new button before the 2 ones already existent:
.playlistAPI .playlistControls.k-vertical {
position: relative;
width: 65px !important;
float: right;
right: 8px;
top: 36px;
}
Finally using DOM I added the new button using the js function below, which is called by player listener when the event playlistReady is reached (kdp.addJsListener(âplaylistReadyâ,âaddRestartâ)):
function addRestart(){
var kdp = this,
divPlaylist = document.querySelector(âdiv.playlistControlsâ),
restartButton = document.createElement(âdivâ),
firstChild = divPlaylist.firstChild;
restartButton.className = ârstBtn playlistBtnâ;
console.log(âeventâ,kdp);
restartButton.onclick = function(){
console.log(this);
kdp.sendNotification(âdoReplayâ);
};
divPlaylist.insertBefore(restartButton,firstChild);
}