Browse Source

Media viewer changes:

New date formatting
Providing now correct date of message
master
Eduard Kuzmenko 4 years ago
parent
commit
87c747a31a
  1. 31
      src/components/appMediaViewer.ts
  2. 2
      src/helpers/date.ts
  3. 3
      src/lib/appManagers/appImManager.ts

31
src/components/appMediaViewer.ts

@ -23,8 +23,9 @@ import { renderImageFromUrl } from "./misc";
import PopupForward from "./popupForward"; import PopupForward from "./popupForward";
import ProgressivePreloader from "./preloader"; import ProgressivePreloader from "./preloader";
import Scrollable from "./scrollable"; import Scrollable from "./scrollable";
import appSidebarRight, { AppSidebarRight } from "./sidebarRight"; import appSidebarRight from "./sidebarRight";
import SwipeHandler from "./swipeHandler"; import SwipeHandler from "./swipeHandler";
import { months, ONE_DAY } from "../helpers/date";
// TODO: масштабирование картинок (не SVG) при ресайзе, и правильный возврат на исходную позицию // TODO: масштабирование картинок (не SVG) при ресайзе, и правильный возврат на исходную позицию
// TODO: картинки "обрезаются" если возвращаются или появляются с места, где есть их перекрытие (топбар, поле ввода) // TODO: картинки "обрезаются" если возвращаются или появляются с места, где есть их перекрытие (топбар, поле ввода)
@ -772,11 +773,23 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
} }
protected setAuthorInfo(fromID: number, timestamp: number) { protected setAuthorInfo(fromID: number, timestamp: number) {
const date = new Date(timestamp * 1000); const date = new Date();
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const time = new Date(timestamp * 1000);
const now = date.getTime() / 1000;
const timeStr = time.getHours() + ':' + ('0' + time.getMinutes()).slice(-2);
let dateStr: string;
if((now - timestamp) < ONE_DAY && date.getDate() == time.getDate()) { // if the same day
dateStr = 'Today';
} else if((now - timestamp) < (ONE_DAY * 2) && (date.getDate() - 1) == time.getDate()) { // yesterday
dateStr = 'Yesterday';
} else if(date.getFullYear() != time.getFullYear()) { // different year
dateStr = months[time.getMonth()].slice(0, 3) + ' ' + time.getDate() + ', ' + time.getFullYear();
} else {
dateStr = months[time.getMonth()].slice(0, 3) + ' ' + time.getDate();
}
const dateStr = months[date.getMonth()] + ' ' + date.getDate() + ' at '+ date.getHours() + ':' + ('0' + date.getMinutes()).slice(-2); this.author.date.innerText = dateStr + ' at ' + timeStr;
this.author.date.innerText = dateStr;
const name = appPeersManager.getPeerTitle(fromID); const name = appPeersManager.getPeerTitle(fromID);
this.author.nameEl.innerHTML = name; this.author.nameEl.innerHTML = name;
@ -787,13 +800,13 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
oldAvatar.parentElement.replaceChild(this.author.avatarEl, oldAvatar); oldAvatar.parentElement.replaceChild(this.author.avatarEl, oldAvatar);
} }
protected async _openMedia(media: any, fromID: number, fromRight: number, target?: HTMLElement, reverse = false, protected async _openMedia(media: any, timestamp: number, fromID: number, fromRight: number, target?: HTMLElement, reverse = false,
prevTargets: TargetType[] = [], nextTargets: TargetType[] = [], needLoadMore = true) { prevTargets: TargetType[] = [], nextTargets: TargetType[] = [], needLoadMore = true) {
if(this.setMoverPromise) return this.setMoverPromise; if(this.setMoverPromise) return this.setMoverPromise;
this.log('openMedia:', media, fromID); this.log('openMedia:', media, fromID);
this.setAuthorInfo(fromID, media.date); this.setAuthorInfo(fromID, timestamp);
const isVideo = (media as MyDocument).type == 'video' || (media as MyDocument).type == 'gif'; const isVideo = (media as MyDocument).type == 'video' || (media as MyDocument).type == 'gif';
@ -1315,7 +1328,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
} }
this.currentMessageID = mid; this.currentMessageID = mid;
const promise = super._openMedia(media, fromID, fromRight, target, reverse, prevTargets, nextTargets, needLoadMore); const promise = super._openMedia(media, message.date, fromID, fromRight, target, reverse, prevTargets, nextTargets, needLoadMore);
this.setCaption(message); this.setCaption(message);
return promise; return promise;
@ -1404,6 +1417,6 @@ export class AppMediaViewerAvatar extends AppMediaViewerBase<'', 'delete', AppMe
this.currentPhotoID = photo.id; this.currentPhotoID = photo.id;
return super._openMedia(photo, this.peerID, fromRight, target, false); return super._openMedia(photo, photo.date, this.peerID, fromRight, target, false);
} }
} }

2
src/helpers/date.ts

@ -1,7 +1,7 @@
export const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; export const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
export const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; export const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const ONE_DAY = 86400; export const ONE_DAY = 86400;
// https://stackoverflow.com/a/6117889 // https://stackoverflow.com/a/6117889
export const getWeekNumber = (date: Date) => { export const getWeekNumber = (date: Date) => {

3
src/lib/appManagers/appImManager.ts

@ -53,6 +53,7 @@ import appPollsManager from './appPollsManager';
import appProfileManager from "./appProfileManager"; import appProfileManager from "./appProfileManager";
import appStickersManager from './appStickersManager'; import appStickersManager from './appStickersManager';
import appUsersManager from "./appUsersManager"; import appUsersManager from "./appUsersManager";
import { months } from '../../helpers/date';
//console.log('appImManager included33!'); //console.log('appImManager included33!');
@ -1542,8 +1543,6 @@ export class AppImManager {
if(today.getTime() == date.getTime()) { if(today.getTime() == date.getTime()) {
str = 'Today'; str = 'Today';
} else { } else {
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
str = months[date.getMonth()] + ' ' + date.getDate(); str = months[date.getMonth()] + ' ' + date.getDate();
if(date.getFullYear() != today.getFullYear()) { if(date.getFullYear() != today.getFullYear()) {

Loading…
Cancel
Save