From 54a804f07a2f940282d371bbaf9114bdaf4ee13f Mon Sep 17 00:00:00 2001 From: AlexWebArchitect Date: Sun, 18 Jul 2021 21:11:26 +0300 Subject: [PATCH 1/8] add video playback rate setting --- src/lib/mediaPlayer.ts | 16 ++++++++++++++++ src/scss/partials/_ckin.scss | 2 ++ 2 files changed, 18 insertions(+) diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts index cb8091c0..4a694d7a 100644 --- a/src/lib/mediaPlayer.ts +++ b/src/lib/mediaPlayer.ts @@ -11,6 +11,9 @@ import RangeSelector from "../components/rangeSelector"; import { onVideoLoad } from "../helpers/files"; import { cancelEvent } from "../helpers/dom/cancelEvent"; import ListenerSetter from "../helpers/listenerSetter"; +import ButtonMenu from "../components/buttonMenu"; +import { ButtonMenuToggleHandler } from "../components/buttonMenuToggle"; +import { LangPackKey } from "./langPack"; export class MediaProgressLine extends RangeSelector { private filledLoad: HTMLDivElement; @@ -187,6 +190,7 @@ export default class VideoPlayer { this.skin = video.dataset.ckin ?? 'default'; this.stylePlayer(duration); + this.setBtnMenuToggle(); if(this.skin === 'default') { const controls = this.wrapper.querySelector('.default__controls.ckin__controls') as HTMLDivElement; @@ -420,6 +424,7 @@ export default class VideoPlayer {
+
@@ -427,6 +432,17 @@ export default class VideoPlayer { } } + protected setBtnMenuToggle() { + const buttons = [0.25, 0.5, 1, 1.25, 1.5, 2].map((rate) => { + return { icon: '', text: rate.toString() as LangPackKey, onClick: () => { this.video.playbackRate = rate; } } + }); + const btnMenu = ButtonMenu(buttons); + const settingsButton = this.wrapper.querySelector('.settings') as HTMLElement; + btnMenu.classList.add('top-left'); + ButtonMenuToggleHandler(settingsButton); + settingsButton.append(btnMenu); + } + public static isFullScreen(): boolean { // @ts-ignore return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement); diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index 68ef0f0d..e2a06f7a 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -425,6 +425,8 @@ input[type=range] { } .right-controls { + display: flex; + align-items: center; float: right; } From 7d794758a193293198dd430505a7a86145aec1d1 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Mon, 19 Jul 2021 17:58:02 +0300 Subject: [PATCH 2/8] Possible FILE_REFERENCE_EXPIRED fix --- src/lib/appManagers/appStickersManager.ts | 1 + src/lib/mtproto/apiFileManager.ts | 52 ++++++++++++++--------- src/lib/mtproto/mtproto.worker.ts | 3 +- 3 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/lib/appManagers/appStickersManager.ts b/src/lib/appManagers/appStickersManager.ts index bf67aa62..4d9dcf08 100644 --- a/src/lib/appManagers/appStickersManager.ts +++ b/src/lib/appManagers/appStickersManager.ts @@ -55,6 +55,7 @@ export class AppStickersManager { if(!this.getGreetingStickersPromise) { this.getGreetingStickersPromise = this.getStickersByEmoticon('👋⭐️', false).then(docs => { + if(!docs.length) throw 'NO_STICKERS'; this.greetingStickers = docs.slice() as Document.document[]; this.greetingStickers.sort((a, b) => Math.random() - Math.random()); }); diff --git a/src/lib/mtproto/apiFileManager.ts b/src/lib/mtproto/apiFileManager.ts index de5afa1d..cf521091 100644 --- a/src/lib/mtproto/apiFileManager.ts +++ b/src/lib/mtproto/apiFileManager.ts @@ -86,7 +86,12 @@ export class ApiFileManager { private downloadActives: {[dcId: string]: number} = {}; public webpConvertPromises: {[fileName: string]: CancellablePromise} = {}; - public refreshReferencePromises: {[referenceHex: string]: CancellablePromise} = {}; + public refreshReferencePromises: { + [referenceHex: string]: { + deferred: CancellablePromise, + ready: Promise + } + } = {}; private log: ReturnType = logger('AFM', LogTypes.Error | LogTypes.Log); private tempId = 0; @@ -96,7 +101,7 @@ export class ApiFileManager { constructor() { setInterval(() => { // clear old promises for(const hex in this.refreshReferencePromises) { - const deferred = this.refreshReferencePromises[hex]; + const {deferred} = this.refreshReferencePromises[hex]; if(deferred.isFulfilled || deferred.isRejected) { delete this.refreshReferencePromises[hex]; } @@ -256,29 +261,36 @@ export class ApiFileManager { private refreshReference(inputFileLocation: InputFileLocation) { const reference = (inputFileLocation as InputFileLocation.inputDocumentFileLocation).file_reference; const hex = bytesToHex(reference); - let promise = this.refreshReferencePromises[hex]; - const havePromise = !!promise; - if(!havePromise) { - promise = deferredPromise(); - this.refreshReferencePromises[hex] = promise; - } + let r = this.refreshReferencePromises[hex]; + if(!r) { + const deferred = deferredPromise(); - promise = promise.then(reference => { - if(hex === bytesToHex(reference)) { - throw 'REFERENCE_IS_NOT_REFRESHED'; - } - - return (inputFileLocation as InputFileLocation.inputDocumentFileLocation).file_reference = reference; - }); + r = this.refreshReferencePromises[hex] = { + deferred, + ready: deferred.then(reference => { + if(hex === bytesToHex(reference)) { + throw 'REFERENCE_IS_NOT_REFRESHED'; + } - if(havePromise) { - return promise; + (inputFileLocation as InputFileLocation.inputDocumentFileLocation).file_reference = reference; + }) + }; + + const timeout = setTimeout(() => { + this.log.error('Didn\'t refresh the reference:', inputFileLocation); + deferred.reject('REFERENCE_IS_NOT_REFRESHED'); + }, 60000); + + deferred.finally(() => { + clearTimeout(timeout); + }); + + const task = {type: 'refreshReference', payload: reference}; + notifySomeone(task); } - const task = {type: 'refreshReference', payload: reference}; - notifySomeone(task); - return this.refreshReferencePromises[hex] = promise; + return r.ready; } public downloadFile(options: DownloadOptions): CancellablePromise { diff --git a/src/lib/mtproto/mtproto.worker.ts b/src/lib/mtproto/mtproto.worker.ts index e11c6256..edf94f7f 100644 --- a/src/lib/mtproto/mtproto.worker.ts +++ b/src/lib/mtproto/mtproto.worker.ts @@ -88,7 +88,8 @@ const taskListeners = { refreshReference: (task: RefreshReferenceTaskResponse) => { const hex = bytesToHex(task.originalPayload); - const deferred = apiFileManager.refreshReferencePromises[hex]; + const r = apiFileManager.refreshReferencePromises[hex]; + const deferred = r?.deferred; if(deferred) { if(task.error) { deferred.reject(task.error); From 8b0254d6b3e298e349692fbf03a7b6a521e9bf40 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Mon, 19 Jul 2021 18:28:36 +0300 Subject: [PATCH 4/8] Fix releasing temporary message --- src/components/wrappers.ts | 4 +++- src/layer.d.ts | 14 ++++++++++--- src/lib/appManagers/apiUpdatesManager.ts | 1 - src/lib/appManagers/appDraftsManager.ts | 2 +- src/lib/appManagers/appMessagesManager.ts | 21 ++++++++------------ src/scripts/in/schema_additional_params.json | 12 +++++++++-- 6 files changed, 33 insertions(+), 21 deletions(-) diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index 299bfbb5..a828a15f 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -331,7 +331,9 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai video.addEventListener('error', (e) => { console.error("Error " + video.error.code + "; details: " + video.error.message); - preloader.detach(); + if(preloader) { + preloader.detach(); + } }, {once: true}); if(!noAutoDownload && f) { diff --git a/src/layer.d.ts b/src/layer.d.ts index 60787b97..118588ff 100644 --- a/src/layer.d.ts +++ b/src/layer.d.ts @@ -855,7 +855,8 @@ export namespace Message { fromId?: number, random_id?: string, rReply?: string, - viaBotId?: number + viaBotId?: number, + clear_history?: boolean }; export type messageService = { @@ -1881,7 +1882,7 @@ export namespace MessagesFilter { /** * @link https://core.telegram.org/type/Update */ -export type Update = Update.updateNewMessage | Update.updateMessageID | Update.updateDeleteMessages | Update.updateUserTyping | Update.updateChatUserTyping | Update.updateChatParticipants | Update.updateUserStatus | Update.updateUserName | Update.updateUserPhoto | Update.updateNewEncryptedMessage | Update.updateEncryptedChatTyping | Update.updateEncryption | Update.updateEncryptedMessagesRead | Update.updateChatParticipantAdd | Update.updateChatParticipantDelete | Update.updateDcOptions | Update.updateNotifySettings | Update.updateServiceNotification | Update.updatePrivacy | Update.updateUserPhone | Update.updateReadHistoryInbox | Update.updateReadHistoryOutbox | Update.updateWebPage | Update.updateReadMessagesContents | Update.updateChannelTooLong | Update.updateChannel | Update.updateNewChannelMessage | Update.updateReadChannelInbox | Update.updateDeleteChannelMessages | Update.updateChannelMessageViews | Update.updateChatParticipantAdmin | Update.updateNewStickerSet | Update.updateStickerSetsOrder | Update.updateStickerSets | Update.updateSavedGifs | Update.updateBotInlineQuery | Update.updateBotInlineSend | Update.updateEditChannelMessage | Update.updateBotCallbackQuery | Update.updateEditMessage | Update.updateInlineBotCallbackQuery | Update.updateReadChannelOutbox | Update.updateDraftMessage | Update.updateReadFeaturedStickers | Update.updateRecentStickers | Update.updateConfig | Update.updatePtsChanged | Update.updateChannelWebPage | Update.updateDialogPinned | Update.updatePinnedDialogs | Update.updateBotWebhookJSON | Update.updateBotWebhookJSONQuery | Update.updateBotShippingQuery | Update.updateBotPrecheckoutQuery | Update.updatePhoneCall | Update.updateLangPackTooLong | Update.updateLangPack | Update.updateFavedStickers | Update.updateChannelReadMessagesContents | Update.updateContactsReset | Update.updateChannelAvailableMessages | Update.updateDialogUnreadMark | Update.updateMessagePoll | Update.updateChatDefaultBannedRights | Update.updateFolderPeers | Update.updatePeerSettings | Update.updatePeerLocated | Update.updateNewScheduledMessage | Update.updateDeleteScheduledMessages | Update.updateTheme | Update.updateGeoLiveViewed | Update.updateLoginToken | Update.updateMessagePollVote | Update.updateDialogFilter | Update.updateDialogFilterOrder | Update.updateDialogFilters | Update.updatePhoneCallSignalingData | Update.updateChannelMessageForwards | Update.updateReadChannelDiscussionInbox | Update.updateReadChannelDiscussionOutbox | Update.updatePeerBlocked | Update.updateChannelUserTyping | Update.updatePinnedMessages | Update.updatePinnedChannelMessages | Update.updateChat | Update.updateGroupCallParticipants | Update.updateGroupCall | Update.updatePeerHistoryTTL | Update.updateChatParticipant | Update.updateChannelParticipant | Update.updateBotStopped | Update.updateGroupCallConnection | Update.updateBotCommands | Update.updateNewDiscussionMessage | Update.updateDeleteDiscussionMessages; +export type Update = Update.updateNewMessage | Update.updateMessageID | Update.updateDeleteMessages | Update.updateUserTyping | Update.updateChatUserTyping | Update.updateChatParticipants | Update.updateUserStatus | Update.updateUserName | Update.updateUserPhoto | Update.updateNewEncryptedMessage | Update.updateEncryptedChatTyping | Update.updateEncryption | Update.updateEncryptedMessagesRead | Update.updateChatParticipantAdd | Update.updateChatParticipantDelete | Update.updateDcOptions | Update.updateNotifySettings | Update.updateServiceNotification | Update.updatePrivacy | Update.updateUserPhone | Update.updateReadHistoryInbox | Update.updateReadHistoryOutbox | Update.updateWebPage | Update.updateReadMessagesContents | Update.updateChannelTooLong | Update.updateChannel | Update.updateNewChannelMessage | Update.updateReadChannelInbox | Update.updateDeleteChannelMessages | Update.updateChannelMessageViews | Update.updateChatParticipantAdmin | Update.updateNewStickerSet | Update.updateStickerSetsOrder | Update.updateStickerSets | Update.updateSavedGifs | Update.updateBotInlineQuery | Update.updateBotInlineSend | Update.updateEditChannelMessage | Update.updateBotCallbackQuery | Update.updateEditMessage | Update.updateInlineBotCallbackQuery | Update.updateReadChannelOutbox | Update.updateDraftMessage | Update.updateReadFeaturedStickers | Update.updateRecentStickers | Update.updateConfig | Update.updatePtsChanged | Update.updateChannelWebPage | Update.updateDialogPinned | Update.updatePinnedDialogs | Update.updateBotWebhookJSON | Update.updateBotWebhookJSONQuery | Update.updateBotShippingQuery | Update.updateBotPrecheckoutQuery | Update.updatePhoneCall | Update.updateLangPackTooLong | Update.updateLangPack | Update.updateFavedStickers | Update.updateChannelReadMessagesContents | Update.updateContactsReset | Update.updateChannelAvailableMessages | Update.updateDialogUnreadMark | Update.updateMessagePoll | Update.updateChatDefaultBannedRights | Update.updateFolderPeers | Update.updatePeerSettings | Update.updatePeerLocated | Update.updateNewScheduledMessage | Update.updateDeleteScheduledMessages | Update.updateTheme | Update.updateGeoLiveViewed | Update.updateLoginToken | Update.updateMessagePollVote | Update.updateDialogFilter | Update.updateDialogFilterOrder | Update.updateDialogFilters | Update.updatePhoneCallSignalingData | Update.updateChannelMessageForwards | Update.updateReadChannelDiscussionInbox | Update.updateReadChannelDiscussionOutbox | Update.updatePeerBlocked | Update.updateChannelUserTyping | Update.updatePinnedMessages | Update.updatePinnedChannelMessages | Update.updateChat | Update.updateGroupCallParticipants | Update.updateGroupCall | Update.updatePeerHistoryTTL | Update.updateChatParticipant | Update.updateChannelParticipant | Update.updateBotStopped | Update.updateGroupCallConnection | Update.updateBotCommands | Update.updateNewDiscussionMessage | Update.updateDeleteDiscussionMessages | Update.updateChannelReload; export namespace Update { export type updateNewMessage = { @@ -2195,7 +2196,8 @@ export namespace Update { _: 'updateDraftMessage', peer: Peer, draft: DraftMessage, - local?: boolean + local?: boolean, + threadId?: number }; export type updateReadFeaturedStickers = { @@ -2552,6 +2554,11 @@ export namespace Update { messages?: number[], channel_id?: number }; + + export type updateChannelReload = { + _: 'updateChannelReload', + channel_id?: number + }; } /** @@ -9821,6 +9828,7 @@ export interface ConstructorDeclMap { 'messageActionChatReturnYou': MessageAction.messageActionChatReturnYou, 'updateNewDiscussionMessage': Update.updateNewDiscussionMessage, 'updateDeleteDiscussionMessages': Update.updateDeleteDiscussionMessages, + 'updateChannelReload': Update.updateChannelReload, } export type InvokeAfterMsg = { diff --git a/src/lib/appManagers/apiUpdatesManager.ts b/src/lib/appManagers/apiUpdatesManager.ts index 42048a45..c2bf504e 100644 --- a/src/lib/appManagers/apiUpdatesManager.ts +++ b/src/lib/appManagers/apiUpdatesManager.ts @@ -366,7 +366,6 @@ export class ApiUpdatesManager { this.debug && this.log.debug('channel diff too long', differenceResult); delete this.channelStates[channelId]; - // @ts-ignore this.saveUpdate({_: 'updateChannelReload', channel_id: channelId}); return; } diff --git a/src/lib/appManagers/appDraftsManager.ts b/src/lib/appManagers/appDraftsManager.ts index bb91acf8..42ae2541 100644 --- a/src/lib/appManagers/appDraftsManager.ts +++ b/src/lib/appManagers/appDraftsManager.ts @@ -37,7 +37,7 @@ export class AppDraftsManager { rootScope.addMultipleEventsListeners({ updateDraftMessage: (update) => { const peerID = appPeersManager.getPeerId(update.peer); - this.saveDraft(peerID, (update as any).threadId, update.draft, {notify: true}); + this.saveDraft(peerID, update.threadId, update.draft, {notify: true}); } }); } diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts index 82862035..6fc91585 100644 --- a/src/lib/appManagers/appMessagesManager.ts +++ b/src/lib/appManagers/appMessagesManager.ts @@ -238,7 +238,6 @@ export class AppMessagesManager { updateChannel: this.onUpdateChannel, - // @ts-ignore updateChannelReload: this.onUpdateChannelReload, updateChannelMessageViews: this.onUpdateChannelMessageViews, @@ -4017,8 +4016,7 @@ export class AppMessagesManager { const dialog = this.getDialogOnly(peerId); const isTopMessage = dialog && dialog.top_message === mid; - // @ts-ignore - if(message.clear_history) { // that's will never happen + if((message as Message.message).clear_history) { if(isTopMessage) { rootScope.dispatchEvent('dialog_flush', {peerId}); } @@ -4263,9 +4261,8 @@ export class AppMessagesManager { } }; - private onUpdateChannelReload = (update: any) => { - // @ts-ignore - const channelId: number = update.channel_id; + private onUpdateChannelReload = (update: Update.updateChannelReload) => { + const channelId = update.channel_id; const peerId = -channelId; this.dialogsStorage.dropDialog(peerId); @@ -5104,20 +5101,18 @@ export class AppMessagesManager { }); } - private handleReleasingMessage(message: any) { - if((message as Message.message).media) { + private handleReleasingMessage(message: MyMessage) { + if('media' in message) { // @ts-ignore const c = message.media.webpage || message.media; - const smth = c.photo || c.document; + const smth: Photo.photo | MyDocument = c.photo || c.document; if(smth?.file_reference) { referenceDatabase.deleteContext(smth.file_reference, {type: 'message', peerId: message.peerId, messageId: message.mid}); } - // @ts-ignore - if(message.media.webpage) { - // @ts-ignore - appWebPagesManager.deleteWebPageFromPending(message.media.webpage, mid); + if('webpage' in message.media) { + appWebPagesManager.deleteWebPageFromPending(message.media.webpage, message.mid); } } } diff --git a/src/scripts/in/schema_additional_params.json b/src/scripts/in/schema_additional_params.json index 77888d4c..9c6d1e4c 100644 --- a/src/scripts/in/schema_additional_params.json +++ b/src/scripts/in/schema_additional_params.json @@ -51,7 +51,8 @@ {"name": "unread", "type": "true"}, {"name": "is_outgoing", "type": "true"}, {"name": "rReply", "type": "string"}, - {"name": "viaBotId", "type": "number"} + {"name": "viaBotId", "type": "number"}, + {"name": "clear_history", "type": "boolean"} ] }, { "predicate": "messageService", @@ -233,8 +234,15 @@ }, { "predicate": "updateDraftMessage", "params": [ - {"name": "local", "type": "boolean"} + {"name": "local", "type": "boolean"}, + {"name": "threadId", "type": "number"} ] +}, { + "predicate": "updateChannelReload", + "params": [ + {"name": "channel_id", "type": "number"} + ], + "type": "Update" }, { "predicate": "messages.stickerSet", "params": [ From 68c81916e3f638fce7270440c997a0ce330d20df Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Mon, 19 Jul 2021 21:02:40 +0300 Subject: [PATCH 6/8] Fix FILE_REFERENCE_EXPIRED for streams --- src/lib/mtproto/apiFileManager.ts | 38 ++++++++++++++++--------------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/lib/mtproto/apiFileManager.ts b/src/lib/mtproto/apiFileManager.ts index cf521091..fe9bf29c 100644 --- a/src/lib/mtproto/apiFileManager.ts +++ b/src/lib/mtproto/apiFileManager.ts @@ -27,6 +27,7 @@ import apiManager from "./apiManager"; import { isWebpSupported } from "./mtproto.worker"; import { bytesToHex } from "../../helpers/bytes"; import assumeType from "../../helpers/assumeType"; +import { ctx } from "../../helpers/userAgent"; type Delayed = { offset: number, @@ -89,7 +90,7 @@ export class ApiFileManager { public refreshReferencePromises: { [referenceHex: string]: { deferred: CancellablePromise, - ready: Promise + timeout: number } } = {}; @@ -189,10 +190,12 @@ export class ApiFileManager { } public requestFilePart(dcId: DcId, location: InputFileLocation, offset: number, limit: number, id = 0, queueId = 0, checkCancel?: () => void) { - return this.downloadRequest(dcId, id, async() => { + return this.downloadRequest(dcId, id, () => { checkCancel && checkCancel(); const invoke = (): Promise => { + checkCancel && checkCancel(); + const promise = apiManager.invokeApi('upload.getFile', { location, offset, @@ -204,7 +207,7 @@ export class ApiFileManager { return promise.catch((err) => { if(err.type === 'FILE_REFERENCE_EXPIRED') { - return this.refreshReference(location).then(() => invoke()); + return this.refreshReference(location).then(invoke); } throw err; @@ -217,7 +220,7 @@ export class ApiFileManager { location.checkedReference = true; const hex = bytesToHex(reference); if(this.refreshReferencePromises[hex]) { - return this.refreshReference(location).then(() => invoke()); + return this.refreshReference(location).then(invoke); } } @@ -268,29 +271,28 @@ export class ApiFileManager { r = this.refreshReferencePromises[hex] = { deferred, - ready: deferred.then(reference => { - if(hex === bytesToHex(reference)) { - throw 'REFERENCE_IS_NOT_REFRESHED'; - } - - (inputFileLocation as InputFileLocation.inputDocumentFileLocation).file_reference = reference; - }) + timeout: ctx.setTimeout(() => { + this.log.error('Didn\'t refresh the reference:', inputFileLocation); + deferred.reject('REFERENCE_IS_NOT_REFRESHED'); + }, 60000) }; - const timeout = setTimeout(() => { - this.log.error('Didn\'t refresh the reference:', inputFileLocation); - deferred.reject('REFERENCE_IS_NOT_REFRESHED'); - }, 60000); - deferred.finally(() => { - clearTimeout(timeout); + clearTimeout(r.timeout); }); const task = {type: 'refreshReference', payload: reference}; notifySomeone(task); } - return r.ready; + // have to replace file_reference in any way, because location can be different everytime if it's stream + return r.deferred.then(reference => { + if(hex === bytesToHex(reference)) { + throw 'REFERENCE_IS_NOT_REFRESHED'; + } + + (inputFileLocation as InputFileLocation.inputDocumentFileLocation).file_reference = reference; + }); } public downloadFile(options: DownloadOptions): CancellablePromise { From 0cdf511f59e0dd48563660e402dea8e1694fa261 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Mon, 19 Jul 2021 22:53:52 +0300 Subject: [PATCH 8/8] just a commit --- src/components/buttonMenu.ts | 11 +++++++---- src/lib/mediaPlayer.ts | 14 ++++++++------ src/scss/partials/_ckin.scss | 12 +++--------- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/src/components/buttonMenu.ts b/src/components/buttonMenu.ts index 8718b1e0..ba94f015 100644 --- a/src/components/buttonMenu.ts +++ b/src/components/buttonMenu.ts @@ -13,8 +13,9 @@ import { closeBtnMenu } from "./misc"; import { ripple } from "./ripple"; export type ButtonMenuItemOptions = { - icon: string, - text: LangPackKey, + icon?: string, + text?: LangPackKey, + regularText?: string, onClick: (e: MouseEvent | TouchEvent) => void, element?: HTMLElement, options?: AttachClickOptions, @@ -28,9 +29,11 @@ const ButtonMenuItem = (options: ButtonMenuItemOptions) => { const {icon, text, onClick} = options; const el = document.createElement('div'); - el.className = 'btn-menu-item tgico-' + icon; + el.className = 'btn-menu-item' + (icon ? ' tgico-' + icon : ''); ripple(el); - const t = i18n(text); + + const t = text ? i18n(text) : document.createElement('span'); + if(options.regularText) t.innerHTML = options.regularText; t.classList.add('btn-menu-item-text'); el.append(t); diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts index 4a694d7a..82d4d915 100644 --- a/src/lib/mediaPlayer.ts +++ b/src/lib/mediaPlayer.ts @@ -13,7 +13,6 @@ import { cancelEvent } from "../helpers/dom/cancelEvent"; import ListenerSetter from "../helpers/listenerSetter"; import ButtonMenu from "../components/buttonMenu"; import { ButtonMenuToggleHandler } from "../components/buttonMenuToggle"; -import { LangPackKey } from "./langPack"; export class MediaProgressLine extends RangeSelector { private filledLoad: HTMLDivElement; @@ -416,7 +415,7 @@ export default class VideoPlayer {
- +
/ @@ -424,8 +423,8 @@ export default class VideoPlayer {
- - + +
`; @@ -433,8 +432,11 @@ export default class VideoPlayer { } protected setBtnMenuToggle() { - const buttons = [0.25, 0.5, 1, 1.25, 1.5, 2].map((rate) => { - return { icon: '', text: rate.toString() as LangPackKey, onClick: () => { this.video.playbackRate = rate; } } + const buttons: Parameters[0] = [0.25, 0.5, 1, 1.25, 1.5, 2].map((rate) => { + return { + regularText: rate === 1 ? 'Normal' : '' + rate, + onClick: () => this.video.playbackRate = rate + }; }); const btnMenu = ButtonMenu(buttons); const settingsButton = this.wrapper.querySelector('.settings') as HTMLElement; diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index e2a06f7a..a8c510a6 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -95,16 +95,10 @@ } &__button { - background: none; - border: 0; + width: 2rem; + height: 2rem; color: #fff; - outline: 0; - padding: 3px 10px 6px 10px; - cursor: pointer; - font-size: 24px; - line-height: 1; - display: flex; - align-items: center; + padding: 0; i { align-self: center;