@outbook/webcomponents-player-timeline 1.0.0

package/LICENSE

@@ -0,0 +1,202 @@
+Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2026 Antonio Rodríguez Ruiz
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,100 @@
+# @outbook/webcomponents-player-timeline
+
+This package provides a web component for a customizable player timeline, displaying playback progress and chapter markers.
+
+## Installation
+
+```bash
+npm install @outbook/webcomponents-player-timeline
+```
+
+## Usage
+
+### As a Lit Element
+
+```javascript
+import {html} from 'lit';
+import {PlayerTimeline} from '@outbook/webcomponents-player-timeline';
+
+function render() {
+  const duration = 120; // Example duration in seconds
+  const currentTime = 30; // Example current time in seconds
+  const currentItem = {
+    metadata: {
+      chapters: [
+        {start: 0, end: 30000, tags: {title: 'Introduction'}},
+        {start: 30000, end: 60000, tags: {title: 'Chapter 1'}},
+      ],
+    },
+  };
+
+  return html`
+    ${PlayerTimeline({
+      duration: duration,
+      props: {
+        currentTime: currentTime,
+        currentItem: currentItem,
+      },
+    })}
+  `;
+}
+```
+
+### Direct HTML Usage
+
+You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined. The `duration` attribute represents the total duration of the media in seconds. The component's internal state (like `currentTime` and `currentItem`) is passed via the `.props` property when used directly, which is less common for simple HTML usage but possible for framework integration.
+
+```javascript
+import '@outbook/webcomponents-player-timeline';
+
+// Example of setting props if needed, typically handled by a framework
+const playerTimeline = document.querySelector('outbook-player-timeline');
+playerTimeline.duration = 120; // Total duration in seconds
+playerTimeline.props = {
+  currentTime: 30, // Current playback time in seconds
+  currentItem: {
+    metadata: {
+      chapters: [
+        {start: 0, end: 30000, tags: {title: 'Introduction'}},
+        {start: 30000, end: 60000, tags: {title: 'Chapter 1'}},
+      ],
+    },
+  },
+};
+```
+
+```html
+<outbook-player-timeline duration="120"></outbook-player-timeline>
+```
+
+## Component Usage
+
+The component is best used via its wrapper function `PlayerTimeline`, which simplifies passing complex properties like `props`.
+
+### Properties
+
+| Attribute | Property | Type | Default | Description |
+|---|---|---|---|---|
+| `duration` | `duration` | `Number` | `undefined` | The total duration of the media in seconds. (Required) |
+| `lang` | `lang` | `String` | `'en'` | The language to use for internationalization. |
+| `extraClasses` | `extraClasses` | `String` | `undefined` | Classes to add to the host element. |
+| `props` | `props` | `Object` | `{}` | An object containing dynamic properties like `currentTime` (current playback time in seconds) and `currentItem` (an object that can contain `metadata.chapters` for chapter markers). |
+
+## Styling
+
+This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.
+
+### Custom Properties
+
+Can be used with css `light-dark` function.
+
+| Custom Property                                       | Description                                       |
+|-------------------------------------------------------|---------------------------------------------------|
+| `--outbook-player-timeline--background`               | The background color of the timeline track.       |
+| `--outbook-player-timeline--background-completed`     | The background color of the completed part of the timeline track. |
+| `--outbook-player-timeline--chapter-mark-color`       | The color of chapter markers.                     |
+| `--outbook-player-timeline--chapter-played-mark-color`| The color of chapter markers for played chapters. |
+
+## License
+
+This component is licensed under the Apache-2.0 License.

package/_i18n/af.json

@@ -0,0 +1,8 @@
+{
+  "hour": "uur",
+  "hours": "ure",
+  "minute": "minuut",
+  "minutes": "minute",
+  "second": "sekonde",
+  "seconds": "sekondes"
+}

package/_i18n/ar.json

