index.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <script>
  5. if (typeof module === 'object') {window.module = module; module = undefined; }
  6. </script>
  7. <title>LiveMe Pro Tools</title>
  8. <link rel="stylesheet" href="css/style.css" media="all">
  9. <link rel="stylesheet" href="css/page_index.css" media="all">
  10. <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  11. <script type="text/javascript" src="js/handlebars-v4.0.11.js"></script>
  12. <script type="text/javascript" src="js/index.js"></script>
  13. </head>
  14. <body>
  15. <header>
  16. <a class="app-menu" onClick="showMainMenu()">&#9776;</a>
  17. <div class="search">
  18. <i class="icon icon-search"></i>
  19. <div class="select">
  20. <select id="search-type" onChange="onTypeChange()">
  21. <option value="video-id">Video ID is</option>
  22. <option value="video-url">Video URL is</option>
  23. <option selected value="user-id">User ID is</option>
  24. <option value="short-id">User Short ID is</option>
  25. <option value="username-like">Username like</option>
  26. <option value="hashtag">Hashtag like</option>
  27. </select>
  28. </div>
  29. <input type="text" id="search-query" placeholder="Search" onKeyPress="enterOnSearch(event)" value="" >
  30. <button onClick="preSearch()"><i class="icon icon-circle-right"></i></button>
  31. </div>
  32. <div class="group">
  33. <a class="button icon-only" title="Go Home" onClick="goHome()"><i class="icon icon-home3"></i></a>
  34. <a class="button icon-only" title="View Bookmarks" onClick="openBookmarks()"><i class="icon icon-bookmarks"></i></a>
  35. <a class="button icon-only" title="Toggle Queue List" onClick="showDownloads()"><i class="icon icon-folder-download"></i></a>
  36. </div>
  37. <a class="minimize-button" onClick="minimizeWindow()">&#x1f5d5;</a>
  38. <a class="close-button" onClick="closeWindow()">&#x2715;</a>
  39. </header>
  40. <div id="home">
  41. <div id="bookmarklist"></div>
  42. <div class="panel"></div>
  43. </div>
  44. <div id="queue-list"></div>
  45. <main id="view-userinfo-replays" class="has-footer has-details">
  46. <div id="user-details" class="details">
  47. <div class="avatar">
  48. <img class="avatar" src="" onerror="this.src='images/nouser.png'">
  49. <a class="save" href="#" onClick="saveAccountFace()"><i class="icon icon-download"></i></a>
  50. </div>
  51. <div class="info">
  52. <h1>
  53. <a href="#" class="button icon-only bookmark" onClick="AddToBookmarks()" title="Add to Bookmarks">&#x2606;</a>
  54. <span></span>
  55. </h1>
  56. <h2 class="id"></h2>
  57. <h2 class="shortid"></h2>
  58. <h2 class="level"></h2>
  59. <h4></h4>
  60. <div class="buttons">
  61. <a href="#" class="button following" onClick="showFollowing()"><i class="icon icon-hour-glass"></i></a>
  62. <a href="#" class="button followers" onClick="showFollowers()"><i class="icon icon-hour-glass"></i></a>
  63. </div>
  64. </div>
  65. </div>
  66. <table id="list" class="results">
  67. <thead>
  68. <tr>
  69. <th width="410">Title</th>
  70. <th width="120">
  71. <a href="#" class="link text-center" onClick="sortReplays('date')" title="Sort by Date (desc)">Date</a>
  72. </th>
  73. <th width="50" align="right">Length</th>
  74. <th width="70" align="right">
  75. <a href="#" class="link text-right" onClick="sortReplays('views')" title="Sort by Views (desc)">Views</a>
  76. </th>
  77. <th width="70" align="right">
  78. <a href="#" class="link text-right" onClick="sortReplays('likes')" title="Sort by Likes (desc)">Likes</a>
  79. </th>
  80. <th width="70" align="right">
  81. <a href="#" class="link text-right" onClick="sortReplays('shares')" title="Sort by Shares (desc)">Shares</a>
  82. </th>
  83. <th width="210">Actions</th>
  84. </tr>
  85. </thead>
  86. <tbody>
  87. </tbody>
  88. </table>
  89. <div class="alert" id="replay-result-alert" style="display:none;"></div>
  90. </main>
  91. <script id="replays-list-row" type="text/x-handlebars-template">
  92. <tr data-id="{{vid}}" class="{{searched}} {{seen}} user-{{userid}}">
  93. <td width="400" class="{{highlight}}">{{{watched}}}&nbsp;&nbsp;{{{downloaded}}}&nbsp;&nbsp;&nbsp;{{unlisted}}{{{isLive}}}{{title}}</td>
  94. <td width="130" class="{{highlight}}" align="center" data-name="date">{{ds}}</td>
  95. <td width="55" class="{{highlight}}" align="right">{{length}}</td>
  96. <td width="75" class="{{highlight}}" align="right" data-name="views">{{playnumber}}</td>
  97. <td width="75" class="{{highlight}}" align="right" data-name="likes">{{likenum}}</td>
  98. <td width="75" class="{{highlight}}" align="right" data-name="shares">{{sharenum}}</td>
  99. <td width="280" class="{{highlight}}" style="padding: 0 0.5em; text-align: right;">
  100. <a class="button mini icon-small" onClick="copyToClipboard('{{vid}}')" style="font-size: 10pt;" title="Copy ID to Clipboard">ID</a>
  101. &nbsp;
  102. <a class="button mini icon-small" onClick="copyToClipboard('https://www.liveme.com/live.html?videoid={{vid}}')" href="#" style="font-size: 10pt;" title="Copy URL to Clipboard">URL</a>
  103. &nbsp;
  104. <a class="button mini icon-small" onClick="copyToClipboard('{{source}}')" style="font-size: 10pt;" title="Copy Source to Clipboard (m3u8 or flv)">Source</a>
  105. &nbsp;&nbsp;
  106. <a class="button icon-only" onClick="playVideo('{{vid}}')" title="Watch Replay"><i class="icon icon-play"></i></a>&nbsp;&nbsp;
  107. <a class="button icon-only" onClick="readComments('{{vid}}')" title="Read Comments"><i class="icon icon-bubbles3"></i></a>&nbsp;&nbsp;
  108. {{{inQueue}}}
  109. </td>
  110. </tr>
  111. </script>
  112. <div id="popup-message"></div>
  113. <div id="settings">
  114. <a class="close-settings" onClick="hideSettings()">&#x2715;</a>
  115. <div class="area">
  116. <div class="section">
  117. <ul>
  118. <li style="padding-bottom: 5px;"><h4 class="titleColor">Authentication</h4></li>
  119. <li style="padding-bottom: 5px; display: none;" id="authStatus"><h5></h5></li>
  120. <li style="padding-bottom: 20px;">
  121. Email and password are required to see user replays.<br>
  122. <input type="text" id="authEmail" placeholder="user@example.com" style="width: 100%;margin-bottom:5px;" onBlur="saveSettings()"><br>
  123. <input type="password" id="authPassword" placeholder="Password" style="width: 100%;" onBlur="saveSettings()"><br>
  124. </li>
  125. </ul>
  126. </div>
  127. <div class="section">
  128. <ul>
  129. <li style="padding-bottom: 5px;"><h4 class="titleColor">Blocked countries</h4></li>
  130. <li style="padding-bottom: 20px;">
  131. <div style="height:15em;">
  132. <select multiple id="countryCode" style="width: 120px;" size="15" onBlur="saveSettings()">
  133. </select>
  134. </div>
  135. </li>
  136. </ul>
  137. </div>
  138. <div class="section">
  139. <ul>
  140. <li style="padding-bottom: 5px;"><h4 class="titleColor">Video Player</h4></li>
  141. <li style="padding-bottom: 20px;">
  142. Internal player is used by default unless you specify one in the field below.<br>
  143. <input type="text" id="playerpath" placeholder="Full path to a player" style="width: 100%;" onBlur="saveSettings()"><br>
  144. <small>You <b>MUST</b> also add <i>%url%</i> to the command to denote where to place the URL to the replay. (Ex: mpv %url%)</small>
  145. </li>
  146. </ul>
  147. </div>
  148. <div class="section">
  149. <ul>
  150. <li style="padding-bottom: 5px;"><h4 class="titleColor">Downloads</h4></li>
  151. <li style="padding-bottom: 10px;">
  152. <ul style="margin: 16px 0 0; padding: 0;">
  153. <li style="margin: 12px 0; line-height: 16px;">
  154. Download Location:<br>
  155. <input type="text" id="downloads-path" style="width: 500px;" onBlur="saveSettings()">
  156. </li>
  157. <li style="margin: 12px 0; line-height: 16px;">
  158. Filename Template:<br>
  159. <input type="text" id="downloads-template" style="width: 500px;" onBlur="saveSettings()">
  160. </li>
  161. <li style="margin: 12px 0; font-size: 9pt;">
  162. You can customize how downloaded replays are named using the variables below in the text box above.<br>
  163. <table style="width: 560px; margin: 8px auto;">
  164. <tbody>
  165. <tr>
  166. <td width="200">%%broadcaster%%</td><td width="360">Broadcaster's Nickname</td>
  167. </tr>
  168. <tr>
  169. <td>%%longid%%</td><td>Broadcaster's Long ID Number</td>
  170. </tr>
  171. <tr>
  172. <td>%%replayid%%</td><td>ID Number of the Replay</td>
  173. </tr>
  174. <tr>
  175. <td>%%replayviews%%</td><td>Number of Views</td>
  176. </tr>
  177. <tr>
  178. <td>%%replaylikes%%</td><td>Number of Likes</td>
  179. </tr>
  180. <tr>
  181. <td>%%replayshares%%</td><td>Number of Shares</td>
  182. </tr>
  183. <tr>
  184. <td>%%replaytitle%%</td><td>Title of the Replay</td>
  185. </tr>
  186. <tr>
  187. <td>%%replayduration%%</td><td>Duration of the Replay</td>
  188. </tr>
  189. <tr>
  190. <td>%%replaydatepacked%%</td><td>Date the replay was originally recorded in YYYYMMDD</td>
  191. </tr>
  192. <tr>
  193. <td>%%replaydateus%%</td><td>Date the replay was originally recorded in MM-DD-YYYY</td>
  194. </tr>
  195. <tr>
  196. <td>%%replaydateeu%%</td><td>Date the replay was originally recorded in DD-MM-YYYY</td>
  197. </tr>
  198. </tbody>
  199. </table>
  200. </li>
  201. </ul>
  202. </li>
  203. <li style="padding-bottom: 5px;"><h4 class="titleColor">Download Method</h4></li>
  204. <li>
  205. <ul style="margin: 16px 0 0; padding: 0;">
  206. <li style="margin: 16px 0; line-height: 16px;">
  207. <input type="radio" name="downloadMethod" value="ffmpeg" id="ffmpeg-method" onClick="saveSettings()">
  208. <label for="ffmpeg-method" onClick="saveSettings()">Use FFMPEG for downloading
  209. </li>
  210. <li style="margin: 16px 0; line-height: 16px;">
  211. <input type="radio" name="downloadMethod" value="chunk" id="chunk-method" onClick="saveSettings()">
  212. <label for="chunk-method" onClick="saveSettings()">Use internal chunk downloading
  213. </li>
  214. <li>
  215. <li style="margin: 8px 0; line-height: 16px; padding: 0 0 0 25px;">
  216. <input type="checkbox" id="chunk-method-tmp" onClick="saveSettings()">
  217. <label for="chunk-method-tmp" onClick="saveSettings()">Delete temporary files left over by this method (.ts files)</label>
  218. </li>
  219. </ul>
  220. </li>
  221. <li style="padding-bottom: 5px;"><h4 class="titleColor">Parallel Downloads</h4></li>
  222. <li style="padding-bottom: 10px;">
  223. <input type="number" min="1" max="10" id="downloads-parallel" placeholder="Number" style="margin-right:10px;" onBlur="saveSettings()">
  224. How many replays to download in parallel.
  225. </li>
  226. <li style="padding-bottom: 5px;"><h4 class="titleColor">FFMPEG Settings</h4></li>
  227. <li>
  228. <input type="text" id="ffmpegPath" placeholder="Full path to FFMPEG" style="width: 100%;" onBlur="saveSettings()">
  229. <small style="line-height: 0.8em;">Don't change the path above unless you know what you're doing or were directed by one of the contributors/authors.</small>
  230. </li>
  231. <li style="margin: 16px 0; line-height: 16px;">
  232. <label for="ffmpeg-transcode-setting" onClick="saveSettings()">Transcode Setting:
  233. <div class="select" style="vertical-align: middle; height: 26px;">
  234. <select id="ffmpeg-transcode-setting">
  235. <option value="0">None</option>
  236. <option value="1">Fast</option>
  237. <option value="2">Best</option>
  238. </select>
  239. </div>
  240. <br>
  241. <small>When set to <b>None</b>, the video may be glitchy or contain errors.</small>
  242. </li>
  243. </ul>
  244. </div>
  245. <div class="section">
  246. <ul>
  247. <li style="padding-bottom: 5px;"><h4 class="titleColor">Fans and Followings</h4></li>
  248. <li style="line-height: 24px;">
  249. <input type="checkbox" onChange="saveSettings()" id="viewmode-followings"> Hide followings with no replays.<br>
  250. <input type="checkbox" onchange="saveSettings()" id="viewmode-followers"> Hide followers with no replays.<br>
  251. <input type="checkbox" onchange="saveSettings()" id="loadAllResults"> Load ALL possible results (WARNING: Can be slow!)
  252. </li>
  253. </ul>
  254. </div>
  255. <div class="section">
  256. <ul>
  257. <li style="padding-bottom: 5px;"><h4 class="titleColor">Tracking</h4></li>
  258. <li>
  259. LiveMe Pro Tools tracks all viewed profiles, replays and downloads. This feature cannot be disabled.
  260. </li>
  261. </ul>
  262. </div>
  263. <div class="section">
  264. <ul>
  265. <li style="padding-bottom: 5px;"><h4 class="titleColor">Viewed Profiles Auto Clear</h4></li>
  266. <li style="line-height: 26px;">
  267. Clear viewed profiles that were last seen more than
  268. <div class="select" style="vertical-align: middle; height: 26px;">
  269. <select id="cleanup-duration">
  270. <option value="1">1 Day</option>
  271. <option value="2">2 Days</option>
  272. <option value="3">3 Days</option>
  273. </select>
  274. </div>
  275. old.
  276. </li>
  277. </ul>
  278. </div>
  279. <div class="section">
  280. <ul>
  281. <li style="padding-bottom: 5px;"><h4 class="titleColor">Data Stats</h4></li>
  282. <li>
  283. <table>
  284. <tbody>
  285. <tr>
  286. <td width="150">Bookmarks:</td>
  287. <td width="150" style="text-align: right;" id="counts-bookmarks"></td>
  288. </tr>
  289. <tr>
  290. <td width="150">Viewed Accounts:</td>
  291. <td width="150" style="text-align: right;" id="counts-profiles"></td>
  292. </tr>
  293. <tr>
  294. <td width="150">Watched Replays:</td>
  295. <td width="150" style="text-align: right;" id="counts-watched"></td>
  296. </tr>
  297. <tr>
  298. <td width="150">Downloaded Replays:</td>
  299. <td width="150" style="text-align: right;" id="counts-downloaded"></td>
  300. </tr>
  301. </tbody>
  302. </table>
  303. </li>
  304. </ul>
  305. </div>
  306. <div class="section">
  307. <ul>
  308. <li>
  309. <h4 id="appname" class="titleColor">LiveMe Pro Tools <h6 id="version">Version 20180000</h6></h4>
  310. </li>
  311. <li style="padding-top: 20px;">
  312. <h6>Contributors:</h6>
  313. <ul style="font-weight: 300; font-size: 10pt; line-height: 12pt">
  314. <li>TheCoder</li>
  315. <li>zp</li>
  316. <li>Lewdninja</li>
  317. </ul>
  318. </li>
  319. </ul>
  320. </div>
  321. <div class="section">
  322. <ul>
  323. <li style="padding-bottom: 5px;"><h4 class="titleColor">Reset</h4></li>
  324. <li style="line-height: 24px;">
  325. <p>
  326. By clicking the button below, you will wipe all Bookmarks, Downloads, Visited and Watched entries
  327. and reset all settings to their defaults.
  328. </p>
  329. <p>
  330. There is no confirmation once you click the button below so use it wisely!
  331. </p>
  332. <div style="margin: 32px 0; text-align: center;">
  333. <button onClick="resetSettings()">Yes, I want to reset everything!</button>
  334. </div>
  335. </li>
  336. </ul>
  337. </div>
  338. </div>
  339. </div>
  340. <div id="status">
  341. </div>
  342. <overlay onClick="closeOverlay()">&nbsp;</overlay>
  343. <footer>
  344. <div id="footer-progressbar">
  345. <div></div>
  346. </div>
  347. <h1>&nbsp;</h1>
  348. </footer>
  349. </body>
  350. </html>