From 484410c488e672e0e6e961cc0911f1f56e39abd6 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Fri, 27 Nov 2020 13:59:28 +0100
Subject: [PATCH] Minor bugfixes
---
src/assets/fonts/subtitles.css | 2 +-
src/routes/player/Player.tsx | 6 ++++--
src/routes/player/subtitles/TtmlHelper.ts | 14 ++++++-------
src/routes/player/video/DashVideoElement.tsx | 4 +++-
src/util/ttml/styles.js | 22 ++++++++++----------
5 files changed, 26 insertions(+), 22 deletions(-)
diff --git a/src/assets/fonts/subtitles.css b/src/assets/fonts/subtitles.css
index 2922f84..b2a9e6f 100644
--- a/src/assets/fonts/subtitles.css
+++ b/src/assets/fonts/subtitles.css
@@ -15,7 +15,7 @@
}
.ttml-monospaceSansSerif {
- font-family: monospace;
+ font-family: Consolas, Lucida Console, Menlo, Monaco, Arial, Helvetica, monospace;
}
.ttml-proportionalSerif {
diff --git a/src/routes/player/Player.tsx b/src/routes/player/Player.tsx
index 2e9fd7d..a497aaa 100644
--- a/src/routes/player/Player.tsx
+++ b/src/routes/player/Player.tsx
@@ -141,7 +141,7 @@ const useStyles = createUseStyles({
player: {
width: "40rem",
height: "30rem",
- background: "#0f0",
+ background: "#dc5",
display: "flex",
flexDirection: "column",
justifyContent: "center",
@@ -154,6 +154,8 @@ const useStyles = createUseStyles({
video: {
maxWidth: "100%",
maxHeight: "100%",
+ minWidth: "100%",
+ minHeight: "100%",
margin: {
left: "auto",
right: "auto",
@@ -165,6 +167,6 @@ const useStyles = createUseStyles({
right: 0,
top: 0,
bottom: 0,
- background: "rgba(1, 0, 0, 0.2)",
+ textShadow: "rgba(40,40,40,0.8) 0px 0px 3px",
},
});
diff --git a/src/routes/player/subtitles/TtmlHelper.ts b/src/routes/player/subtitles/TtmlHelper.ts
index 9f2d8e6..d207048 100644
--- a/src/routes/player/subtitles/TtmlHelper.ts
+++ b/src/routes/player/subtitles/TtmlHelper.ts
@@ -30,24 +30,24 @@ export default class TtmlHelper {
let end = (i + 1 === timeEvents.length) ? duration : timeEvents[i + 1];
let cue = new Cue(start, end, "");
- const render = () => {
- TtmlHelper.renderTrack(track, document, state, start);
- };
- cue.addEventListener("enter", () => {
+ const callback = () => {
if (state.callback) {
window.cancelAnimationFrame(state.callback);
}
state.callback = window.requestAnimationFrame(() => {
- window.addEventListener("resize", render);
- render();
+ TtmlHelper.renderTrack(track, document, state, start);
});
+ };
+ cue.addEventListener("enter", () => {
+ window.addEventListener("resize", callback);
+ callback();
});
cue.addEventListener("exit", () => {
if (state.callback) {
window.cancelAnimationFrame(state.callback);
}
state.callback = window.requestAnimationFrame(() => {
- window.removeEventListener("resize", render);
+ window.removeEventListener("resize", callback);
TtmlHelper.clearUi(state.target);
});
});
diff --git a/src/routes/player/video/DashVideoElement.tsx b/src/routes/player/video/DashVideoElement.tsx
index bca35e0..aa7dce5 100644
--- a/src/routes/player/video/DashVideoElement.tsx
+++ b/src/routes/player/video/DashVideoElement.tsx
@@ -92,7 +92,9 @@ export const DashVideoElement = forwardRef<VideoApi, PropsWithChildren<Props>>(f
if (!player.isReady()) {
return;
}
- player.setQualityFor("audio", 0);
+ if (this.getCurrentAudioTrack()?.representationCount !== track.representationCount) {
+ player.setQualityFor("audio", 0);
+ }
player.setCurrentTrack(track);
},
addEventListener(event: string, listener: () => void) {
diff --git a/src/util/ttml/styles.js b/src/util/ttml/styles.js
index d13ce0d..4510f64 100644
--- a/src/util/ttml/styles.js
+++ b/src/util/ttml/styles.js
@@ -26,12 +26,12 @@
import * as imscNames from './names';
import * as imscUtils from './utils';
-const DEFAULT_FONT_FAMILY = "proportionalSansSerif";
+const DEFAULT_FONT_FAMILY = "monospaceSansSerif";
function StylingAttributeDefinition(ns, name, initialValue, appliesTo, isInherit, isAnimatable, parseFunc, computeFunc) {
this.name = name;
this.ns = ns;
- this.qname = ns + " " + name;
+ this.qname = this.ns + " " + this.name;
this.inherit = isInherit;
this.animatable = isAnimatable;
this.initial = initialValue;
@@ -118,7 +118,7 @@ export const all = [
return {'h': h, 'w': w};
}
},
- function (doc, parent, element, attr, context) {
+ function (doc, parent, element, attr) {
let h;
let w;
if (attr === "auto") {
@@ -206,7 +206,7 @@ export const all = [
true,
true,
imscUtils.parseLength,
- function (doc, parent, element, attr, context) {
+ function (doc, parent, element, attr) {
let fs;
fs = imscUtils.toComputedLength(
attr.value,
@@ -259,7 +259,7 @@ export const all = [
return imscUtils.parseLength(str);
}
},
- function (doc, parent, element, attr, context) {
+ function (doc, parent, element, attr) {
let lh;
if (attr === "normal") {
/* inherit normal per https://github.com/w3c/ttml1/issues/220 */
@@ -312,7 +312,7 @@ export const all = [
return {'h': h, 'w': w};
}
},
- function (doc, parent, element, attr, context) {
+ function (doc, parent, element, attr) {
let h;
let w;
if (attr === "auto") {
@@ -380,7 +380,7 @@ export const all = [
}
return r;
},
- function (doc, parent, element, attr, context) {
+ function (doc, parent, element, attr) {
let padding;
/* TODO: make sure we are in region */
/*
@@ -558,7 +558,7 @@ export const all = [
}
return r;
},
- function (doc, parent, element, attr, context) {
+ function (doc, parent, element, attr) {
if (attr[0] === "none") {
return attr;
}
@@ -603,7 +603,7 @@ export const all = [
function (str) {
return str;
},
- function (doc, parent, element, attr, context) {
+ function (doc, parent, element, attr) {
/* Section 7.16.9 of XSL */
if (attr === "left") {
return "start";
@@ -718,7 +718,7 @@ export const all = [
return r;
}
},
- function (doc, parent, element, attr, context) {
+ function (doc, parent, element, attr) {
/*
* returns {color: <color>, thickness: <norm length>}
*
@@ -883,7 +883,7 @@ export const all = [
true,
false,
imscUtils.parseLength,
- function (doc, parent, element, attr, context) {
+ function (doc, parent, element, attr) {
return imscUtils.toComputedLength(attr.value, attr.unit, null, null, doc.cellLength.w, null);
}
),
--
GitLab