@@ -0,0 +1,8 @@
+{
+  "hour": "ساعة",
+  "hours": "ساعات",
+  "minute": "دقيقة",
+  "minutes": "دقائق",
+  "second": "ثانية",
+  "seconds": "ثواني"
+}

package/_i18n/bg.json

@@ -0,0 +1,8 @@
+{
+  "hour": "час",
+  "hours": "часа",
+  "minute": "минута",
+  "minutes": "минути",
+  "second": "секунда",
+  "seconds": "секунди"
+}

package/_i18n/bn.json

@@ -0,0 +1,8 @@
+{
+  "hour": "ঘন্টা",
+  "hours": "ঘন্টা",
+  "minute": "মিনিট",
+  "minutes": "মিনিট",
+  "second": "সেকেন্ড",
+  "seconds": "সেকেন্ড"
+}

package/_i18n/ca.json

@@ -0,0 +1,8 @@
+{
+  "hour": "hora",
+  "hours": "hores",
+  "minute": "minut",
+  "minutes": "minuts",
+  "second": "segon",
+  "seconds": "segons"
+}

package/_i18n/cs.json

@@ -0,0 +1,8 @@
+{
+  "hour": "hodina",
+  "hours": "hodiny",
+  "minute": "minuta",
+  "minutes": "minuty",
+  "second": "sekunda",
+  "seconds": "sekundy"
+}

package/_i18n/da.json

@@ -0,0 +1,8 @@
+{
+  "hour": "time",
+  "hours": "timer",
+  "minute": "minut",
+  "minutes": "minutter",
+  "second": "sekund",
+  "seconds": "sekunder"
+}

package/_i18n/de.json

@@ -0,0 +1,8 @@
+{
+  "hour": "Stunde",
+  "hours": "Stunden",
+  "minute": "Minute",
+  "minutes": "Minuten",
+  "second": "Sekunde",
+  "seconds": "Sekunden"
+}

package/_i18n/el.json

@@ -0,0 +1,8 @@
+{
+  "hour": "ώρα",
+  "hours": "ώρες",
+  "minute": "λεπτό",
+  "minutes": "λεπτά",
+  "second": "δευτερόλεπτο",
+  "seconds": "δευτερόλεπτα"
+}

package/_i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "hour": "hour",
+  "hours": "hours",
+  "minute": "minute",
+  "minutes": "minutes",
+  "second": "second",
+  "seconds": "seconds"
+}

package/_i18n/es.json

@@ -0,0 +1,8 @@
+{
+  "hour": "hora",
+  "hours": "horas",
+  "minute": "minuto",
+  "minutes": "minutos",
+  "second": "segundo",
+  "seconds": "segundos"
+}

package/_i18n/eu.json

@@ -0,0 +1,8 @@
+{
+  "hour": "ordu",
+  "hours": "orduak",
+  "minute": "minutu",
+  "minutes": "minutuak",
+  "second": "segundo",
+  "seconds": "segundoak"
+}

package/_i18n/fa.json

@@ -0,0 +1,8 @@
+{
+  "hour": "ساعت",
+  "hours": "ساعت ها",
+  "minute": "دقیقه",
+  "minutes": "دقایق",
+  "second": "ثانیه",
+  "seconds": "ثانیه ها"
+}

package/_i18n/fi.json

@@ -0,0 +1,8 @@
+{
+  "hour": "tunti",
+  "hours": "tuntia",
+  "minute": "minuutti",
+  "minutes": "minuuttia",
+  "second": "sekunti",
+  "seconds": "sekuntia"
+}

package/_i18n/fr.json

@@ -0,0 +1,8 @@
+{
+  "hour": "heure",
+  "hours": "heures",
+  "minute": "minute",
+  "minutes": "minutes",
+  "second": "seconde",
+  "seconds": "secondes"
+}

package/_i18n/gl.json

@@ -0,0 +1,8 @@
+{
+  "hour": "hora",
+  "hours": "horas",
+  "minute": "minuto",
+  "minutes": "minutos",
+  "second": "segundo",
+  "seconds": "segundos"
+}

