Adds time stickers to MediaEditor

ts/mediaEditor/util/moreStyles.ts

@@ -0,0 +1,46 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+function render(
+  ctx: CanvasRenderingContext2D,
+  left: number,
+  top: number
+): void {
+  ctx.save();
+
+  ctx.font = '11px Inter';
+  const text = window.i18n('icu:MediaEditor__clock-more-styles');
+  const textMetrics = ctx.measureText(text);
+
+  const boxHeight = textMetrics.fontBoundingBoxAscent * 2;
+  const boxWidth = textMetrics.width * 1.5;
+  const boxX = left - boxWidth / 2;
+  const textX = left - textMetrics.width / 2;
+  const textY = top + boxHeight / 1.5;
+
+  // box
+  ctx.fillStyle = '#000000';
+  ctx.strokeStyle = '#000000';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.roundRect(boxX, top, boxWidth, boxHeight, 4);
+  ctx.closePath();
+  ctx.fill();
+
+  // text
+  ctx.fillStyle = '#fff';
+  ctx.fillText(text, textX, textY);
+
+  ctx.restore();
+}
+
+export const moreStyles = {
+  cursorStyleHandler: (): 'pointer' => 'pointer',
+  offsetY: 20,
+  render,
+  sizeX: 100,
+  sizeY: 33,
+  withConnection: true,
+  x: 0,
+  y: 0.5,
+};