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 pictrsAvatarThumbnail(src: string): string {
 444   // sample url: http://localhost:8535/pictrs/image/thumbnail256/gs7xuu.jpg
 445   let split = src.split('/pictrs/image');
 446   let out = `${split[0]}/pictrs/image/${
 447     canUseWebP() ? 'webp/' : ''
 448   }thumbnail96${split[1]}`;
 449   return out;
 450 }
 451
 452 export function showAvatars(): boolean {
 453   return (
 454     (UserService.Instance.user && UserService.Instance.user.show_avatars) ||
 455     !UserService.Instance.user
 456   );
 457 }
 458
 459 // Converts to image thumbnail
 460 export function pictrsImage(hash: string, thumbnail: boolean = false): string {
 461   let root = `/pictrs/image`;
 462
 463   // Necessary for other servers / domains
 464   if (hash.includes('pictrs')) {
 465     let split = hash.split('/pictrs/image/');
 466     root = `${split[0]}/pictrs/image`;
 467     hash = split[1];
 468   }
 469
 470   let out = `${root}/${canUseWebP() ? 'webp/' : ''}${
 471     thumbnail ? 'thumbnail192/' : ''
 472   }${hash}`;
 473   return out;
 474 }
 475
 476 export function isCommentType(item: Comment | PrivateMessage): item is Comment {
 477   return (item as Comment).community_id !== undefined;
 478 }
 479
 480 export function toast(text: string, background: string = 'success') {
 481   let backgroundColor = `var(--${background})`;
 482   Toastify({
 483     text: text,
 484     backgroundColor: backgroundColor,
 485     gravity: 'bottom',
 486     position: 'left',
 487   }).showToast();
 488 }
 489
 490 export function messageToastify(
 491   creator: string,
 492   avatar: string,
 493   body: string,
 494   link: string,
 495   router: any
 496 ) {
 497   let backgroundColor = `var(--light)`;
 498
 499   let toast = Toastify({
 500     text: `${body}<br />${creator}`,
 501     avatar: avatar,
 502     backgroundColor: backgroundColor,
 503     className: 'text-body',
 504     close: true,
 505     gravity: 'top',
 506     position: 'right',
 507     duration: 0,
 508     onClick: () => {
 509       if (toast) {
 510         toast.hideToast();
 511         router.history.push(link);
 512       }
 513     },
 514   }).showToast();
 515 }
 516
 517 export function setupTribute(): Tribute {
 518   return new Tribute({
 519     collection: [
 520       // Emojis
 521       {
 522         trigger: ':',
 523         menuItemTemplate: (item: any) => {
 524           let shortName = `:${item.original.key}:`;
 525           let twemojiIcon = twemoji.parse(item.original.val);
 526           return `${twemojiIcon} ${shortName}`;
 527         },
 528         selectTemplate: (item: any) => {
 529           return `:${item.original.key}:`;
 530         },
 531         values: Object.entries(emojiShortName).map(e => {
 532           return { key: e[1], val: e[0] };
 533         }),
 534         allowSpaces: false,
 535         autocompleteMode: true,
 536         menuItemLimit: mentionDropdownFetchLimit,
 537         menuShowMinLength: 2,
 538       },
 539       // Users
 540       {
 541         trigger: '@',
 542         selectTemplate: (item: any) => {
 543           return `[/u/${item.original.key}](/u/${item.original.key})`;
 544         },
 545         values: (text: string, cb: any) => {
 546           userSearch(text, (users: any) => cb(users));
 547         },
 548         allowSpaces: false,
 549         autocompleteMode: true,
 550         menuItemLimit: mentionDropdownFetchLimit,
 551         menuShowMinLength: 2,
 552       },
 553
 554       // Communities
 555       {
 556         trigger: '#',
 557         selectTemplate: (item: any) => {
 558           return `[/c/${item.original.key}](/c/${item.original.key})`;
 559         },
 560         values: (text: string, cb: any) => {
 561           communitySearch(text, (communities: any) => cb(communities));
 562         },
 563         allowSpaces: false,
 564         autocompleteMode: true,
 565         menuItemLimit: mentionDropdownFetchLimit,
 566         menuShowMinLength: 2,
 567       },
 568     ],
 569   });
 570 }
 571
 572 let tippyInstance = tippy('[data-tippy-content]');
 573
 574 export function setupTippy() {
 575   tippyInstance.forEach(e => e.destroy());
 576   tippyInstance = tippy('[data-tippy-content]', {
 577     delay: [500, 0],
 578     // Display on "long press"
 579     touch: ['hold', 500],
 580   });
 581 }
 582
 583 function userSearch(text: string, cb: any) {
 584   if (text) {
 585     let form: SearchForm = {
 586       q: text,
 587       type_: SearchType[SearchType.Users],
 588       sort: SortType[SortType.TopAll],
 589       page: 1,
 590       limit: mentionDropdownFetchLimit,
 591     };
 592
 593     WebSocketService.Instance.search(form);
 594
 595     this.userSub = WebSocketService.Instance.subject.subscribe(
 596       msg => {
 597         let res = wsJsonToRes(msg);
 598         if (res.op == UserOperation.Search) {
 599           let data = res.data as SearchResponse;
 600           let users = data.users.map(u => {
 601             return { key: u.name };
 602           });
 603           cb(users);
 604           this.userSub.unsubscribe();
 605         }
 606       },
 607       err => console.error(err),
 608       () => console.log('complete')
 609     );
 610   } else {
 611     cb([]);
 612   }
 613 }
 614
 615 function communitySearch(text: string, cb: any) {
 616   if (text) {
 617     let form: SearchForm = {
 618       q: text,
 619       type_: SearchType[SearchType.Communities],
 620       sort: SortType[SortType.TopAll],
 621       page: 1,
 622       limit: mentionDropdownFetchLimit,
 623     };
 624
 625     WebSocketService.Instance.search(form);
 626
 627     this.communitySub = WebSocketService.Instance.subject.subscribe(
 628       msg => {
 629         let res = wsJsonToRes(msg);
 630         if (res.op == UserOperation.Search) {
 631           let data = res.data as SearchResponse;
 632           let communities = data.communities.map(u => {
 633             return { key: u.name };
 634           });
 635           cb(communities);
 636           this.communitySub.unsubscribe();
 637         }
 638       },
 639       err => console.error(err),
 640       () => console.log('complete')
 641     );
 642   } else {
 643     cb([]);
 644   }
 645 }
 646
 647 export function getListingTypeFromProps(props: any): ListingType {
 648   return props.match.params.listing_type
 649     ? routeListingTypeToEnum(props.match.params.listing_type)
 650     : UserService.Instance.user
 651     ? UserService.Instance.user.default_listing_type
 652     : ListingType.All;
 653 }
 654
 655 // TODO might need to add a user setting for this too
 656 export function getDataTypeFromProps(props: any): DataType {
 657   return props.match.params.data_type
 658     ? routeDataTypeToEnum(props.match.params.data_type)
 659     : DataType.Post;
 660 }
 661
 662 export function getSortTypeFromProps(props: any): SortType {
 663   return props.match.params.sort
 664     ? routeSortTypeToEnum(props.match.params.sort)
 665     : UserService.Instance.user
 666     ? UserService.Instance.user.default_sort_type
 667     : SortType.Hot;
 668 }
 669
 670 export function getPageFromProps(props: any): number {
 671   return props.match.params.page ? Number(props.match.params.page) : 1;
 672 }
 673
 674 export function editCommentRes(
 675   data: CommentResponse,
 676   comments: Array<Comment>
 677 ) {
 678   let found = comments.find(c => c.id == data.comment.id);
 679   if (found) {
 680     found.content = data.comment.content;
 681     found.updated = data.comment.updated;
 682     found.removed = data.comment.removed;
 683     found.deleted = data.comment.deleted;
 684     found.upvotes = data.comment.upvotes;
 685     found.downvotes = data.comment.downvotes;
 686     found.score = data.comment.score;
 687   }
 688 }
 689
 690 export function saveCommentRes(
 691   data: CommentResponse,
 692   comments: Array<Comment>
 693 ) {
 694   let found = comments.find(c => c.id == data.comment.id);
 695   if (found) {
 696     found.saved = data.comment.saved;
 697   }
 698 }
 699
 700 export function createCommentLikeRes(
 701   data: CommentResponse,
 702   comments: Array<Comment>
 703 ) {
 704   let found: Comment = comments.find(c => c.id === data.comment.id);
 705   if (found) {
 706     found.score = data.comment.score;
 707     found.upvotes = data.comment.upvotes;
 708     found.downvotes = data.comment.downvotes;
 709     if (data.comment.my_vote !== null) {
 710       found.my_vote = data.comment.my_vote;
 711     }
 712   }
 713 }
 714
 715 export function createPostLikeFindRes(data: PostResponse, posts: Array<Post>) {
 716   let found = posts.find(c => c.id == data.post.id);
 717   if (found) {
 718     createPostLikeRes(data, found);
 719   }
 720 }
 721
 722 export function createPostLikeRes(data: PostResponse, post: Post) {
 723   if (post) {
 724     post.score = data.post.score;
 725     post.upvotes = data.post.upvotes;
 726     post.downvotes = data.post.downvotes;
 727     if (data.post.my_vote !== null) {
 728       post.my_vote = data.post.my_vote;
 729     }
 730   }
 731 }
 732
 733 export function editPostFindRes(data: PostResponse, posts: Array<Post>) {
 734   let found = posts.find(c => c.id == data.post.id);
 735   if (found) {
 736     editPostRes(data, found);
 737   }
 738 }
 739
 740 export function editPostRes(data: PostResponse, post: Post) {
 741   if (post) {
 742     post.url = data.post.url;
 743     post.name = data.post.name;
 744     post.nsfw = data.post.nsfw;
 745   }
 746 }
 747
 748 export function commentsToFlatNodes(
 749   comments: Array<Comment>
 750 ): Array<CommentNodeI> {
 751   let nodes: Array<CommentNodeI> = [];
 752   for (let comment of comments) {
 753     nodes.push({ comment: comment });
 754   }
 755   return nodes;
 756 }
 757
 758 export function commentSort(tree: Array<CommentNodeI>, sort: CommentSortType) {
 759   // First, put removed and deleted comments at the bottom, then do your other sorts
 760   if (sort == CommentSortType.Top) {
 761     tree.sort(
 762       (a, b) =>
 763         +a.comment.removed - +b.comment.removed ||
 764         +a.comment.deleted - +b.comment.deleted ||
 765         b.comment.score - a.comment.score
 766     );
 767   } else if (sort == CommentSortType.New) {
 768     tree.sort(
 769       (a, b) =>
 770         +a.comment.removed - +b.comment.removed ||
 771         +a.comment.deleted - +b.comment.deleted ||
 772         b.comment.published.localeCompare(a.comment.published)
 773     );
 774   } else if (sort == CommentSortType.Old) {
 775     tree.sort(
 776       (a, b) =>
 777         +a.comment.removed - +b.comment.removed ||
 778         +a.comment.deleted - +b.comment.deleted ||
 779         a.comment.published.localeCompare(b.comment.published)
 780     );
 781   } else if (sort == CommentSortType.Hot) {
 782     tree.sort(
 783       (a, b) =>
 784         +a.comment.removed - +b.comment.removed ||
 785         +a.comment.deleted - +b.comment.deleted ||
 786         hotRankComment(b.comment) - hotRankComment(a.comment)
 787     );
 788   }
 789
 790   // Go through the children recursively
 791   for (let node of tree) {
 792     if (node.children) {
 793       commentSort(node.children, sort);
 794     }
 795   }
 796 }
 797
 798 export function commentSortSortType(tree: Array<CommentNodeI>, sort: SortType) {
 799   commentSort(tree, convertCommentSortType(sort));
 800 }
 801
 802 function convertCommentSortType(sort: SortType): CommentSortType {
 803   if (
 804     sort == SortType.TopAll ||
 805     sort == SortType.TopDay ||
 806     sort == SortType.TopWeek ||
 807     sort == SortType.TopMonth ||
 808     sort == SortType.TopYear
 809   ) {
 810     return CommentSortType.Top;
 811   } else if (sort == SortType.New) {
 812     return CommentSortType.New;
 813   } else if (sort == SortType.Hot) {
 814     return CommentSortType.Hot;
 815   } else {
 816     return CommentSortType.Hot;
 817   }
 818 }
 819
 820 export function postSort(
 821   posts: Array<Post>,
 822   sort: SortType,
 823   communityType: boolean
 824 ) {
 825   // First, put removed and deleted comments at the bottom, then do your other sorts
 826   if (
 827     sort == SortType.TopAll ||
 828     sort == SortType.TopDay ||
 829     sort == SortType.TopWeek ||
 830     sort == SortType.TopMonth ||
 831     sort == SortType.TopYear
 832   ) {
 833     posts.sort(
 834       (a, b) =>
 835         +a.removed - +b.removed ||
 836         +a.deleted - +b.deleted ||
 837         (communityType && +b.stickied - +a.stickied) ||
 838         b.score - a.score
 839     );
 840   } else if (sort == SortType.New) {
 841     posts.sort(
 842       (a, b) =>
 843         +a.removed - +b.removed ||
 844         +a.deleted - +b.deleted ||
 845         (communityType && +b.stickied - +a.stickied) ||
 846         b.published.localeCompare(a.published)
 847     );
 848   } else if (sort == SortType.Hot) {
 849     posts.sort(
 850       (a, b) =>
 851         +a.removed - +b.removed ||
 852         +a.deleted - +b.deleted ||
 853         (communityType && +b.stickied - +a.stickied) ||
 854         hotRankPost(b) - hotRankPost(a)
 855     );
 856   }
 857 }
 858
 859 export const colorList: Array<string> = [
 860   hsl(0),
 861   hsl(100),
 862   hsl(150),
 863   hsl(200),
 864   hsl(250),
 865   hsl(300),
 866 ];
 867
 868 function hsl(num: number) {
 869   return `hsla(${num}, 35%, 50%, 1)`;
 870 }
 871
 872 function randomHsl() {
 873   return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
 874 }
 875
 876 export function previewLines(text: string, lines: number = 3): string {
 877   // Use lines * 2 because markdown requires 2 lines
 878   return text
 879     .split('\n')
 880     .slice(0, lines * 2)
 881     .join('\n');
 882 }
 883
 884 function canUseWebP() {
 885   // TODO pictshare might have a webp conversion bug, try disabling this
 886   return false;
 887
 888   // var elem = document.createElement('canvas');
 889
 890   // if (!!(elem.getContext && elem.getContext('2d'))) {
 891   //   var testString = !(window.mozInnerScreenX == null) ? 'png' : 'webp';
 892   //   // was able or not to get WebP representation
 893   //   return (
 894   //     elem.toDataURL('image/webp').startsWith('data:image/' + testString)
 895   //   );
 896   // }
 897
 898   // // very old browser like IE 8, canvas not supported
 899   // return false;
 900 }