package/_i18n/ha.json

@@ -0,0 +1,8 @@
+{
+  "hour": "awa",
+  "hours": "awanni",
+  "minute": "minti",
+  "minutes": "mintuna",
+  "second": "dakika",
+  "seconds": "dakikoki"
+}

package/_i18n/hi.json

@@ -0,0 +1,8 @@
+{
+  "hour": "घंटा",
+  "hours": "घंटे",
+  "minute": "मिनट",
+  "minutes": "मिनट",
+  "second": "सेकंड",
+  "seconds": "सेकंड"
+}

package/_i18n/hu.json

@@ -0,0 +1,8 @@
+{
+  "hour": "óra",
+  "hours": "órák",
+  "minute": "perc",
+  "minutes": "percek",
+  "second": "másodperc",
+  "seconds": "másodpercek"
+}

package/_i18n/i18n.js

@@ -0,0 +1,97 @@
+import defaultLiterals from './en.json';
+import af from './af.json';
+import ar from './ar.json';
+import bg from './bg.json';
+import bn from './bn.json';
+import ca from './ca.json';
+import cs from './cs.json';
+import da from './da.json';
+import de from './de.json';
+import el from './el.json';
+import es from './es.json';
+import eu from './eu.json';
+import fa from './fa.json';
+import fi from './fi.json';
+import fr from './fr.json';
+import gl from './gl.json';
+import ha from './ha.json';
+import hi from './hi.json';
+import hu from './hu.json';
+import id from './id.json';
+import it from './it.json';
+import ja from './ja.json';
+import km from './km.json';
+import ko from './ko.json';
+import lo from './lo.json';
+import ms from './ms.json';
+import nl from './nl.json';
+import no from './no.json';
+import pl from './pl.json';
+import pt from './pt.json';
+import ro from './ro.json';
+import ru from './ru.json';
+import sk from './sk.json';
+import sv from './sv.json';
+import sw from './sw.json';
+import th from './th.json';
+import tl from './tl.json';
+import tr from './tr.json';
+import uk from './uk.json';
+import vi from './vi.json';
+import zh from './zh.json';
+import zu from './zu.json';
+
+const literals = {
+  en: defaultLiterals,
+  af,
+  ar,
+  bg,
+  bn,
+  ca,
+  cs,
+  da,
+  de,
+  el,
+  es,
+  eu,
+  fa,
+  fi,
+  fr,
+  gl,
+  ha,
+  hi,
+  hu,
+  id,
+  it,
+  ja,
+  km,
+  ko,
+  lo,
+  ms,
+  nl,
+  no,
+  pl,
+  pt,
+  ro,
+  ru,
+  sk,
+  sv,
+  sw,
+  th,
+  tl,
+  tr,
+  uk,
+  vi,
+  zh,
+  zu
+};
+
+/**
+ * @param {string} lang - ISO language code (e.g. "fr", "de").
+ * @returns {Promise<Object>} Resolved with the language object.
+ */
+export async function loadLiterals(lang) {
+  const key = String(lang).trim().toLowerCase();
+  const loadedLiterals = literals[key] || defaultLiterals;
+  return Promise.resolve(loadedLiterals);
+}

package/_i18n/id.json

@@ -0,0 +1,8 @@
+{
+  "hour": "jam",
+  "hours": "jam",
+  "minute": "menit",
+  "minutes": "menit",
+  "second": "detik",
+  "seconds": "detik"
+}

package/_i18n/it.json

@@ -0,0 +1,8 @@
+{
+  "hour": "ora",
+  "hours": "ore",
+  "minute": "minuto",
+  "minutes": "minuti",
+  "second": "secondo",
+  "seconds": "secondi"
+}

package/_i18n/ja.json

@@ -0,0 +1,8 @@
+{
+  "hour": "時間",
+  "hours": "時間",
+  "minute": "分",
+  "minutes": "分",
+  "second": "秒",
+  "seconds": "秒"
+}

