matthias
/
WhisperMaPhone
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Audio transcript 

If this website keeps getting more complicated, I'm going to have to add a front-end library.
This commit is contained in:
Matthias Portzel 2022-01-09 16:28:48 -08:00
parent 3fa5f2f89a
commit 07214df87d
2 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
main/static/main/main.css
View File

@ -182,6 +182,22 @@ h1 {
margin-right: 0;
}
.transcript {
white-space: pre-wrap;
font-family: inherit;
overflow-wrap: break-word;
padding-left: 5px;
}
.transcript, .transcript-button {
font-size: 14px;
}
.transcript-label {
color: var(--accent-color);
font-size: 16px;
padding-bottom: 0.5em;
padding-left: 3px;
}
/* Navbar styles */
#main-nav {
padding: 4% 30px 15px;

24
main/templates/whispermaphone/index.html
View File

@ -49,6 +49,11 @@
<img src="{{ thought.media.url }}" class="extended-media" alt="{{ thought.media_alt }}">
{% elif file_type == "m4a" or file_type == "mp3" or file_type == "aac" %}
<audio controls src="{{ thought.media.url }}" class="extended-media"></audio>
{% if thought.media_alt %}
<button class="transcript-button">View transcription</button>
<div class="transcript-label">Transcript</div>
<div class="transcript">{{ thought.media_alt|urlize }}</div>
{% endif %}
{% elif file_type == "mov" or file_type == "mp4" %}
<video src="{{ thought.media.url }}" class="extended-media"></video>
{% endif %}
@ -117,6 +122,25 @@
})
main.appendChild(showMoreButton);
}
//Hydrate Show transcription button
const transcriptButton = el.querySelector(".transcript-button");
console.log(transcriptButton);
if (transcriptButton) {
const transcriptTitle = el.querySelector(".transcript-label");
const transcript = el.querySelector(".transcript");
const extendedParent = transcript.parentNode;
transcriptButton.addEventListener("click", function () {
extendedParent.appendChild(transcriptTitle);
extendedParent.appendChild(transcript);
extendedParent.removeChild(transcriptButton);
});
extendedParent.removeChild(transcriptTitle);
extendedParent.removeChild(transcript);
}
}
}