Skip to content

Commit 7064c3a

Browse files
maboamaboa
authored
Merge pull request #138 from hyperaudio/127-src-in-section
137 src in section
2 parents ad34ecb + 4e27451 commit 7064c3a

File tree

3 files changed

+40
-14
lines changed

3 files changed

+40
-14
lines changed

‎__TEST__/hyperaudio-lite.test.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* @jest-environment jsdom
33
*
4-
* Tests updated for version 2.0.17
4+
* Tests updated for version 2.0.21
55
*/
66

77
const { test } = require("@jest/globals");
@@ -47,10 +47,10 @@ function simulateClick(elem, clickType) {
4747
}
4848

4949
document.body.innerHTML =
50-
'<audio id="hyperplayer" class="hyperaudio-player" src="test.mp3" type="audio/mp3"></audio>' +
50+
'<audio id="hyperplayer" class="hyperaudio-player" src="" type=""></audio>' +
5151
'<div id="hypertranscript" class="hyperaudio-transcript">' +
5252
"<article>" +
53-
"<section>" +
53+
'<section data-media-src="test.mp3" data-media-type="audio/mp3">' +
5454
'<p id="p1" data-wm="payment-pointer"><span class="read" data-m="880" data-d="539">test </span><span class="read" data-m="2560" data-d="459">one </span><span class="read" data-m="3240" data-d="370">two </span><span class="read" data-m="3950" data-d="410">three </span><span class="read" data-m="4750" data-d="459">four </span></p>' +
5555
'<p class="active"><span class="read" data-m="6580" data-d="530">test </span><span class="read active" data-m="8099" data-d="439">five </span><span class="unread" data-m="8740" data-d="509">six </span><span class="unread" data-m="9469" data-d="540">seven </span><span class="unread" data-m="10280" data-d="330">eight </span></p>' +
5656
"</section>" +
@@ -109,7 +109,7 @@ test("updateTranscriptVisualState", () => {
109109
expect(ht.updateTranscriptVisualState(ht.currentTime)).toStrictEqual(expectedResult);
110110
});
111111