package/_i18n/km.json

@@ -0,0 +1,8 @@
+{
+  "hour": "ម៉ោង",
+  "hours": "ម៉ោង",
+  "minute": "នាទី",
+  "minutes": "នាទី",
+  "second": "វិនាទី",
+  "seconds": "វិនាទី"
+}

package/_i18n/ko.json

@@ -0,0 +1,8 @@
+{
+  "hour": "시간",
+  "hours": "시간",
+  "minute": "분",
+  "minutes": "분",
+  "second": "초",
+  "seconds": "초"
+}

package/_i18n/lo.json

@@ -0,0 +1,8 @@
+{
+  "hour": "ຊົ່ວໂມງ",
+  "hours": "ຊົ່ວໂມງ",
+  "minute": "ນາ​ທີ",
+  "minutes": "ນາ​ທີ",
+  "second": "ວິນາທີ",
+  "seconds": "ວິນາທີ"
+}

package/_i18n/ms.json

@@ -0,0 +1,8 @@
+{
+  "hour": "jam",
+  "hours": "jam",
+  "minute": "minit",
+  "minutes": "minit",
+  "second": "saat",
+  "seconds": "saat"
+}

package/_i18n/nl.json

@@ -0,0 +1,8 @@
+{
+  "hour": "uur",
+  "hours": "uren",
+  "minute": "minuut",
+  "minutes": "minuten",
+  "second": "seconde",
+  "seconds": "seconden"
+}

package/_i18n/no.json

@@ -0,0 +1,8 @@
+{
+  "hour": "time",
+  "hours": "timer",
+  "minute": "minutt",
+  "minutes": "minutter",
+  "second": "sekund",
+  "seconds": "sekunder"
+}

package/_i18n/pl.json

@@ -0,0 +1,8 @@
+{
+  "hour": "godzina",
+  "hours": "godziny",
+  "minute": "minuta",
+  "minutes": "minuty",
+  "second": "sekunda",
+  "seconds": "sekundy"
+}

package/_i18n/pt.json

@@ -0,0 +1,8 @@
+{
+  "hour": "hora",
+  "hours": "horas",
+  "minute": "minuto",
+  "minutes": "minutos",
+  "second": "segundo",
+  "seconds": "segundos"
+}

package/_i18n/ro.json

@@ -0,0 +1,8 @@
+{
+  "hour": "oră",
+  "hours": "ore",
+  "minute": "minut",
+  "minutes": "minute",
+  "second": "secundă",
+  "seconds": "secunde"
+}

package/_i18n/ru.json

@@ -0,0 +1,8 @@
+{
+  "hour": "час",
+  "hours": "часов",
+  "minute": "минута",
+  "minutes": "минут",
+  "second": "секунда",
+  "seconds": "секунд"
+}

package/_i18n/sk.json

@@ -0,0 +1,8 @@
+{
+  "hour": "hodina",
+  "hours": "hodiny",
+  "minute": "minúta",
+  "minutes": "minúty",
+  "second": "sekunda",
+  "seconds": "sekundy"
+}

package/_i18n/sv.json

@@ -0,0 +1,8 @@
+{
+  "hour": "timme",
+  "hours": "timmar",
+  "minute": "minut",
+  "minutes": "minuter",
+  "second": "sekund",
+  "seconds": "sekunder"
+}

package/_i18n/sw.json

@@ -0,0 +1,8 @@
+{
+  "hour": "saa",
+  "hours": "masaa",
+  "minute": "dakika",
+  "minutes": "dakika",
+  "second": "sekunde",
+  "seconds": "sekunde"
+}

package/_i18n/th.json

@@ -0,0 +1,8 @@
+{
+  "hour": "ชั่วโมง",
+  "hours": "ชั่วโมง",
+  "minute": "นาที",
+  "minutes": "นาที",
+  "second": "วินาที",
+  "seconds": "วินาที"
+}

package/_i18n/tl.json

