Browse Source

Merge branch 'webm'

master
Eduard Kuzmenko 2 years ago
parent
commit
01eab0e1bb
  1. 4
      src/components/emoticonsDropdown/tabs/stickers.ts
  2. 116
      src/components/wrappers.ts
  3. 3689
      src/layer.d.ts
  4. 4
      src/lib/appManagers/appDocsManager.ts
  5. 2
      src/lib/mtproto/schema.ts
  6. 4
      src/scripts/in/schema.json
  7. 2
      src/scripts/in/schema_additional_params.json
  8. 2
      src/scripts/out/schema.json

4
src/components/emoticonsDropdown/tabs/stickers.ts

@ -43,7 +43,7 @@ export class SuperStickerRenderer {
div = document.createElement('div'); div = document.createElement('div');
div.classList.add('grid-item', 'super-sticker'); div.classList.add('grid-item', 'super-sticker');
if(doc.sticker === 2) { if(doc.animated) {
this.observeAnimatedDiv(div); this.observeAnimatedDiv(div);
} }
} }
@ -54,7 +54,7 @@ export class SuperStickerRenderer {
div, div,
lazyLoadQueue: this.regularLazyLoadQueue, lazyLoadQueue: this.regularLazyLoadQueue,
group: this.group, group: this.group,
onlyThumb: doc.sticker === 2, onlyThumb: doc.animated,
loadPromises loadPromises
}); });

116
src/components/wrappers.ts

