webinterface: use font-awesome for icons. Disable all styles but "modern" for now
[enigma2-plugins.git] / webinterface / src / web-data / tpl / default / tplMediaPlayer.htm
1
2 <!-- tplMediaplayer -->
3                                                 <table id="contentTable">
4                                                         <tr>
5                                                                 <td><div class="mpListHeader">MediaPlayer ${mp.root}</div></td>
6                                                                 <td style="text-align: right;">
7                                                                         <button class="mpCmd" data-command="prev" title="${strings.previous}">
8                                                                                 <i class="fa fa-fw fa-backward" alt="&lt;&lt;"></i>
9                                                                         </button>
10                                                                         <button class="mpCmd" data-command="play" title="${strings.play}">
11                                                                                 <i class="fa fa-fw fa-play" alt="&gt;"></i>
12                                                                         </button>
13                                                                         <button class="mpCmd" data-command="next" title="${strings.next}">
14                                                                                 <i class="fa fa-fw fa-forward" alt="&lt;&lt;"></i>
15                                                                         </button>
16                                                                         <button class="mpCmd" data-command="stop" title="${strings.stop}">
17                                                                                 <i class="fa fa-fw fa-stop" alt="[]"></i>
18                                                                         </button>
19                                                                         <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
20                                                                         <a href="#!/extras/mediaplayer/filesystems">
21                                                                                 <button class="mpFilelist" title="${strings.filebrowser}">
22                                                                                         <i class="fa fa-fw fa-files-o" alt="${strings.filebrowser}"></i>
23                                                                                 </button>
24                                                                         </a>
25                                                                         <a href="#!/extras/mediaplayer/playlist">
26                                                                                 <button class="mpPlaylist" title="${strings.playlist}">
27                                                                                         <i class="fa fa-fw fa-th-list" alt="${strings.playlist}"></i>
28                                                                                 </button>
29                                                                         </a>
30                                                                         <button class="mpSavePlaylist" title="${strings.save_playlist}">
31                                                                                 <i class="fa fa-fw fa-floppy-o" alt="${strings.save}"></i>
32                                                                         </button>
33                                                                         <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
34                                                                         <button class="mpCmd" data-command="exit" title="${strings.close_mediaplayer}" >
35                                                                                 <i class="fa fa-fw fa-times" alt="X"></i>
36                                                                         </button>
37                                                                 </td>
38                                                         </tr>
39                                                         <tr>
40                                                                 <td colspan="2">
41                                                                         <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;" id="mpContent">
42                                                                                 {if mp.hasparent}
43                                                                                 <tr class="mpListItem" data-servicereference="${mp.servicereference.e()}">
44                                                                                         <td>
45                                                                                                 <div class="sListSName">
46                                                                                                         <a href="#!/extras/mediaplayer/${mp.servicereference}" style="color: #000; display:block;" class="mpListSLink" title="${strings.change_to_item.format(mp.name)}">
47                                                                                                                 <i class="fa fa-fw fa-folder-o" style="vertical-align: bottom;" alt="|"></i> ${mp.name}</a>
48                                                                                                 </div>
49                                                                                         </td>
50                                                                                         <td>&nbsp;</td>
51                                                                                 </tr>
52                                                                                 {/if}
53                                                                                 {for item in items}
54                                                                                 <tr class="mpListItem" data-servicereference="${item.servicereference}">
55                                                                                         <!-- ItemBody -->
56                                                                                         <td>
57                                                                                                 <div class="sListSName">
58                                                                                                         {if item.isdir}
59                                                                                                         <a href="#!/extras/mediaplayer/${item.servicereference}" style="color: #000; display:block;" class="mpListSLink" title="${strings.change_to_item.format(item.name)}">
60                                                                                                                 <i class="fa fa-fw fa-folder-o" alt="|"></i> ${item.name}</a>
61                                                                                                         {else}
62                                                                                                         <a href="#" class="mpListFile mpListSLink" title="${strings.play_item.format(item.name)}">
63                                                                                                                 <i class="fa fa-file-o"alt="-"></i> ${item.name}</a>
64                                                                                                         {/if}
65                                                                                                 </div>
66                                                                                         </td>
67                                                                                         <td style="width: 80px;">
68                                                                                                 <div style="text-align: right;">
69                                                                                                 {if item.root == "playlist"}
70                                                                                                         <a href="#" style="color: #000;" class="mpPlayFile" title="${strings.play_item.format(item.name)}">
71                                                                                                                 <i class="fa fa-border fa-play"></i>
72                                                                                                         </a>
73                                                                                                         <a href="#" style="color: #000;" class="mpRemoveFile" title="${strings.remove_item_from_playlist.format(item.name)}">
74                                                                                                                 <i class="fa fa-border fa-trash"></i>
75                                                                                                         </a>
76                                                                                                         <a target="_blank" href="/file?file=${item.name.e()}">
77                                                                                                                 <i class="fa fa-border fa-download" title="${strings.download_item.format(item.name)}" alt="${strings.download}"></i>
78                                                                                                         </a>
79                                                                                                 {elseif !item.isdir}
80                                                                                                         <a href="#" class="mpPlayFile" title="${strings.play_item.format(item.name)}">
81                                                                                                                 <i class="fa fa-border fa-play"></i>
82                                                                                                         </a>
83                                                                                                         <a href="#" class="mpAddFile" title="${strings.add_item_to_playlist.format(item.name)}">
84                                                                                                                 <i class="fa fa-border fa-plus"></i>
85                                                                                                         </a>
86                                                                                                         <a target="_blank" href="/file?file=${item.name.e()}&root=${item.root.e()}">
87                                                                                                                 <i class="fa fa-border fa-download" title="${strings.download_item.format(item.name)}" alt="${strings.download}"></i>
88                                                                                                         </a>
89                                                                                                 {/if}
90                                                                                                 </div>
91                                                                                         </td>
92                                                                                 </tr>
93                                                                                 {forelse}
94                                                                                 <tr>
95                                                                                         <td colspan="2">${strings.no_items}</td>
96                                                                                 </tr>
97                                                                                 {/for}
98                                                                                 <tr><td colspan="2">&nbsp;</td></tr>
99                                                                         </table>
100                                                                 </td>
101                                                         </tr>
102                                                 </table>
103 <!-- /tplMediaplayer -->