@@ -0,0 +1,8 @@
+{
+  "hour": "oras",
+  "hours": "oras",
+  "minute": "minuto",
+  "minutes": "minuto",
+  "second": "segundo",
+  "seconds": "segundo"
+}

package/_i18n/tr.json

@@ -0,0 +1,8 @@
+{
+  "hour": "saat",
+  "hours": "saat",
+  "minute": "dakika",
+  "minutes": "dakika",
+  "second": "saniye",
+  "seconds": "saniye"
+}

package/_i18n/uk.json

@@ -0,0 +1,8 @@
+{
+  "hour": "година",
+  "hours": "години",
+  "minute": "хвилина",
+  "minutes": "хвилини",
+  "second": "секунда",
+  "seconds": "секунди"
+}

package/_i18n/vi.json

@@ -0,0 +1,8 @@
+{
+  "hour": "giờ",
+  "hours": "giờ",
+  "minute": "phút",
+  "minutes": "phút",
+  "second": "giây",
+  "seconds": "giây"
+}

package/_i18n/zh.json

@@ -0,0 +1,8 @@
+{
+  "hour": "小时",
+  "hours": "小时",
+  "minute": "分钟",
+  "minutes": "分钟",
+  "second": "秒",
+  "seconds": "秒"
+}

package/_i18n/zu.json

@@ -0,0 +1,8 @@
+{
+  "hour": "ihora",
+  "hours": "amahora",
+  "minute": "iminithi",
+  "minutes": "imizuzu",
+  "second": "isikhashana",
+  "seconds": "imizuzwana"
+}

package/_lib/a11y-time.js

@@ -0,0 +1,22 @@
+export function a11yTime({ time: _time, literals }) {
+  const time = Math.floor(_time);
+  const hours = Math.floor(time / 3600);
+  const minutes = Math.floor((time % 3600) / 60);
+  const seconds = time % 60;
+
+  const parts = [];
+
+  if (hours) {
+    parts.push(`${hours} ${hours === 1 ? literals.hour : literals.hours}`);
+  }
+  if (minutes) {
+    parts.push(
+      `${minutes} ${minutes === 1 ? literals.minute : literals.minutes}`
+    );
+  }
+  parts.push(
+    `${seconds} ${seconds === 1 ? literals.second : literals.seconds}`
+  );
+
+  return parts.join(' ');
+}

package/_lib/constants.js

@@ -0,0 +1 @@
+export const SKIP_TIME = 10;

package/_lib/handle-timeline-position.js

@@ -0,0 +1,15 @@
+function handleTimelinePositionBase({ ev, isTouchEvent }) {
+  const clientX = isTouchEvent ? ev.changedTouches[0].clientX : ev.clientX;
+  const target = ev.currentTarget;
+  const rect = target.getBoundingClientRect();
+  const x = clientX - rect.left;
+  return (100 * x) / target.offsetWidth;
+}
+
+export function handleTimelinePosition(ev) {
+  return handleTimelinePositionBase({ ev, isTouchEvent: false });
+}
+
+export function handleTimelinePositionTouch(ev) {
+  return handleTimelinePositionBase({ ev, isTouchEvent: true });
+}

package/_lib/is-touch.js

@@ -0,0 +1,3 @@
+export function isTouch() {
+  return 'ontouchstart' in window;
+}

