index.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  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 lamd-button" onClick="AddToLAMD()" style="display: none;"><i class="icon icon-hour-glass"></i></a>
  62. <a href="#" class="button following" onClick="showFollowing()"><i class="icon icon-hour-glass"></i></a>
  63. <a href="#" class="button followers" onClick="showFollowers()"><i class="icon icon-hour-glass"></i></a>
  64. </div>
  65. </div>
  66. </div>
  67. <table id="list" class="results">
  68. <thead>
  69. <tr>
  70. <th width="410">Title</th>
  71. <th width="120">
  72. <a href="#" class="link text-center" onClick="sortReplays('date')" title="Sort by Date (desc)">Date</a>
  73. </th>
  74. <th width="50" align="right">Length</th>
  75. <th width="70" align="right">
  76. <a href="#" class="link text-right" onClick="sortReplays('views')" title="Sort by Views (desc)">Views</a>
  77. </th>
  78. <th width="70" align="right">
  79. <a href="#" class="link text-right" onClick="sortReplays('likes')" title="Sort by Likes (desc)">Likes</a>
  80. </th>
  81. <th width="70" align="right">
  82. <a href="#" class="link text-right" onClick="sortReplays('shares')" title="Sort by Shares (desc)">Shares</a>
  83. </th>
  84. <th width="210">Actions</th>
  85. </tr>
  86. </thead>
  87. <tbody>
  88. </tbody>
  89. </table>
  90. <div class="alert" id="replay-result-alert" style="display:none;"></div>
  91. </main>
  92. <script id="replays-list-row" type="text/x-handlebars-template">
  93. <tr data-id="{{vid}}" class="{{searched}} {{seen}} user-{{userid}}">
  94. <td width="410" class="{{highlight}}">{{{watched}}}&nbsp;&nbsp;{{{downloaded}}}&nbsp;&nbsp;&nbsp;{{unlisted}}{{{isLive}}}{{title}}</td>
  95. <td width="120" class="{{highlight}}" align="center" data-name="date">{{ds}}</td>
  96. <td width="50" class="{{highlight}}" align="right">{{length}}</td>
  97. <td width="70" class="{{highlight}}" align="right" data-name="views">{{playnumber}}</td>
  98. <td width="70" class="{{highlight}}" align="right" data-name="likes">{{likenum}}</td>
  99. <td width="70" class="{{highlight}}" align="right" data-name="shares">{{sharenum}}</td>
  100. <td width="300" class="{{highlight}}" style="padding: 0 16px; text-align: right;">
  101. <a class="button mini icon-small" onClick="copyToClipboard('{{vid}}')" style="font-size: 10pt;" title="Copy ID to Clipboard">ID</a>
  102. &nbsp;
  103. <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>
  104. &nbsp;
  105. <a class="button mini icon-small" onClick="copyToClipboard('{{source}}')" style="font-size: 10pt;" title="Copy Source to Clipboard (m3u8 or flv)">Source</a>
  106. &nbsp;&nbsp;&nbsp;
  107. <a class="button icon-only" onClick="playVideo('{{vid}}')" title="Watch Replay"><i class="icon icon-play"></i></a>&nbsp;&nbsp;
  108. <a class="button icon-only" onClick="readComments('{{vid}}')" title="Read Comments"><i class="icon icon-bubbles3"></i></a>&nbsp;&nbsp;
  109. {{{inQueue}}}
  110. </td>
  111. </tr>
  112. </script>
  113. <div id="popup-message"></div>
  114. <div id="settings">
  115. <a class="close-settings" onClick="hideSettings()">&#x2715;</a>
  116. <div class="area">
  117. <div class="section">
  118. <ul>
  119. <li style="padding-bottom: 5px;"><h4 class="titleColor">Authentication</h4></li>
  120. <li style="padding-bottom: 5px; display: none;" id="authStatus"><h5></h5></li>
  121. <li style="padding-bottom: 20px;">
  122. Email and password are required to see user replays.<br>
  123. <input type="text" id="authEmail" placeholder="user@example.com" style="width: 100%;margin-bottom:5px;" onBlur="saveSettings()"><br>
  124. <input type="password" id="authPassword" placeholder="Password" style="width: 100%;" onBlur="saveSettings()"><br>
  125. </li>
  126. </ul>
  127. </div>
  128. <div class="section">
  129. <ul>
  130. <li style="padding-bottom: 5px;"><h4 class="titleColor">Video Player</h4></li>
  131. <li style="padding-bottom: 20px;">
  132. Internal player is used by default unless you specify one in the field below.<br>
  133. <input type="text" id="playerpath" placeholder="Full path to a player" style="width: 100%;" onBlur="saveSettings()"><br>
  134. <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>
  135. </li>
  136. </ul>
  137. </div>
  138. <div class="section">
  139. <ul>
  140. <li style="padding-bottom: 5px;"><h4 class="titleColor">Downloads</h4></li>
  141. <li style="padding-bottom: 10px;">
  142. <ul style="margin: 16px 0 0; padding: 0;">
  143. <li style="margin: 12px 0; line-height: 16px;">
  144. Download Location:<br>
  145. <input type="text" id="downloads-path" style="width: 500px;" onBlur="saveSettings()">
  146. </li>
  147. <li style="margin: 12px 0; line-height: 16px;">
  148. Filename Template:<br>
  149. <input type="text" id="downloads-template" style="width: 500px;" onBlur="saveSettings()">
  150. </li>
  151. <li style="margin: 12px 0; font-size: 9pt;">
  152. You can customize how downloaded replays are named using the variables below in the text box above.<br>
  153. <table style="width: 560px; margin: 8px auto;">
  154. <tbody>
  155. <tr>
  156. <td width="200">%%broadcaster%%</td><td width="360">Broadcaster's Nickname</td>
  157. </tr>
  158. <tr>
  159. <td>%%longid%%</td><td>Broadcaster's Long ID Number</td>
  160. </tr>
  161. <tr>
  162. <td>%%replayid%%</td><td>ID Number of the Replay</td>
  163. </tr>
  164. <tr>
  165. <td>%%replayviews%%</td><td>Number of Views</td>
  166. </tr>
  167. <tr>
  168. <td>%%replaylikes%%</td><td>Number of Likes</td>
  169. </tr>
  170. <tr>
  171. <td>%%replayshares%%</td><td>Number of Shares</td>
  172. </tr>
  173. <tr>
  174. <td>%%replaytitle%%</td><td>Title of the Replay</td>
  175. </tr>
  176. <tr>
  177. <td>%%replayduration%%</td><td>Duration of the Replay</td>
  178. </tr>
  179. <tr>
  180. <td>%%replaydatepacked%%</td><td>Date the replay was originally recorded in YYYYMMDD</td>
  181. </tr>
  182. <tr>
  183. <td>%%replaydateus%%</td><td>Date the replay was originally recorded in MM-DD-YYYY</td>
  184. </tr>
  185. <tr>
  186. <td>%%replaydateeu%%</td><td>Date the replay was originally recorded in DD-MM-YYYY</td>
  187. </tr>
  188. </tbody>
  189. </table>
  190. </li>
  191. </ul>
  192. </li>
  193. <li style="padding-bottom: 5px;"><h4 class="titleColor">Download Method</h4></li>
  194. <li>
  195. <ul style="margin: 16px 0 0; padding: 0;">
  196. <li style="margin: 16px 0; line-height: 16px;">
  197. <input type="radio" name="downloadMethod" value="ffmpeg" id="ffmpeg-method" onClick="saveSettings()">
  198. <label for="ffmpeg-method" onClick="saveSettings()">Use FFMPEG for downloading
  199. </li>
  200. <li style="margin: 16px 0; line-height: 16px;">
  201. <input type="radio" name="downloadMethod" value="chunk" id="chunk-method" onClick="saveSettings()">
  202. <label for="chunk-method" onClick="saveSettings()">Use internal chunk downloading
  203. </li>
  204. <li>
  205. <li style="margin: 8px 0; line-height: 16px; padding: 0 0 0 25px;">
  206. <input type="checkbox" id="chunk-method-tmp" onClick="saveSettings()">
  207. <label for="chunk-method-tmp" onClick="saveSettings()">Delete temporary files left over by this method (.ts files)</label>
  208. </li>
  209. </ul>
  210. </li>
  211. <li style="padding-bottom: 5px;"><h4 class="titleColor">Parallel Downloads</h4></li>
  212. <li style="padding-bottom: 10px;">
  213. <input type="number" min="1" max="10" id="downloads-parallel" placeholder="Number" style="margin-right:10px;" onBlur="saveSettings()">
  214. How many replays to download in parallel.
  215. </li>
  216. <li style="padding-bottom: 5px;"><h4 class="titleColor">FFMPEG Settings</h4></li>
  217. <li>
  218. <input type="text" id="ffmpegPath" placeholder="Full path to FFMPEG" style="width: 100%;" onBlur="saveSettings()">
  219. <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>
  220. </li>
  221. <li style="margin: 16px 0; line-height: 16px;">
  222. <label for="ffmpeg-transcode-setting" onClick="saveSettings()">Transcode Setting:
  223. <div class="select" style="vertical-align: middle; height: 26px;">
  224. <select id="ffmpeg-transcode-setting">
  225. <option value="0">None</option>
  226. <option value="1">Fast</option>
  227. <option value="2">Best</option>
  228. </select>
  229. </div>
  230. <br>
  231. <small>When set to <b>None</b>, the video may be glitchy or contain errors.</small>
  232. </li>
  233. </ul>
  234. </div>
  235. <div class="section">
  236. <ul>
  237. <li style="padding-bottom: 5px;"><h4 class="titleColor">Fans and Followings</h4></li>
  238. <li style="line-height: 24px;">
  239. <input type="checkbox" id="viewmode-followings"> Hide followings with no replays.<br>
  240. <input type="checkbox" id="viewmode-followers"> Hide followers with no replays.<br>
  241. </li>
  242. </ul>
  243. </div>
  244. <div class="section">
  245. <ul>
  246. <li style="padding-bottom: 5px;"><h4 class="titleColor">LAMD Support</h4></li>
  247. <li style="line-height: 24px;">
  248. <input type="checkbox" id="lamd-enabled"> Enable LAMD support.<br>
  249. </li>
  250. <li style="line-height: 24px;">
  251. <input type="checkbox" id="lamd-downloads"> Use LAMD to handle replay downloads.<br>
  252. </li>
  253. <li style="margin: 12px 0; line-height: 16px;">
  254. LAMD URL:<br>
  255. <input type="text" id="lamd-url" style="width: 400px;" onBlur="saveSettings()" placeholder="http://localhost:8280">
  256. </li>
  257. <li>
  258. <small>
  259. Default URL is <b>http://localhost:8280</b>. If you are running LAMD on a different computer then the one LiveMe Pro Tools runs on,
  260. enter the URL to it.
  261. </small>
  262. </li>
  263. </ul>
  264. </div>
  265. <div class="section">
  266. <ul>
  267. <li style="padding-bottom: 5px;"><h4 class="titleColor">Tracking</h4></li>
  268. <li>
  269. LiveMe Pro Tools tracks all viewed profiles, replays and downloads. This feature cannot be disabled.
  270. </li>
  271. </ul>
  272. </div>
  273. <div class="section">
  274. <ul>
  275. <li style="padding-bottom: 5px;"><h4 class="titleColor">Viewed Profiles Auto Clear</h4></li>
  276. <li style="line-height: 26px;">
  277. Clear viewed profiles that were last seen more than
  278. <div class="select" style="vertical-align: middle; height: 26px;">
  279. <select id="cleanup-duration">
  280. <option value="1">1 Day</option>
  281. <option value="2">2 Days</option>
  282. <option value="3">3 Days</option>
  283. </select>
  284. </div>
  285. old.
  286. </li>
  287. </ul>
  288. </div>
  289. <div class="section">
  290. <ul>
  291. <li style="padding-bottom: 5px;"><h4 class="titleColor">Data Stats</h4></li>
  292. <li>
  293. <table>
  294. <tbody>
  295. <tr>
  296. <td width="150">Bookmarks:</td>
  297. <td width="150" style="text-align: right;" id="counts-bookmarks"></td>
  298. </tr>
  299. <tr>
  300. <td width="150">Viewed Accounts:</td>
  301. <td width="150" style="text-align: right;" id="counts-profiles"></td>
  302. </tr>
  303. <tr>
  304. <td width="150">Watched Replays:</td>
  305. <td width="150" style="text-align: right;" id="counts-watched"></td>
  306. </tr>
  307. <tr>
  308. <td width="150">Downloaded Replays:</td>
  309. <td width="150" style="text-align: right;" id="counts-downloaded"></td>
  310. </tr>
  311. </tbody>
  312. </table>
  313. </li>
  314. </ul>
  315. </div>
  316. <div class="section">
  317. <ul>
  318. <li>
  319. <h4 id="appname" class="titleColor">LiveMe Pro Tools <h6 id="version">Version 20180000</h6></h4>
  320. </li>
  321. <li style="padding-top: 20px;">
  322. <h6>Contributors:</h6>
  323. <ul style="font-weight: 300; font-size: 10pt; line-height: 12pt">
  324. <li>TheCoder</li>
  325. <li>zp</li>
  326. <li>Lewdninja</li>
  327. </ul>
  328. </li>
  329. </ul>
  330. </div>
  331. <div class="section">
  332. <ul>
  333. <li style="padding-bottom: 5px;"><h4 class="titleColor">Reset</h4></li>
  334. <li style="line-height: 24px;">
  335. <p>
  336. By clicking the button below, you will wipe all Bookmarks, Downloads, Visited and Watched entries
  337. and reset all settings to their defaults.
  338. </p>
  339. <p>
  340. There is no confirmation once you click the button below so use it wisely!
  341. </p>
  342. <div style="margin: 32px 0; text-align: center;">
  343. <button onClick="resetSettings()">Yes, I want to reset everything!</button>
  344. </div>
  345. </li>
  346. </ul>
  347. </div>
  348. </div>
  349. </div>
  350. <div id="status">
  351. </div>
  352. <overlay onClick="closeOverlay()">&nbsp;</overlay>
  353. <footer>
  354. <div id="footer-progressbar">
  355. <div></div>
  356. </div>
  357. <h1>&nbsp;</h1>
  358. </footer>
  359. </body>
  360. </html>