1- import MyMinElement from '../MyMinElement.js' ;
1+ import attachTemplate from '../util/attachTemplate.js' ;
2+ // import MyMinElement from '../MyMinElement.js';
23
3- const { fetch } = window ;
4+ const { fetch, HTMLElement } = window ;
45
56/**
67 * Display transcript for an iframe-based embed (E.g. <my-loom-embed>)
@@ -11,12 +12,15 @@ const { fetch } = window;
1112 * @status experimental
1213 * @since 1.8.0
1314 */
14- export class MyTranscriptElement extends MyMinElement {
15+ export class MyTranscriptElement extends HTMLElement {
16+ #captions;
17+ #listItems;
18+
1519 static getTag ( ) { return 'my-transcript' ; }
1620
1721 get open ( ) { return this . hasAttribute ( 'open' ) ? 'open' : '' ; }
1822
19- get _template ( ) {
23+ get #htmlTemplate ( ) {
2024 return `
2125<template>
2226 <style> [ part *= ' active' ] { border: 1px solid #b00; } </style>
@@ -40,88 +44,88 @@ export class MyTranscriptElement extends MyMinElement {
4044 // console.assert(url, '"embed-origin" (iframe) - Attribute required.');
4145 }
4246
43- get _vttParserJs ( ) { return 'https://unpkg.com/@plussub/srt-vtt-parser@^2/dist/index.js' ; }
47+ get #vttParserJs ( ) { return 'https://unpkg.com/@plussub/srt-vtt-parser@^2/dist/index.js' ; }
4448
4549 async connectedCallback ( ) {
4650 console . assert ( this . embedOrigin , '"embed-origin" (iframe) - Attribute required for dynamic transcript.' ) ;
4751
48- await this . _fetchAndParseCaptionFile ( ) ;
52+ await this . #fetchAndParseCaptionFile ( ) ;
4953
50- this . _attachLocalTemplate ( this . _template ) ;
54+ attachTemplate ( this . #htmlTemplate ) . to . shadowDOM ( this ) ;
5155
52- this . _listItems = this . _createCaptionElements ( ) ;
56+ this . #listItems = this . #createCaptionElements ( ) ;
5357
5458 if ( this . embedOrigin ) {
55- window . addEventListener ( 'message' , ( ev ) => this . _onMessageEvent ( ev ) ) ;
59+ window . addEventListener ( 'message' , ( ev ) => this . #onMessageEvent ( ev ) ) ;
5660 }
5761 }
5862
59- async _parseCaptions ( data ) {
60- const { parse } = await import ( this . _vttParserJs ) ;
63+ async #parseCaptions ( data ) {
64+ const { parse } = await import ( this . #vttParserJs ) ;
6165 console . assert ( parse , 'Expecting "parse" function.' ) ;
6266
6367 const CAP = parse ( data ) ;
6468 console . assert ( CAP && CAP . entries . length , 'Expecting VTT/SRT captions.' ) ;
6569 return CAP ;
6670 }
6771
68- async _fetchAndParseCaptionFile ( ) {
72+ async #fetchAndParseCaptionFile ( ) {
6973 const RESP = await fetch ( this . href ) ;
7074 if ( ! RESP . ok ) {
7175 throw new Error ( `Caption fetch error: ${ RESP . status } ${ this . href } ) ;
7276 }
7377 const TEXT = await RESP . text ( ) ;
74- const CAP = await this . _parseCaptions ( TEXT ) ;
78+ const CAP = await this . #parseCaptions ( TEXT ) ;
7579
7680 console . debug ( 'my-transcript, Captions:' , CAP . entries . length , CAP , this ) ;
77- this . _captions = CAP . entries ;
78- return this . _captions ;
81+ this . #captions = CAP . entries ;
82+ return this . #captions ;
7983 }
8084
81- _createCaptionElements ( ) {
82- return this . _captions . map ( ( { id, from, to, text } ) => {
85+ #createCaptionElements ( ) {
86+ return this . #captions . map ( ( { id, from, to, text } ) => {
8387 const listItem = document . createElement ( 'li' ) ;
8488 listItem . textContent = text ;
8589 listItem . dataset . cid = id ;
8690 listItem . dataset . from = from ;
8791 listItem . dataset . to = to ;
88- this . _listElement . appendChild ( listItem ) ;
92+ this . #listElement . appendChild ( listItem ) ;
8993 return listItem ;
9094 } ) ;
9195 }
9296
93- _resetCaptionElements ( ) {
97+ #resetCaptionElements ( ) {
9498 this . _listItems . forEach ( ( el ) => { el . setAttribute ( 'part' , 'li inactive' ) ; } ) ;
9599 }
96100
97- _queryCaptionElement ( cid ) {
98- return this . _listElement . querySelector ( `[data-cid = "${ cid } ) ;
101+ #queryCaptionElement ( cid ) {
102+ return this . #listElement . querySelector ( `[data-cid = "${ cid } ) ;
99103 }
100104
101- get _listElement ( ) {
105+ get #listElement ( ) {
102106 return this . shadowRoot . querySelector ( 'ol' ) ;
103107 }
104108
105- _findCaption ( seconds ) {
109+ #findCaption ( seconds ) {
106110 const millis = parseInt ( 1000 * seconds ) ;
107- return this . _captions . find ( ( { from, to } ) => millis >= from && millis <= to ) ;
111+ return this . #captions . find ( ( { from, to } ) => millis >= from && millis <= to ) ;
108112 }
109113
110114 /** Relies on player.js on <iframe>
111115 * @see https://github.com/embedly/player.js
112116 */
113- _onMessageEvent ( ev ) {
117+ #onMessageEvent ( ev ) {
114118 if ( ev . origin !== this . embedOrigin ) { return ; }
115119
116120 const DATA = JSON . parse ( ev . data ) ;
117121 const { event, value } = DATA ;
118122
119123 if ( event === 'timeupdate' ) {
120124 const { seconds } = value ;
121- const caption = this . _findCaption ( seconds ) ;
125+ const caption = this . #findCaption ( seconds ) ;
122126 if ( caption ) {
123- this . _resetCaptionElements ( ) ;
124- const itemElem = this . _queryCaptionElement ( caption . id ) ;
127+ this . #resetCaptionElements ( ) ;
128+ const itemElem = this . #queryCaptionElement ( caption . id ) ;
125129 itemElem . setAttribute ( 'part' , 'li active' ) ;
126130 // itemElem.dataset.active = true;
127131
0 commit comments