112-
test("media playback - click on word", () => {
112+
test("transcript - click on word", () => {
113113
simulateClick(document.getElementsByTagName("span")[3], "click");
114114
expect(ht.player.currentTime).toStrictEqual(3.95);
115115
});
@@ -130,7 +130,7 @@ test("instantiation - doubleClick true", () => {
130130
);
131131
});
132132

133-
test("media playback - doubleClick on word", () => {
133+
test("transcript - doubleClick on word", () => {
134134
simulateClick(document.getElementsByTagName("span")[4], "dblclick");
135135
expect(ht.player.currentTime).toStrictEqual(4.75);
136136
});
@@ -151,12 +151,23 @@ test("instantiation - webMonetization true", () => {
151151
);
152152
});
153153

154-
test("media playback - payment pointer inserted", () => {
154+
// This test always passes - fix it
155+
/*test("transcript - payment pointer inserted", () => {
155156
simulateClick(document.getElementsByTagName("span")[4], "click");
156157
157158
jest.setTimeout(() => {
158159
const paymentPointer = document.querySelector('[name="monetization"]');
159160
expect(paymentPointer.content).toStrictEqual("payment-pointer");
160161
}, 0)
161162
163+
});*/
164+
165+
test("transcript - media source insertion from section", () => {
166+
const src = document.querySelector('#hyperplayer').src;
167+
expect(src).toMatch(/test.mp3$/);
168+
});
169+
170+
test("transcript - media source insertion from section", () => {
171+
const type = document.querySelector('#hyperplayer').getAttribute("type");
172+
expect(type).toBe("audio/mp3");
162173
});

‎index.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
<!-- Example index.html Copyright (C) BBC Research & Development - content used with kind permission of Ian Forrester https://twitter.com/cubicgarden/ -->
2-
<!-- Version 2.0.19 -->
2+
<!-- Version 2.0.21 -->
33
<!DOCTYPE html>
44
<html>
55
<head>
66
<meta charset="utf-8">
7-
<title>BBCRD | Education | Ethics of personal data in the era of QS and IoT</title>
7+
<title>Hyperaudio - BBCRD | Education | Ethics of personal data in the era of QS and IoT</title>
88
<link rel="stylesheet" href="css/hyperaudio-lite-player.css">
99
<link rel="stylesheet" href="css/share-this.css">
1010
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.js"></script>
1111
<script src="https://platform.twitter.com/widgets.js"></script>
1212
</head>
1313
<body>
14-
1514
<p>
1615
<form id="searchForm" style="float:right">
1716
<!-- comment out the following line if you don't need playback rate controls -->
18-
<!--Playback Rate <span id="currentPbr">1</span><input id="pbr" type="range" value="1" min="0.5" max="3" step="0.1" style="width:10%">
19-
<input id="search" type="text" ><input type="submit" value="search">-->
17+
Playback Rate <span id="currentPbr">1</span><input id="pbr" type="range" value="1" min="0.5" max="3" step="0.1" style="width:10%">
18+
<input id="search" type="text" ><input type="submit" value="search">
2019
</form>
2120
</p>
2221

2322
<!-- Comment out the following line if you are using an alternative player. ie SoundCloud or YouTube -->
24-
<video id="hyperplayer" class="hyperaudio-player" style="z-index: 5000000; position:relative; width:400px" src="https://lab.hyperaud.io/video/BBC/education.mp4" type="video/mp4" controls>
23+
<video id="hyperplayer" class="hyperaudio-player" style="z-index: 5000000; position:relative; width:400px" src="" type="" controls>
2524
<track id="hyperplayer-vtt" label="English" kind="subtitles" srclang="en" src="">
2625
</video>
2726

@@ -41,7 +40,7 @@
4140

4241
<article data-wm="$ilp.uphold.com/123article">
4342

44-
<section data-wm="$ilp.uphold.com/123section">
43+
<section data-media-src="https://lab.hyperaud.io/video/BBC/education.mp4" data-media-type="audio/mp3" data-wm="$ilp.uphold.com/123section">
4544

4645
<h5 data-m="0">How do we make people more aware of their personal data?</h5>
4746

‎js/hyperaudio-lite.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*! (C) The Hyperaudio Project. MIT @license: en.wikipedia.org/wiki/MIT_License. */
2-
/*! Version 2.0.20 */
2+
/*! Version 2.0.21 */
33

44
'use strict';
55

@@ -168,6 +168,7 @@ class HyperaudioLite {
168168
}
169169

170170
init = (mediaElementId, minimizedMode, autoscroll, doubleClick, webMonetization, playOnClick) => {
171+
171172
const windowHash = window.location.hash;
172173
const hashVar = windowHash.substring(1, windowHash.indexOf('='));
173174

@@ -212,12 +213,27 @@ class HyperaudioLite {
212213
}
213214

214215
//Create the array of timed elements (wordArr)
216+
215217
const words = this.transcript.querySelectorAll('[data-m]');
216218
this.wordArr = this.createWordArray(words);
217219
this.parentTag = words[0].parentElement.tagName;
218220
this.parentElements = this.transcript.getElementsByTagName(this.parentTag);
219221
this.player = document.getElementById(mediaElementId);
220222

223+
// Grab the media source and type from the first section if it exists
224+
// and add it to the media element.
225+
226+
const mediaSrc = this.transcript.querySelector('[data-media-src]').getAttribute('data-media-src');
227+
const mediaType = this.transcript.querySelector('[data-media-type]').getAttribute('data-media-type');;
228+
229+
if (mediaSrc !== null && mediaSrc !== undefined) {
230+
this.player.src = mediaSrc;
231+
}
232+
233+
if (mediaType !== null && mediaType !== undefined) {
234+
this.player.setAttribute('type', mediaType);
235+
}
236+
221237
if (this.player.tagName == 'VIDEO' || this.player.tagName == 'AUDIO') {
222238
//native HTML media elements
223239
this.playerType = 'native';

0 commit comments

Comments
 (0)