package/_style/player-timeline.style.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`:host{color-scheme:inherit;display:block;width:100%;container-name:player-timeline;container-type:inline-size;--_background: var( --outbook-player-timeline--background, light-dark( var(--color-accent-200), var(--color-accent-800) ) );--_background-completed: var( --outbook-player-timeline--background-completed, light-dark( var(--color-accent-800), var(--color-accent-200) ) );--_chapter-mark-color: var( --outbook-player-timeline--chapter-mark-color, light-dark( oklch(14.5% 0 0deg), oklch(98.5% 0 0deg) ) );--_text-size: 0.75rem;--_numbers-spacing: 0.125rem}:host .player-timeline__chapter-limit--played{--_chapter-mark-color: var( --outbook-player-timeline--chapter-played-mark-color, light-dark( oklch(98.5% 0 0deg), oklch(14.5% 0 0deg) ) )}@container player (width >= 740px){--_text-size: 0.875rem;--_numbers-spacing: 0.25rem}@container player (width >= 820px){--_text-size: 1rem;--_numbers-spacing: 0.5rem}*{box-sizing:border-box}.player-timeline{position:relative}.player-timeline__track{position:relative;height:1rem;display:flex;align-items:center}.player-timeline__track-real{width:100%;height:100%;cursor:pointer;position:absolute;top:0;left:0;z-index:4}.player-timeline__track-real:focus-visible{outline:var(--outbook-outline--color, light-dark(oklch(48.8% 0.243 264.376deg), oklch(88.2% 0.059 254.128deg))) solid 2px;outline-offset:2px}.player-timeline__track-fake{height:0.25rem;background-color:var(--_background);width:100%;position:relative;border-radius:0.25rem}.player-timeline__completed{height:100%;position:relative;background-color:var(--_background-completed);border-radius:0.25rem 0 0 0.25rem}.player-timeline__thumb{height:0.625rem;width:0.625rem;border-radius:50%;background-color:var(--_background-completed);position:absolute;top:-0.1875rem;right:-0.1875rem;z-index:3}.player-timeline__numbers{display:flex;justify-content:space-between;padding-top:var(--_numbers-spacing);font-size:var(--_text-size)}.player-timeline__tooltip{position:absolute;top:0;transform:translate(-50%, -100%);left:var(--timeline-tooltip-position);padding-bottom:0.5rem;z-index:999}.player-timeline__tooltip-inner{background-color:oklch(100% 0 0deg);color:oklch(37.1% 0 0deg);padding:0.25rem;position:relative;max-width:8rem;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 0 1px oklch(14.5% 0 0deg))}.player-timeline__tooltip-inner:after{content:"";position:absolute;background-color:oklch(100% 0 0deg);width:0.75rem;height:0.75rem;bottom:-0.375rem;left:50%;transform:translateX(-50%) rotate(45deg)}.player-timeline__tooltip-time{font-size:1rem}.player-timeline__tooltip-chapter-title{font-size:0.75rem;margin-bottom:0.25rem}.player-timeline__chapter-limit{width:1px;height:0.25rem;background-color:var(--_chapter-mark-color);position:absolute;top:50%;transform:translateY(-50%);left:var(--timeline--chapter-limit-position);z-index:2}`;

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@outbook/webcomponents-player-timeline",
+  "version": "1.0.0",
+  "main": "player-timeline.js",
+  "type": "module",
+  "private": false,
+  "scripts": {},
+  "keywords": [],
+  "bugs": {
+    "url": "https://gitlab.com/arr2019/web-components/issues"
+  },
+  "homepage": "https://gitlab.com/arr2019/web-components/pkg/web-components/player-timeline#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/arr2019/web-components.git",
+    "folder": "pkg/web-components/player-timeline"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.com/"
+  },
+  "author": "Antonio Rodríguez",
+  "license": "Apache-2.0",
+  "description": "Web component player-timeline",
+  "dependencies": {
+    "@outbook/webcomponents-type-icon": ">=1.1.2",
+    "@outbook/icons": ">=1.3.0",
+    "@outbook/hooks": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@outbook/colorful": ">=1.1.2",
+    "@outbook/design-decisions": ">=1.1.5"
+  },
+  "peerDependencies": {
+    "sass": "^1.97.2",
+    "lit": "^3.0.0",
+    "haunted": "^5.0.0 || ^6.0.0"
+  }
+}

package/player-timeline.js

