Perhaps too early. we'll reput it later, once I've redone chapter editor

Add chapter name on pointer ? #95 Annotations in a ticker as in SoundCloud #76
dascritch · Feb 11, 2021 · 063c48d · 063c48d
1 parent b571fca
commit 063c48d
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 43 deletions.
diff --git a/dist/cpu-audio.js b/dist/cpu-audio.js
diff --git a/dist/cpu-audio.js.map b/dist/cpu-audio.js.map
diff --git a/src/45_element_cpu.js b/src/45_element_cpu.js
@@ -257,26 +257,30 @@ class CPU_element_api {
 	}
 
 	/**
-	 * Displays a text in the infoline and covers the ticker line. Or hide it
+	 * Displays a text in the infoline or hide it
 	 * @public
 	 *
 	 * @param      {string} 			text     	HTML text to display. Or hide it if empty
+	 * @param      {boolean} 			priority   	If set to true, will hide any track, else, will not be displayed if there is a track
 
 	**/
-	ticker_flash(text='') {
+	/*
+	flash(text='') {
+		// I still need to complete https://codepen.io/GoOz/pen/QWGGgOo
 		let indication_classname = 'flash';
 		let indicate_on = this.elements['about'];
 		if (text) {
 			indicate_on.classList.add(indication_classname);
 			if (this.has_ticker_planes()) {
-				window.setTimeout(() => {this.ticker_flash()}, 2000, this);
+				// window.setTimeout(() => {this.flash()}, 2000, this);
 			}
 		} else {
 			indicate_on.classList.remove(indication_classname);
 			text = '';
 		}
 		this.elements['infoline'].innerHTML = text;
 	}
+	*/
 
 	/**
 	 * @brief Will refresh player interface at each time change (a lot)
@@ -1039,7 +1043,7 @@ class CPU_element_api {
 		mirror = mirror === undefined ? true : mirror;
 		class_name = (typeof class_name === 'string') ? class_name : preview_classname;
 		querySelector_apply(`.${class_name}`,(element) => { element.classList.remove(class_name); },this.container);
-		this.ticker_flash('');
+		// this.flash(''); // we have a change : redisplay the playing cue text. Not so easy
 		if (
 			(mirror) &&
 			(document.CPU.global_controller !== null) &&
@@ -1089,7 +1093,12 @@ class CPU_element_api {
 			}
 		}
 
-		this.ticker_flash(this.get_point(plane_name, point_name)['text']);
+		/* we need to keep the actual flash message, to recall it
+		let point = this.get_point(plane_name, point_name);
+		if (point) {
+			this.flash(point['text']); 
+		}
+		*/
 
 		if (
 			(mirror) &&
@@ -1119,7 +1128,7 @@ class CPU_element_api {
 				return ;
 			}
 			this._activecue = activecue;
-			this.ticker_flash(activecue['text']);
+			//this.flash(activecue['text']);
 			// do NOT tell me this is ugly, i know this is ugly. I missed something better
 		} catch (error) {
 

diff --git a/src/scoped.css b/src/scoped.css
@@ -176,6 +176,11 @@ a {
 	flex : 1 1 auto;
 	position : relative;
 }
+#about {
+	overflow : hidden;
+	display:flex;
+	flex-direction : column;
+}
 #title {
 	overflow: hidden;
 	text-overflow : '…';
@@ -232,7 +237,7 @@ main:focus #loadingline:after {
 	opacity : 1;
 }
 
-aside, #infoline {
+aside {
 	position : absolute;
 	width : 100%;
 }
@@ -248,7 +253,7 @@ aside a span {
 
 aside.chapters {
 	height : 2px;
-	bottom : -2px;
+	/* bottom : -2px; */
 }
 
 aside.chapters a {
@@ -308,14 +313,12 @@ aside.ticker a.active-cue span {
 	display : inline-block;
 }
 
+/*
 #infoline {
-	height : 0px;
-	top : 14px;
-}
-
-.flash #infoline {
-	height : 16px;
+	flex: 0 0 auto;
+	min-height : 14px;
 }
+*/
 
 .act-loading #loadingline {
 	background : repeating-linear-gradient(45deg, var(--cpu-color) 0, var(--cpu-background) 15px, var(--cpu-color) 30px);
@@ -460,7 +463,7 @@ h6 {
 	text-align : right;
 }
 
-aside a, h6, .cue time , aside.ticker *, #infoline, #infoline *
+aside a, h6, .cue time , aside.ticker * /*, #infoline, #infoline * */
 {
 	font-size : var(--cpu-font-small-size);
 }

diff --git a/src/template.html b/src/template.html
@@ -65,17 +65,17 @@ <h5 id="title"><a href="#" id="canonical" aria-label="${__.canonical}"></a></h5>
 					<div id="time">
 						<div id="loadingline" role="progressbar"></div>
 						<time id="popup">--:--</time>
-						<div id="infoline" class="nosmall"></div>
 					</div>
 				</div>
+				<!-- div id="infoline" class="nosmallest"></div -->
 			</div>
-			<a id="actions" aria-label="${__.more}" title="${__.more}">
+			<button id="actions" aria-label="${__.more}" title="${__.more}">
 				<svg viewBox="0 0 32 32" aria-hidden="true">
 					<circle cx="7" cy="16" r="3" />
 					<circle cx="16" cy="16" r="3" />
 					<circle cx="25" cy="16" r="3" />
 				</svg>
-			</a>
+			</button>
 		</section>
 		<section id="pageshare">
 			<a href="#" target="social" id="nativeshare" aria-label="${__.share}" title="${__.share}">