@ -103,8 +103,14 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
searchContext?: MediaSearchContext, searchContext?: MediaSearchContext,
}) { }) {
const isAlbumItem = !(boxWidth && boxHeight); const isAlbumItem = !(boxWidth && boxHeight);
const canAutoplay = (doc.type !== 'video' || (doc.size <= MAX_VIDEO_AUTOPLAY_SIZE && !isAlbumItem)) const canAutoplay = /* doc.sticker || */(
&& (doc.type === 'gif' ? rootScope.settings.autoPlay.gifs : rootScope.settings.autoPlay.videos); (
doc.type !== 'video' || (
doc.size <= MAX_VIDEO_AUTOPLAY_SIZE &&
!isAlbumItem
)
) && (doc.type === 'gif' ? rootScope.settings.autoPlay.gifs : rootScope.settings.autoPlay.videos)
);
let spanTime: HTMLElement, spanPlay: HTMLElement; let spanTime: HTMLElement, spanPlay: HTMLElement;
if(!noInfo) { if(!noInfo) {
@ -402,7 +408,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
preloader = (message.media as any).preloader as ProgressivePreloader; preloader = (message.media as any).preloader as ProgressivePreloader;
preloader.attach(container, false); preloader.attach(container, false);
noAutoDownload = undefined; noAutoDownload = undefined;
} else if(!cacheContext.downloaded && !doc.supportsStreaming) { } else if(!cacheContext.downloaded && !doc.supportsStreaming && !withoutPreloader) {
preloader = new ProgressivePreloader({ preloader = new ProgressivePreloader({
attachMethod: 'prepend' attachMethod: 'prepend'
}); });
@ -459,14 +465,16 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
} }
let loadPromise: Promise<any> = Promise.resolve(); let loadPromise: Promise<any> = Promise.resolve();
if(preloader && !isUpload) { if((preloader && !isUpload) || withoutPreloader) {
if(!cacheContext.downloaded && !doc.supportsStreaming) { if(!cacheContext.downloaded && !doc.supportsStreaming) {
const promise = loadPromise = appDocsManager.downloadDoc(doc, lazyLoadQueue?.queueId, noAutoDownload); const promise = loadPromise = appDocsManager.downloadDoc(doc, lazyLoadQueue?.queueId, noAutoDownload);
preloader.attach(container, false, promise); if(preloader) {
preloader.attach(container, false, promise);
}
} else if(doc.supportsStreaming) { } else if(doc.supportsStreaming) {
if(noAutoDownload) { if(noAutoDownload) {
loadPromise = Promise.reject(); loadPromise = Promise.reject();
} else if(!cacheContext.downloaded) { // * check for uploading video } else if(!cacheContext.downloaded && preloader) { // * check for uploading video
preloader.attach(container, false, null); preloader.attach(container, false, null);
video.addEventListener(IS_SAFARI ? 'timeupdate' : 'canplay', () => { video.addEventListener(IS_SAFARI ? 'timeupdate' : 'canplay', () => {
preloader.detach(); preloader.detach();
@ -1157,6 +1165,34 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
div.dataset.docId = '' + doc.id; div.dataset.docId = '' + doc.id;
div.classList.add('media-sticker-wrapper'); div.classList.add('media-sticker-wrapper');
/* if(stickerType === 3) {
const videoRes = wrapVideo({
doc,
boxWidth: width,
boxHeight: height,
container: div,
group,
lazyLoadQueue,
middleware,
withoutPreloader: true,
loadPromises,
noPlayButton: true,
noInfo: true
});
if(videoRes.thumb) {
if(videoRes.thumb.images.thumb) {
videoRes.thumb.images.thumb.classList.add('media-sticker', 'thumbnail');
}
if(videoRes.thumb.images.full) {
videoRes.thumb.images.full.classList.add('media-sticker');
}
}
return videoRes.loadPromise;
} */
//console.log('wrap sticker', doc, div, onlyThumb); //console.log('wrap sticker', doc, div, onlyThumb);
@ -1219,7 +1255,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
}).catch(() => {}); }).catch(() => {});
} }
} }
} else if(stickerType === 2 && (withThumb || onlyThumb) && toneIndex <= 0) { } else if(((stickerType === 2 && toneIndex <= 0) || stickerType === 3) && (withThumb || onlyThumb)) {
thumbImage = new Image(); thumbImage = new Image();
const load = () => { const load = () => {
@ -1513,40 +1549,64 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
}); });
//console.timeEnd('render sticker' + doc.id); //console.timeEnd('render sticker' + doc.id);
} else if(stickerType === 1) { } else if(stickerType === 1 || stickerType === 3) {
const image = new Image(); let media: HTMLElement;
const thumbImage = div.firstElementChild !== image && div.firstElementChild; if(stickerType === 1) {
media = new Image();
} else {
media = document.createElement('video');
media.setAttribute('playsinline', 'true');
(media as HTMLVideoElement).muted = true;
if(play) {
(media as HTMLVideoElement).autoplay = true;
(media as HTMLVideoElement).loop = true;
}
}
const thumbImage = div.firstElementChild !== media && div.firstElementChild;
needFadeIn = (needFadeIn || !downloaded || thumbImage) && rootScope.settings.animationsEnabled; needFadeIn = (needFadeIn || !downloaded || thumbImage) && rootScope.settings.animationsEnabled;
image.classList.add('media-sticker'); media.classList.add('media-sticker');
if(needFadeIn) { if(needFadeIn) {
image.classList.add('fade-in'); media.classList.add('fade-in');
} }
return new Promise<void>((resolve, reject) => { return new Promise<void>((resolve, reject) => {
const r = () => { const r = () => {
if(middleware && !middleware()) return resolve(); if(middleware && !middleware()) return resolve();
renderImageFromUrl(image, cacheContext.url, () => { const onLoad = () => {
sequentialDom.mutateElement(div, () => { sequentialDom.mutateElement(div, () => {
div.append(image); div.append(media);
if(thumbImage) { if(thumbImage) {
thumbImage.classList.add('fade-out'); thumbImage.classList.add('fade-out');
} }
if(stickerType === 3 && group) {
animationIntersector.addAnimation(media as HTMLVideoElement, group);
}
resolve(); resolve();
if(needFadeIn) { if(needFadeIn) {
image.addEventListener('animationend', () => { media.addEventListener('animationend', () => {
image.classList.remove('fade-in'); media.classList.remove('fade-in');
if(thumbImage) { if(thumbImage) {
thumbImage.remove(); thumbImage.remove();
} }
}, {once: true}); }, {once: true});
} }
}); });
}); };
if(stickerType === 1) {
renderImageFromUrl(media, cacheContext.url, onLoad);
} else {
(media as HTMLVideoElement).src = cacheContext.url;
onMediaLoad(media as HTMLVideoElement).then(onLoad);
}
}; };
if(cacheContext.url) r(); if(cacheContext.url) r();
@ -1561,7 +1621,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
(lazyLoadQueue.push({div, load}), Promise.resolve()) : (lazyLoadQueue.push({div, load}), Promise.resolve()) :
load(); load();
if(downloaded && stickerType === 1) { if(downloaded && (stickerType === 1 || stickerType === 3)) {
loadThumbPromise = loadPromise as any; loadThumbPromise = loadPromise as any;
if(loadPromises) { if(loadPromises) {
loadPromises.push(loadThumbPromise); loadPromises.push(loadThumbPromise);
@ -1588,7 +1648,7 @@ export async function wrapStickerSetThumb({set, lazyLoadQueue, container, group,
const downloadOptions = appStickersManager.getStickerSetThumbDownloadOptions(set); const downloadOptions = appStickersManager.getStickerSetThumbDownloadOptions(set);
const promise = appDownloadManager.download(downloadOptions); const promise = appDownloadManager.download(downloadOptions);
if(set.pFlags.animated) { if(set.pFlags.animated && !set.pFlags.videos) {
return promise return promise
.then(readBlobAsText) .then(readBlobAsText)
//.then(JSON.parse) //.then(JSON.parse)
@ -1605,12 +1665,22 @@ export async function wrapStickerSetThumb({set, lazyLoadQueue, container, group,
}, group); }, group);
}); });
} else { } else {
const image = new Image(); let media: HTMLElement;
image.classList.add('media-sticker'); if(set.pFlags.videos) {
media = document.createElement('video');
media.setAttribute('playsinline', 'true');
(media as HTMLVideoElement).autoplay = true;
(media as HTMLVideoElement).muted = true;
(media as HTMLVideoElement).loop = true;
} else {
media = new Image();
}
media.classList.add('media-sticker');
return promise.then(blob => { return promise.then(blob => {
renderImageFromUrl(image, URL.createObjectURL(blob), () => { renderImageFromUrl(media, URL.createObjectURL(blob), () => {
container.append(image); container.append(media);
}); });
}); });
} }

3689
src/layer.d.ts vendored

File diff suppressed because it is too large Load Diff

4
src/lib/appManagers/appDocsManager.ts

@ -144,6 +144,10 @@ export class AppDocsManager {
if(/* apiDoc.thumbs && */doc.mime_type === 'image/webp' && (doc.thumbs || IS_WEBP_SUPPORTED)) { if(/* apiDoc.thumbs && */doc.mime_type === 'image/webp' && (doc.thumbs || IS_WEBP_SUPPORTED)) {
doc.type = 'sticker'; doc.type = 'sticker';
doc.sticker = 1; doc.sticker = 1;
} else if(doc.mime_type === 'video/webm') {
doc.type = 'sticker';
doc.sticker = 3;
doc.animated = true;
} }
break; break;

2
src/lib/mtproto/schema.ts

File diff suppressed because one or more lines are too long

4
src/scripts/in/schema.json

File diff suppressed because one or more lines are too long

2
src/scripts/in/schema_additional_params.json

@ -11,7 +11,7 @@
{"name": "duration", "type": "number"}, {"name": "duration", "type": "number"},
{"name": "audioTitle", "type": "string"}, {"name": "audioTitle", "type": "string"},
{"name": "audioPerformer", "type": "string"}, {"name": "audioPerformer", "type": "string"},
{"name": "sticker", "type": "1 | 2"}, {"name": "sticker", "type": "1 | 2 | 3"},
{"name": "stickerEmoji", "type": "string"}, {"name": "stickerEmoji", "type": "string"},
{"name": "stickerEmojiRaw", "type": "string"}, {"name": "stickerEmojiRaw", "type": "string"},
{"name": "stickerSetInput", "type": "InputStickerSet.inputStickerSetID"}, {"name": "stickerSetInput", "type": "InputStickerSet.inputStickerSetID"},

2
src/scripts/out/schema.json

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save