diff --git a/platypush/backend/http/static/css/video.omxplayer.css b/platypush/backend/http/static/css/video.omxplayer.css index c0cff1dfb..d6f7e9b2b 100644 --- a/platypush/backend/http/static/css/video.omxplayer.css +++ b/platypush/backend/http/static/css/video.omxplayer.css @@ -32,6 +32,10 @@ form#video-ctrl { cursor: pointer; } + .video-icon-container { + margin-right: 1rem; + } + .video-result.selected { background-color: #c8ffd0 !important; } diff --git a/platypush/backend/http/static/js/video.omxplayer.js b/platypush/backend/http/static/js/video.omxplayer.js index 5a8ae3063..faa1cb53f 100644 --- a/platypush/backend/http/static/js/video.omxplayer.js +++ b/platypush/backend/http/static/js/video.omxplayer.js @@ -14,10 +14,30 @@ $(document).ready(function() { .attr('data-url', video['url']) .html('title' in video ? video['title'] : video['url']); + var $icon = getVideoIconByUrl(video['url']); + $icon.prependTo($videoResult); $videoResult.appendTo($videoResults); } }; + var getVideoIconByUrl = function(url) { + var $icon = $(''); + + if (url.startsWith('file://')) { + $icon.addClass('fa-hdd'); + } else if (url.startsWith('https://www.youtube.com/')) { + $icon.addClass('fa-youtube'); + } else if (url.startsWith('magnet:?')) { + $icon.addClass('fa-wifi'); + } else { + $icon.addClass('fa-video'); + } + + var $iconContainer = $('').addClass('video-icon-container'); + $icon.appendTo($iconContainer); + return $iconContainer; + }; + var initBindings = function() { $searchForm.on('submit', function(event) { var $input = $(this).find('input[name=video-search-text]');