Add Custom Button for restart playback to player

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?

Best regards

RFR

Hi.
Did you find a solution for this? Managed to remove the old buttons with my css and class icon-play:before… Do you know how to add new buttons? :slight_smile:

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.

Best regards
RFR

Hi. ok. Yes please share, that would be awesome :slight_smile:

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);
}

I hope it is useful for you.
Best regards

RFR

1 Like

Oh Yes, sweeet. Thank you :slight_smile: