ui/src/utils.ts

   1 import 'moment/locale/es';
   2 import 'moment/locale/el';
   3 import 'moment/locale/eu';
   4 import 'moment/locale/eo';
   5 import 'moment/locale/de';
   6 import 'moment/locale/zh-cn';
   7 import 'moment/locale/fr';
   8 import 'moment/locale/sv';
   9 import 'moment/locale/ru';
  10 import 'moment/locale/nl';
  11 import 'moment/locale/it';
  12 import 'moment/locale/fi';
  13 import 'moment/locale/ca';
  14 import 'moment/locale/fa';
  15 import 'moment/locale/pl';
  16 import 'moment/locale/pt-br';
  17 import 'moment/locale/ja';
  18 import 'moment/locale/ka';
  19 import 'moment/locale/hi';
  20 import 'moment/locale/gl';
  21 import 'moment/locale/tr';
  22 import 'moment/locale/hu';
  23 import 'moment/locale/uk';
  24
  25 import {
  26   UserOperation,
  27   Comment,
  28   CommentNode as CommentNodeI,
  29   Post,
  30   PrivateMessage,
  31   User,
  32   SortType,
  33   CommentSortType,
  34   ListingType,
  35   DataType,
  36   SearchType,
  37   WebSocketResponse,
  38   WebSocketJsonResponse,
  39   SearchForm,
  40   SearchResponse,
  41   CommentResponse,
  42   PostResponse,
  43 } from './interfaces';
  44 import { UserService, WebSocketService } from './services';
  45
  46 import Tribute from 'tributejs/src/Tribute.js';
  47 import markdown_it from 'markdown-it';
  48 import markdownitEmoji from 'markdown-it-emoji/light';
  49 import markdown_it_container from 'markdown-it-container';
  50 import twemoji from 'twemoji';
  51 import emojiShortName from 'emoji-short-name';
  52 import Toastify from 'toastify-js';
  53 import tippy from 'tippy.js';
  54 import EmojiButton from '@joeattardi/emoji-button';
  55
  56 export const repoUrl = 'https://github.com/LemmyNet/lemmy';
  57 export const helpGuideUrl = '/docs/about_guide.html';
  58 export const markdownHelpUrl = `${helpGuideUrl}#markdown-guide`;
  59 export const sortingHelpUrl = `${helpGuideUrl}#sorting`;
  60 export const archiveUrl = 'https://archive.is';
  61
  62 export const postRefetchSeconds: number = 60 * 1000;
  63 export const fetchLimit: number = 20;
  64 export const mentionDropdownFetchLimit = 10;
  65
  66 export const languages = [
  67   { code: 'ca', name: 'Català' },
  68   { code: 'en', name: 'English' },
  69   { code: 'el', name: 'Ελληνικά' },
  70   { code: 'eu', name: 'Euskara' },
  71   { code: 'eo', name: 'Esperanto' },
  72   { code: 'es', name: 'Español' },
  73   { code: 'de', name: 'Deutsch' },
  74   { code: 'gl', name: 'Galego' },
  75   { code: 'hu', name: 'Magyar Nyelv' },
  76   { code: 'ka', name: 'ქართული ენა' },
  77   { code: 'hi', name: 'मानक हिन्दी' },
  78   { code: 'fa', name: 'فارسی' },
  79   { code: 'ja', name: '日本語' },
  80   { code: 'pl', name: 'Polski' },
  81   { code: 'pt_BR', name: 'Português Brasileiro' },
  82   { code: 'zh', name: '中文' },
  83   { code: 'fi', name: 'Suomi' },
  84   { code: 'fr', name: 'Français' },
  85   { code: 'sv', name: 'Svenska' },
  86   { code: 'tr', name: 'Türkçe' },
  87   { code: 'uk', name: 'українська мова' },
  88   { code: 'ru', name: 'Русский' },
  89   { code: 'nl', name: 'Nederlands' },
  90   { code: 'it', name: 'Italiano' },
  91 ];
  92
  93 export const themes = [
  94   'litera',
  95   'materia',
  96   'minty',
  97   'solar',
  98   'united',
  99   'cyborg',
 100   'darkly',
 101   'journal',
 102   'sketchy',
 103   'vaporwave',
 104   'vaporwave-dark',
 105   'i386',
 106 ];
 107
 108 export const emojiPicker = new EmojiButton({
 109   // Use the emojiShortName from native
 110   style: 'twemoji',
 111   theme: 'dark',
 112   position: 'auto-start',
 113   // TODO i18n
 114 });
 115
 116 export function randomStr() {
 117   return Math.random()
 118     .toString(36)
 119     .replace(/[^a-z]+/g, '')
 120     .substr(2, 10);
 121 }
 122
 123 export function wsJsonToRes(msg: WebSocketJsonResponse): WebSocketResponse {
 124   let opStr: string = msg.op;
 125   return {
 126     op: UserOperation[opStr],
 127     data: msg.data,
 128   };
 129 }
 130
 131 export const md = new markdown_it({
 132   html: false,
 133   linkify: true,
 134   typographer: true,
 135 })
 136   .use(markdown_it_container, 'spoiler', {
 137     validate: function (params: any) {
 138       return params.trim().match(/^spoiler\s+(.*)$/);
 139     },
 140
 141     render: function (tokens: any, idx: any) {
 142       var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);
 143
 144       if (tokens[idx].nesting === 1) {
 145         // opening tag
 146         return `<details><summary> ${md.utils.escapeHtml(m[1])} </summary>\n`;
 147       } else {
 148         // closing tag
 149         return '</details>\n';
 150       }
 151     },
 152   })
 153   .use(markdownitEmoji, {
 154     defs: objectFlip(emojiShortName),
 155   });
 156
 157 md.renderer.rules.emoji = function (token, idx) {
 158   return twemoji.parse(token[idx].content);
 159 };
 160
 161 export function hotRankComment(comment: Comment): number {
 162   return hotRank(comment.score, comment.published);
 163 }
 164
 165 export function hotRankPost(post: Post): number {
 166   return hotRank(post.score, post.newest_activity_time);
 167 }
 168
 169 export function hotRank(score: number, timeStr: string): number {
 170   // Rank = ScaleFactor * sign(Score) * log(1 + abs(Score)) / (Time + 2)^Gravity
 171   let date: Date = new Date(timeStr + 'Z'); // Add Z to convert from UTC date
 172   let now: Date = new Date();
 173   let hoursElapsed: number = (now.getTime() - date.getTime()) / 36e5;
 174
 175   let rank =
 176     (10000 * Math.log10(Math.max(1, 3 + score))) /
 177     Math.pow(hoursElapsed + 2, 1.8);
 178
 179   // console.log(`Comment: ${comment.content}\nRank: ${rank}\nScore: ${comment.score}\nHours: ${hoursElapsed}`);
 180
 181   return rank;
 182 }
 183
 184 export function mdToHtml(text: string) {
 185   return { __html: md.render(text) };
 186 }
 187
 188 export function getUnixTime(text: string): number {
 189   return text ? new Date(text).getTime() / 1000 : undefined;
 190 }
 191
 192 export function addTypeInfo<T>(
 193   arr: Array<T>,
 194   name: string
 195 ): Array<{ type_: string; data: T }> {
 196   return arr.map(e => {
 197     return { type_: name, data: e };
 198   });
 199 }
 200
 201 export function canMod(
 202   user: User,
 203   modIds: Array<number>,
 204   creator_id: number,
 205   onSelf: boolean = false
 206 ): boolean {
 207   // You can do moderator actions only on the mods added after you.
 208   if (user) {
 209     let yourIndex = modIds.findIndex(id => id == user.id);
 210     if (yourIndex == -1) {
 211       return false;
 212     } else {
 213       // onSelf +1 on mod actions not for yourself, IE ban, remove, etc
 214       modIds = modIds.slice(0, yourIndex + (onSelf ? 0 : 1));
 215       return !modIds.includes(creator_id);
 216     }
 217   } else {
 218     return false;
 219   }
 220 }
 221
 222 export function isMod(modIds: Array<number>, creator_id: number): boolean {
 223   return modIds.includes(creator_id);
 224 }
 225
 226 const imageRegex = new RegExp(
 227   /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/
 228 );
 229 const videoRegex = new RegExp(`(http)?s?:?(\/\/[^"']*\.(?:mp4))`);
 230
 231 export function isImage(url: string) {
 232   return imageRegex.test(url);
 233 }
 234
 235 export function isVideo(url: string) {
 236   return videoRegex.test(url);
 237 }
 238
 239 export function validURL(str: string) {
 240   try {
 241     return !!new URL(str);
 242   } catch {
 243     return false;
 244   }
 245 }
 246
 247 export function validEmail(email: string) {
 248   let re = /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/;
 249   return re.test(String(email).toLowerCase());
 250 }
 251
 252 export function capitalizeFirstLetter(str: string): string {
 253   return str.charAt(0).toUpperCase() + str.slice(1);
 254 }
 255
 256 export function routeSortTypeToEnum(sort: string): SortType {
 257   if (sort == 'new') {
 258     return SortType.New;
 259   } else if (sort == 'hot') {
 260     return SortType.Hot;
 261   } else if (sort == 'topday') {
 262     return SortType.TopDay;
 263   } else if (sort == 'topweek') {
 264     return SortType.TopWeek;
 265   } else if (sort == 'topmonth') {
 266     return SortType.TopMonth;
 267   } else if (sort == 'topyear') {
 268     return SortType.TopYear;
 269   } else if (sort == 'topall') {
 270     return SortType.TopAll;
 271   }
 272 }
 273
 274 export function routeListingTypeToEnum(type: string): ListingType {
 275   return ListingType[capitalizeFirstLetter(type)];
 276 }
 277
 278 export function routeDataTypeToEnum(type: string): DataType {
 279   return DataType[capitalizeFirstLetter(type)];
 280 }
 281
 282 export function routeSearchTypeToEnum(type: string): SearchType {
 283   return SearchType[capitalizeFirstLetter(type)];
 284 }
 285
 286 export async function getPageTitle(url: string) {
 287   let res = await fetch(`/iframely/oembed?url=${url}`).then(res => res.json());
 288   let title = await res.title;
 289   return title;
 290 }
 291
 292 export function debounce(
 293   func: any,
 294   wait: number = 1000,
 295   immediate: boolean = false
 296 ) {
 297   // 'private' variable for instance
 298   // The returned function will be able to reference this due to closure.
 299   // Each call to the returned function will share this common timer.
 300   let timeout: any;
 301
 302   // Calling debounce returns a new anonymous function
 303   return function () {
 304     // reference the context and args for the setTimeout function
 305     var context = this,
 306       args = arguments;
 307
 308     // Should the function be called now? If immediate is true
 309     //   and not already in a timeout then the answer is: Yes
 310     var callNow = immediate && !timeout;
 311
 312     // This is the basic debounce behaviour where you can call this
 313     //   function several times, but it will only execute once
 314     //   [before or after imposing a delay].
 315     //   Each time the returned function is called, the timer starts over.
 316     clearTimeout(timeout);
 317
 318     // Set the new timeout
 319     timeout = setTimeout(function () {
 320       // Inside the timeout function, clear the timeout variable
 321       // which will let the next execution run when in 'immediate' mode
 322       timeout = null;
 323
 324       // Check if the function already ran with the immediate flag
 325       if (!immediate) {
 326         // Call the original function with apply
 327         // apply lets you define the 'this' object as well as the arguments
 328         //    (both captured before setTimeout)
 329         func.apply(context, args);
 330       }
 331     }, wait);
 332
 333     // Immediate mode and no wait timer? Execute the function..
 334     if (callNow) func.apply(context, args);
 335   };
 336 }
 337
 338 export function getLanguage(): string {
 339   let user = UserService.Instance.user;
 340   let lang = user && user.lang ? user.lang : 'browser';
 341
 342   if (lang == 'browser') {
 343     return getBrowserLanguage();
 344   } else {
 345     return lang;
 346   }
 347 }
 348
 349 export function getBrowserLanguage(): string {
 350   return navigator.language;
 351 }
 352
 353 export function getMomentLanguage(): string {
 354   let lang = getLanguage();
 355   if (lang.startsWith('zh')) {
 356     lang = 'zh-cn';
 357   } else if (lang.startsWith('sv')) {
 358     lang = 'sv';
 359   } else if (lang.startsWith('fr')) {
 360     lang = 'fr';
 361   } else if (lang.startsWith('de')) {
 362     lang = 'de';
 363   } else if (lang.startsWith('ru')) {
 364     lang = 'ru';
 365   } else if (lang.startsWith('es')) {
 366     lang = 'es';
 367   } else if (lang.startsWith('eo')) {
 368     lang = 'eo';
 369   } else if (lang.startsWith('nl')) {
 370     lang = 'nl';
 371   } else if (lang.startsWith('it')) {
 372     lang = 'it';
 373   } else if (lang.startsWith('fi')) {
 374     lang = 'fi';
 375   } else if (lang.startsWith('ca')) {
 376     lang = 'ca';
 377   } else if (lang.startsWith('fa')) {
 378     lang = 'fa';
 379   } else if (lang.startsWith('pl')) {
 380     lang = 'pl';
 381   } else if (lang.startsWith('pt')) {
 382     lang = 'pt-br';
 383   } else if (lang.startsWith('ja')) {
 384     lang = 'ja';
 385   } else if (lang.startsWith('ka')) {
 386     lang = 'ka';
 387   } else if (lang.startsWith('hi')) {
 388     lang = 'hi';
 389   } else if (lang.startsWith('el')) {
 390     lang = 'el';
 391   } else if (lang.startsWith('eu')) {
 392     lang = 'eu';
 393   } else if (lang.startsWith('gl')) {
 394     lang = 'gl';
 395   } else if (lang.startsWith('tr')) {
 396     lang = 'tr';
 397   } else if (lang.startsWith('hu')) {
 398     lang = 'hu';
 399   } else if (lang.startsWith('uk')) {
 400     lang = 'uk';
 401   } else {
 402     lang = 'en';
 403   }
 404   return lang;
 405 }
 406
 407 export function setTheme(theme: string = 'darkly') {
 408   // unload all the other themes
 409   for (var i = 0; i < themes.length; i++) {
 410     let styleSheet = document.getElementById(themes[i]);
 411     if (styleSheet) {
 412       styleSheet.setAttribute('disabled', 'disabled');
 413     }
 414   }
 415
 416   // Load the theme dynamically
 417   let cssLoc = `/static/assets/css/themes/${theme}.min.css`;
 418   loadCss(theme, cssLoc);
 419   document.getElementById(theme).removeAttribute('disabled');
 420 }
 421
 422 export function loadCss(id: string, loc: string) {
 423   if (!document.getElementById(id)) {
 424     var head = document.getElementsByTagName('head')[0];
 425     var link = document.createElement('link');
 426     link.id = id;
 427     link.rel = 'stylesheet';
 428     link.type = 'text/css';
 429     link.href = loc;
 430     link.media = 'all';
 431     head.appendChild(link);
 432   }
 433 }
 434
 435 export function objectFlip(obj: any) {
 436   const ret = {};
 437   Object.keys(obj).forEach(key => {
 438     ret[obj[key]] = key;
 439   });
 440   return ret;
 441 }
 442
 443 export function pictshareAvatarThumbnail(src: string): string {
 444   // sample url: http://localhost:8535/pictshare/gs7xuu.jpg
 445   let split = src.split('pictshare');
 446   let out = `${split[0]}pictshare/${canUseWebP() ? 'webp/' : ''}96${split[1]}`;
 447   return out;
 448 }
 449
 450 export function showAvatars(): boolean {
 451   return (
 452     (UserService.Instance.user && UserService.Instance.user.show_avatars) ||
 453     !UserService.Instance.user
 454   );
 455 }
 456
 457 // Converts to image thumbnail
 458 export function pictshareImage(
 459   hash: string,
 460   thumbnail: boolean = false
 461 ): string {
 462   let root = `/pictshare`;
 463
 464   // Necessary for other servers / domains
 465   if (hash.includes('pictshare')) {
 466     let split = hash.split('/pictshare/');
 467     root = `${split[0]}/pictshare`;
 468     hash = split[1];
 469   }
 470
 471   let out = `${root}/${canUseWebP() ? 'webp/' : ''}${
 472     thumbnail ? '192/' : ''
 473   }${hash}`;
 474   return out;
 475 }
 476
 477 export function isCommentType(item: Comment | PrivateMessage): item is Comment {
 478   return (item as Comment).community_id !== undefined;
 479 }
 480
 481 export function toast(text: string, background: string = 'success') {
 482   let backgroundColor = `var(--${background})`;
 483   Toastify({
 484     text: text,
 485     backgroundColor: backgroundColor,
 486     gravity: 'bottom',
 487     position: 'left',
 488   }).showToast();
 489 }
 490
 491 export function messageToastify(
 492   creator: string,
 493   avatar: string,
 494   body: string,
 495   link: string,
 496   router: any
 497 ) {
 498   let backgroundColor = `var(--light)`;
 499
 500   let toast = Toastify({
 501     text: `${body}<br />${creator}`,
 502     avatar: avatar,
 503     backgroundColor: backgroundColor,
 504     className: 'text-body',
 505     close: true,
 506     gravity: 'top',
 507     position: 'right',
 508     duration: 0,
 509     onClick: () => {
 510       if (toast) {
 511         toast.hideToast();
 512         router.history.push(link);
 513       }
 514     },
 515   }).showToast();
 516 }
 517
 518 export function setupTribute(): Tribute {
 519   return new Tribute({
 520     collection: [
 521       // Emojis
 522       {
 523         trigger: ':',
 524         menuItemTemplate: (item: any) => {
 525           let shortName = `:${item.original.key}:`;
 526           let twemojiIcon = twemoji.parse(item.original.val);
 527           return `${twemojiIcon} ${shortName}`;
 528         },
 529         selectTemplate: (item: any) => {
 530           return `:${item.original.key}:`;
 531         },
 532         values: Object.entries(emojiShortName).map(e => {
 533           return { key: e[1], val: e[0] };
 534         }),
 535         allowSpaces: false,
 536         autocompleteMode: true,
 537         menuItemLimit: mentionDropdownFetchLimit,
 538         menuShowMinLength: 2,
 539       },
 540       // Users
 541       {
 542         trigger: '@',
 543         selectTemplate: (item: any) => {
 544           return `[/u/${item.original.key}](/u/${item.original.key})`;
 545         },
 546         values: (text: string, cb: any) => {
 547           userSearch(text, (users: any) => cb(users));
 548         },
 549         allowSpaces: false,
 550         autocompleteMode: true,
 551         menuItemLimit: mentionDropdownFetchLimit,
 552         menuShowMinLength: 2,
 553       },
 554
 555       // Communities
 556       {
 557         trigger: '#',
 558         selectTemplate: (item: any) => {
 559           return `[/c/${item.original.key}](/c/${item.original.key})`;
 560         },
 561         values: (text: string, cb: any) => {
 562           communitySearch(text, (communities: any) => cb(communities));
 563         },
 564         allowSpaces: false,
 565         autocompleteMode: true,
 566         menuItemLimit: mentionDropdownFetchLimit,
 567         menuShowMinLength: 2,
 568       },
 569     ],
 570   });
 571 }
 572
 573 let tippyInstance = tippy('[data-tippy-content]');
 574
 575 export function setupTippy() {
 576   tippyInstance.forEach(e => e.destroy());
 577   tippyInstance = tippy('[data-tippy-content]', {
 578     delay: [500, 0],
 579     // Display on "long press"
 580     touch: ['hold', 500],
 581   });
 582 }
 583
 584 function userSearch(text: string, cb: any) {
 585   if (text) {
 586     let form: SearchForm = {
 587       q: text,
 588       type_: SearchType[SearchType.Users],
 589       sort: SortType[SortType.TopAll],
 590       page: 1,
 591       limit: mentionDropdownFetchLimit,
 592     };
 593
 594     WebSocketService.Instance.search(form);
 595
 596     this.userSub = WebSocketService.Instance.subject.subscribe(
 597       msg => {
 598         let res = wsJsonToRes(msg);
 599         if (res.op == UserOperation.Search) {
 600           let data = res.data as SearchResponse;
 601           let users = data.users.map(u => {
 602             return { key: u.name };
 603           });
 604           cb(users);
 605           this.userSub.unsubscribe();
 606         }
 607       },
 608       err => console.error(err),
 609       () => console.log('complete')
 610     );
 611   } else {
 612     cb([]);
 613   }
 614 }
 615
 616 function communitySearch(text: string, cb: any) {
 617   if (text) {
 618     let form: SearchForm = {
 619       q: text,
 620       type_: SearchType[SearchType.Communities],
 621       sort: SortType[SortType.TopAll],
 622       page: 1,
 623       limit: mentionDropdownFetchLimit,
 624     };
 625
 626     WebSocketService.Instance.search(form);
 627
 628     this.communitySub = WebSocketService.Instance.subject.subscribe(
 629       msg => {
 630         let res = wsJsonToRes(msg);
 631         if (res.op == UserOperation.Search) {
 632           let data = res.data as SearchResponse;
 633           let communities = data.communities.map(u => {
 634             return { key: u.name };
 635           });
 636           cb(communities);
 637           this.communitySub.unsubscribe();
 638         }
 639       },
 640       err => console.error(err),
 641       () => console.log('complete')
 642     );
 643   } else {
 644     cb([]);
 645   }
 646 }
 647
 648 export function getListingTypeFromProps(props: any): ListingType {
 649   return props.match.params.listing_type
 650     ? routeListingTypeToEnum(props.match.params.listing_type)
 651     : UserService.Instance.user
 652     ? UserService.Instance.user.default_listing_type
 653     : ListingType.All;
 654 }
 655
 656 // TODO might need to add a user setting for this too
 657 export function getDataTypeFromProps(props: any): DataType {
 658   return props.match.params.data_type
 659     ? routeDataTypeToEnum(props.match.params.data_type)
 660     : DataType.Post;
 661 }
 662
 663 export function getSortTypeFromProps(props: any): SortType {
 664   return props.match.params.sort
 665     ? routeSortTypeToEnum(props.match.params.sort)
 666     : UserService.Instance.user
 667     ? UserService.Instance.user.default_sort_type
 668     : SortType.Hot;
 669 }
 670
 671 export function getPageFromProps(props: any): number {
 672   return props.match.params.page ? Number(props.match.params.page) : 1;
 673 }
 674
 675 export function editCommentRes(
 676   data: CommentResponse,
 677   comments: Array<Comment>
 678 ) {
 679   let found = comments.find(c => c.id == data.comment.id);
 680   if (found) {
 681     found.content = data.comment.content;
 682     found.updated = data.comment.updated;
 683     found.removed = data.comment.removed;
 684     found.deleted = data.comment.deleted;
 685     found.upvotes = data.comment.upvotes;
 686     found.downvotes = data.comment.downvotes;
 687     found.score = data.comment.score;
 688   }
 689 }
 690
 691 export function saveCommentRes(
 692   data: CommentResponse,
 693   comments: Array<Comment>
 694 ) {
 695   let found = comments.find(c => c.id == data.comment.id);
 696   if (found) {
 697     found.saved = data.comment.saved;
 698   }
 699 }
 700
 701 export function createCommentLikeRes(
 702   data: CommentResponse,
 703   comments: Array<Comment>
 704 ) {
 705   let found: Comment = comments.find(c => c.id === data.comment.id);
 706   if (found) {
 707     found.score = data.comment.score;
 708     found.upvotes = data.comment.upvotes;
 709     found.downvotes = data.comment.downvotes;
 710     if (data.comment.my_vote !== null) {
 711       found.my_vote = data.comment.my_vote;
 712     }
 713   }
 714 }
 715
 716 export function createPostLikeFindRes(data: PostResponse, posts: Array<Post>) {
 717   let found = posts.find(c => c.id == data.post.id);
 718   if (found) {
 719     createPostLikeRes(data, found);
 720   }
 721 }
 722
 723 export function createPostLikeRes(data: PostResponse, post: Post) {
 724   if (post) {
 725     post.score = data.post.score;
 726     post.upvotes = data.post.upvotes;
 727     post.downvotes = data.post.downvotes;
 728     if (data.post.my_vote !== null) {
 729       post.my_vote = data.post.my_vote;
 730     }
 731   }
 732 }
 733
 734 export function editPostFindRes(data: PostResponse, posts: Array<Post>) {
 735   let found = posts.find(c => c.id == data.post.id);
 736   if (found) {
 737     editPostRes(data, found);
 738   }
 739 }
 740
 741 export function editPostRes(data: PostResponse, post: Post) {
 742   if (post) {
 743     post.url = data.post.url;
 744     post.name = data.post.name;
 745     post.nsfw = data.post.nsfw;
 746   }
 747 }
 748
 749 export function commentsToFlatNodes(
 750   comments: Array<Comment>
 751 ): Array<CommentNodeI> {
 752   let nodes: Array<CommentNodeI> = [];
 753   for (let comment of comments) {
 754     nodes.push({ comment: comment });
 755   }
 756   return nodes;
 757 }
 758
 759 export function commentSort(tree: Array<CommentNodeI>, sort: CommentSortType) {
 760   // First, put removed and deleted comments at the bottom, then do your other sorts
 761   if (sort == CommentSortType.Top) {
 762     tree.sort(
 763       (a, b) =>
 764         +a.comment.removed - +b.comment.removed ||
 765         +a.comment.deleted - +b.comment.deleted ||
 766         b.comment.score - a.comment.score
 767     );
 768   } else if (sort == CommentSortType.New) {
 769     tree.sort(
 770       (a, b) =>
 771         +a.comment.removed - +b.comment.removed ||
 772         +a.comment.deleted - +b.comment.deleted ||
 773         b.comment.published.localeCompare(a.comment.published)
 774     );
 775   } else if (sort == CommentSortType.Old) {
 776     tree.sort(
 777       (a, b) =>
 778         +a.comment.removed - +b.comment.removed ||
 779         +a.comment.deleted - +b.comment.deleted ||
 780         a.comment.published.localeCompare(b.comment.published)
 781     );
 782   } else if (sort == CommentSortType.Hot) {
 783     tree.sort(
 784       (a, b) =>
 785         +a.comment.removed - +b.comment.removed ||
 786         +a.comment.deleted - +b.comment.deleted ||
 787         hotRankComment(b.comment) - hotRankComment(a.comment)
 788     );
 789   }
 790
 791   // Go through the children recursively
 792   for (let node of tree) {
 793     if (node.children) {
 794       commentSort(node.children, sort);
 795     }
 796   }
 797 }
 798
 799 export function commentSortSortType(tree: Array<CommentNodeI>, sort: SortType) {
 800   commentSort(tree, convertCommentSortType(sort));
 801 }
 802
 803 function convertCommentSortType(sort: SortType): CommentSortType {
 804   if (
 805     sort == SortType.TopAll ||
 806     sort == SortType.TopDay ||
 807     sort == SortType.TopWeek ||
 808     sort == SortType.TopMonth ||
 809     sort == SortType.TopYear
 810   ) {
 811     return CommentSortType.Top;
 812   } else if (sort == SortType.New) {
 813     return CommentSortType.New;
 814   } else if (sort == SortType.Hot) {
 815     return CommentSortType.Hot;
 816   } else {
 817     return CommentSortType.Hot;
 818   }
 819 }
 820
 821 export function postSort(
 822   posts: Array<Post>,
 823   sort: SortType,
 824   communityType: boolean
 825 ) {
 826   // First, put removed and deleted comments at the bottom, then do your other sorts
 827   if (
 828     sort == SortType.TopAll ||
 829     sort == SortType.TopDay ||
 830     sort == SortType.TopWeek ||
 831     sort == SortType.TopMonth ||
 832     sort == SortType.TopYear
 833   ) {
 834     posts.sort(
 835       (a, b) =>
 836         +a.removed - +b.removed ||
 837         +a.deleted - +b.deleted ||
 838         (communityType && +b.stickied - +a.stickied) ||
 839         b.score - a.score
 840     );
 841   } else if (sort == SortType.New) {
 842     posts.sort(
 843       (a, b) =>
 844         +a.removed - +b.removed ||
 845         +a.deleted - +b.deleted ||
 846         (communityType && +b.stickied - +a.stickied) ||
 847         b.published.localeCompare(a.published)
 848     );
 849   } else if (sort == SortType.Hot) {
 850     posts.sort(
 851       (a, b) =>
 852         +a.removed - +b.removed ||
 853         +a.deleted - +b.deleted ||
 854         (communityType && +b.stickied - +a.stickied) ||
 855         hotRankPost(b) - hotRankPost(a)
 856     );
 857   }
 858 }
 859
 860 export const colorList: Array<string> = [
 861   hsl(0),
 862   hsl(100),
 863   hsl(150),
 864   hsl(200),
 865   hsl(250),
 866   hsl(300),
 867 ];
 868
 869 function hsl(num: number) {
 870   return `hsla(${num}, 35%, 50%, 1)`;
 871 }
 872
 873 function randomHsl() {
 874   return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
 875 }
 876
 877 export function previewLines(text: string, lines: number = 3): string {
 878   // Use lines * 2 because markdown requires 2 lines
 879   return text
 880     .split('\n')
 881     .slice(0, lines * 2)
 882     .join('\n');
 883 }
 884
 885 function canUseWebP() {
 886   // TODO pictshare might have a webp conversion bug, try disabling this
 887   return false;
 888
 889   // var elem = document.createElement('canvas');
 890
 891   // if (!!(elem.getContext && elem.getContext('2d'))) {
 892   //   var testString = !(window.mozInnerScreenX == null) ? 'png' : 'webp';
 893   //   // was able or not to get WebP representation
 894   //   return (
 895   //     elem.toDataURL('image/webp').startsWith('data:image/' + testString)
 896   //   );
 897   // }
 898
 899   // // very old browser like IE 8, canvas not supported
 900   // return false;
 901 }