@@ -0,0 +1,259 @@
+import { adoptStyles, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { component, useState, useMemo, useEffect } from 'haunted';
+import { readable as formatTime } from 'mystic-format-time';
+import { a11yTime } from './_lib/a11y-time.js';
+import { loadLiterals } from './_i18n/i18n.js';
+import _literals from './_i18n/en.json' with { type: 'json' };
+import { useLangObserver } from '@outbook/hooks';
+import styleComponent from './_style/player-timeline.style.js';
+import {
+  isEventClick,
+  isKeyArrowLeft,
+  isKeyArrowRight
+} from 'a11y-key-conjurer';
+import {
+  handleTimelinePosition,
+  handleTimelinePositionTouch
+} from './_lib/handle-timeline-position.js';
+import { isTouch } from './_lib/is-touch.js';
+import { SKIP_TIME } from './_lib/constants.js';
+
+function getChapter({ targetTime, chapters }) {
+  const selected = chapters.find(
+    chapter =>
+      targetTime >= chapter.start / 1000 && targetTime < chapter.end / 1000
+  );
+  return selected?.tags?.title || null;
+}
+
+function ComponentPlayerTimeline(element) {
+  const { props, duration: totalTime } = element;
+  const { currentTime, currentItem } = props;
+
+  const currentLang = useLangObserver(element);
+  const [literals, setLiterals] = useState(_literals);
+  const [timePosition, setTimePosition] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const chapters = currentItem?.metadata?.chapters || [];
+
+  const progress = useMemo(() => {
+    return (100 / totalTime) * currentTime;
+  }, [totalTime, currentTime]);
+
+  const progressVisible = useMemo(() => {
+    return (
+      (100 / totalTime) *
+      (timePosition?.number ? timePosition.number : currentTime)
+    );
+  }, [totalTime, currentTime, timePosition]);
+
+  function dispatchReposition(newTime) {
+    // Ensure to not dispatch times outside bounds of media
+    const safeTime = Math.max(0, Math.min(newTime, totalTime));
+
+    element.dispatchEvent(
+      new CustomEvent('reposition', {
+        bubbles: true,
+        composed: true,
+        detail: { currentTime: safeTime }
+      })
+    );
+  }
+
+  function handleTimeline(ev) {
+    if (isEventClick(ev)) {
+      const percent = handleTimelinePosition(ev);
+      const targetTime = (totalTime / 100) * percent;
+      dispatchReposition(targetTime);
+    } else if (isKeyArrowLeft(ev)) {
+      ev.preventDefault();
+      dispatchReposition(currentTime - SKIP_TIME);
+    } else if (isKeyArrowRight(ev)) {
+      ev.preventDefault();
+      dispatchReposition(currentTime + SKIP_TIME);
+    }
+  }
+
+  function handleTimelineIn(ev) {
+    const target = ev.currentTarget;
+    const leftPosition = ev.layerX;
+    const targetWidth = target.offsetWidth;
+    const targetTime = (leftPosition * totalTime) / targetWidth;
+    setTimePosition({
+      number: targetTime,
+      visual: formatTime(targetTime),
+      chapter:
+        chapters.length > 0 ? getChapter({ targetTime, chapters }) : null,
+      left: leftPosition
+    });
+  }
+
+  function handleThumbMouseMove(ev) {
+    if (isDragging) {
+      const targetTime = (totalTime / 100) * handleTimelinePosition(ev);
+      setTimePosition({
+        number: targetTime,
+        visual: formatTime(targetTime),
+        chapter:
+          chapters.length > 0 ? getChapter({ targetTime, chapters }) : null,
+        left: ev.layerX
+      });
+    } else {
+      handleTimelineIn(ev);
+    }
+  }
+
+  function handleThumbTouchMove(ev) {
+    const targetTime = (totalTime / 100) * handleTimelinePositionTouch(ev);
+    setTimePosition({
+      number: targetTime,
+      visual: formatTime(targetTime),
+      chapter:
+        chapters.length > 0 ? getChapter({ targetTime, chapters }) : null,
+      left: ev.changedTouches[0].clientX
+    });
+  }
+
+  function handleTimelineOut() {
+    setTimePosition(null);
+  }
+
+  function handleThumbMouseDown() {
+    setIsDragging(true);
+  }
+
+  function handleThumbMouseUp() {
+    setTimeout(() => {
+      setIsDragging(false);
+    }, 100);
+  }
+
+  function handleThumbTouchEnd(ev) {
+    const percent = handleTimelinePositionTouch(ev);
+    const targetTime = (totalTime / 100) * percent;
+    dispatchReposition(targetTime);
+
+    handleTimelineOut();
+    handleThumbMouseUp();
+  }
+
+  useEffect(() => {
+    if (element.shadowRoot) {
+      adoptStyles(element.shadowRoot, [styleComponent]);
+    }
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    loadLiterals(currentLang).then(data => {
+      if (isMounted) {
+        setLiterals(data);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [currentLang]);
+
+  return html`
+    <div class="player-timeline">
+      <div class="player-timeline__track">
+        <div class="player-timeline__track-fake">
+          ${chapters.map(chapter => {
+            const limitClasses = {
+              'player-timeline__chapter-limit': true,
+              'player-timeline__chapter-limit--played':
+                (timePosition?.number || currentTime) > chapter.start / 1000
+            };
+            const position = (100 / totalTime) * (chapter.start / 1000);
+            return html`
+              <div
+                class="${classMap(limitClasses)}"
+                style="--timeline--chapter-limit-position: ${position}%;"
+              ></div>
+            `;
+          })}
+          <div
+            class="player-timeline__completed"
+            style="width:${isDragging ? progressVisible : progress}%;"
+          >
+            <div class="player-timeline__thumb"></div>
+          </div>
+        </div>
+        <div
+          class="player-timeline__track-real"
+          @click="${handleTimeline}"
+          @keydown="${handleTimeline}"
+          @mousemove="${handleThumbMouseMove}"
+          @touchmove="${ifDefined(
+            isTouch() ? handleThumbTouchMove : undefined
+          )}"
+          @mouseout="${handleTimelineOut}"
+          @mousedown="${handleThumbMouseDown}"
+          @touchstart="${ifDefined(
+            isTouch() ? handleThumbMouseDown : undefined
+          )}"
+          @mouseup="${handleThumbMouseUp}"
+          @touchend="${ifDefined(isTouch() ? handleThumbTouchEnd : undefined)}"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          aria-valuenow="${progress}"
+          aria-valuetext="${a11yTime({ time: currentTime, literals })}"
+          role="slider"
+          tabindex="0"
+        ></div>
+      </div>
+      <div class="player-timeline__numbers">
+        <div>${formatTime(currentTime)}</div>
+        <div>${formatTime(totalTime)}</div>
+      </div>
+      ${timePosition === null
+        ? nothing
+        : html`
+            <div
+              class="player-timeline__tooltip"
+              style="--timeline-tooltip-position: ${timePosition.left}px;"
+            >
+              <div class="player-timeline__tooltip-inner">
+                ${timePosition.chapter
+                  ? html`
+                      <span class="player-timeline__tooltip-chapter-title">
+                        ${timePosition.chapter}
+                      </span>
+                    `
+                  : nothing}
+                <span class="player-timeline__tooltip-time">
+                  ${timePosition.visual}
+                </span>
+              </div>
+            </div>
+          `}
+    </div>
+  `;
+}
+
+if (!customElements.get('outbook-player-timeline')) {
+  customElements.define(
+    'outbook-player-timeline',
+    component(ComponentPlayerTimeline, {
+      observedAttributes: ['lang', 'duration'],
+      useShadowDOM: true
+    })
+  );
+}
+
+export function PlayerTimeline(props) {
+  const { duration, lang = 'en', extraClasses } = props;
+  return html`
+    <outbook-player-timeline
+      duration=${duration}
+      lang="${lang}"
+      class="${extraClasses}"
+      .props="${props}"
+    ></outbook-player-timeline>
+  `;
+}