presently 0.22.0 → 0.23.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bceb99c19c4563f60e51fe3e17cce836c7176ebd9b695919af5737ccc87fd4ca
-  data.tar.gz: 102b2bbab9019d17c5aadb85c3f40044c1e94bdb2e587482c246d0c184f5fa36
+  metadata.gz: 38ca14929dc4ebe84fefad98f34e153f3c6423b9cbb147d73d08a84c2c64e4c2
+  data.tar.gz: b3efe32e93f81c0857d2109231e149d67d510a1d46c3117d0ef862b52f3a6b04
 SHA512:
-  metadata.gz: 8edf0ac3857670ce3afe65522bdf9d560b2f909fb68a85a43161200047f6a8fe588be5bef3ee685ca007a927d47999b5afc7c0db65ae43896c78b018ec347ffc
-  data.tar.gz: b8cca4183e4494e9fdd2923e429bc3bdca75310f127eba5474f410214c90f2cd5a0b2d89bb03df1e887673d30b81ebb45320b3af5853b73f137e6fbe6c2554f7
+  metadata.gz: 1104e8b67d9ff964735a644cbbedb1f9616522af673cf0903bef63cced829e61312cea822cab9cc77a3b84a812e653fb19970582f23726cb846d5f92aa594c51
+  data.tar.gz: d4ae5680354d4b51b1f3d6451a0cf224e03f36dd05255b8d2c9f630b63276dd420c5573b7bed72633e5377af479f1eca18856347c999c364809cae42f505cce5

data/lib/presently/application.rb

@@ -91,7 +91,7 @@ module Presently
 			router.get("/presenter"){make_page(resolver.root(PresenterView), interface: :presenter).call}
 			router.get("/record"){make_page(resolver.root(RecordingView), interface: :recorder).call}
 			
-			router.route("/recordings", methods: ["GET", "HEAD", "PUT"]) do |request|
+			router.route("/recordings", methods: ["GET", "HEAD", "PUT", "PATCH"]) do |request|
 				handle_recording(request, request_parameters(request))
 			end
 			
@@ -159,10 +159,38 @@ module Presently
 			when "GET", "HEAD"
 				serve_recording(request, slide, @recordings)
 			when "PUT"
-				store_recording(request, slide)
+				duration = recording_duration(parameters)
+				if parameters.key?("duration") && !duration
+					return invalid_recording_duration
+				end
+				
+				store_recording(request, slide, duration: duration)
+			when "PATCH"
+				duration = recording_duration(parameters)
+				return invalid_recording_duration unless duration
+				return Protocol::HTTP::Response[404, [], ["Recording not found."]] unless @recordings.exist?(slide)
+				
+				slide.update_duration!(duration)
+				Protocol::HTTP::Response[200, [["content-type", "application/json"]], ["{\"updated\":true,\"duration\":#{duration}}"]]
+			end
+		end
+		
+		# Parse an optional positive recording duration.
+		# @parameter parameters [Hash] The decoded query parameters.
+		# @returns [Integer | Nil] The duration in seconds, or `nil` when absent or invalid.
+		def recording_duration(parameters)
+			if value = parameters["duration"]
+				duration = Integer(value, exception: false)
+				return duration if duration&.positive?
 			end
 		end
 		
+		# Build the response for an invalid recording duration.
+		# @returns [Protocol::HTTP::Response] A bad request response.
+		def invalid_recording_duration
+			Protocol::HTTP::Response[400, [], ["Duration must be a positive number of seconds."]]
+		end
+		
 		# Serve normalized narration for playback, falling back to the source take.
 		def handle_playback_recording(request, parameters)
 			index = recording_index(parameters)
@@ -206,7 +234,7 @@ module Presently
 		# @parameter request [Protocol::HTTP::Request] The incoming request.
 		# @parameter slide [Slide] The slide being recorded.
 		# @returns [Protocol::HTTP::Response]
-		def store_recording(request, slide)
+		def store_recording(request, slide, duration: nil)
 			content_type = request.headers["content-type"]&.split(";", 2)&.first
 			unless content_type == Recordings::CONTENT_TYPE
 				return Protocol::HTTP::Response[415, [], ["Expected #{Recordings::CONTENT_TYPE}."]]
@@ -217,7 +245,10 @@ module Presently
 			end
 			
 			@recordings.write(slide, request.body)
-			Protocol::HTTP::Response[201, [["content-type", "application/json"]], ["{\"saved\":true}"]]
+			slide.update_duration!(duration) if duration
+			
+			result = duration ? "{\"saved\":true,\"duration\":#{duration}}" : "{\"saved\":true}"
+			Protocol::HTTP::Response[201, [["content-type", "application/json"]], [result]]
 		rescue Recordings::TooLarge => error
 			Protocol::HTTP::Response[413, [], [error.message]]
 		end

data/lib/presently/playback.xrb

@@ -19,6 +19,7 @@
 		<script type="importmap">
 		{
 			"imports": {
+				"morphdom": "/_components/morphdom/morphdom-esm.js",
 				"@socketry/presently": "/_components/@socketry/presently/Presently.js",
 				"@socketry/syntax": "/_components/@socketry/syntax/Syntax.js",
 				"animejs": "/_components/animejs/dist/bundles/anime.esm.min.js"
@@ -31,12 +32,17 @@
 	
 	<body class="playback" data-autoplay="#{self.autoplay}" data-controls="#{self.controls}">
 		<main class="playback-stage">
+			<div id="playback-frame" class="playback-frame slide-viewport"></div>
+		</main>
+
+		<!-- Keep inactive slides inert while retaining their rendered HTML for local navigation. -->
+		<div class="playback-slides" hidden>
 			<?r self.slides.each_with_index do |slide, index| ?>
-			<div class="playback-frame slide-viewport" data-index="#{index}" data-transition="#{slide.transition}" data-duration="#{slide.duration}"<?r if index != 0 ?> hidden<?r end ?>>
+			<template data-index="#{index}" data-transition="#{slide.transition}" data-duration="#{slide.duration}">
 				#{self.render_slide(slide)}
-			</div>
+			</template>
 			<?r end ?>
-		</main>
+		</div>
 		
 		<div class="playback-audio" hidden>
 			<?r self.slides.each_with_index do |slide, index| ?>

data/lib/presently/recording_view.rb

@@ -91,7 +91,8 @@ module Presently
 							
 							builder.tag("presently-recorder",
 								id: "presently-recorder-#{index}",
-								"data-recording-url": recording_url
+								"data-recording-url": recording_url,
+								"data-slide-duration": slide.duration
 							) do
 								builder.tag(:div, class: "recording-actions") do
 									builder.tag(:button, class: "recording-toggle", type: "button"){builder.text("● Record")}
@@ -101,6 +102,13 @@ module Presently
 								end
 								
 								builder.tag(:audio, class: "recording-playback", controls: true, preload: "metadata", hidden: true){}
+								builder.tag(:button, class: "recording-apply-duration", type: "button", hidden: true) do
+									builder.text("Update Slide Duration")
+								end
+								builder.tag(:label, class: "recording-duration-option") do
+									builder.tag(:input, class: "recording-update-duration", type: "checkbox")
+									builder.tag(:span){builder.text("Update slide duration to match recording")}
+								end
 								builder.tag(:p, class: "recording-status", role: "status"){builder.text("Checking for an existing recording…")}
 							end
 						end

data/lib/presently/slide.rb

@@ -6,6 +6,7 @@
 require "yaml"
 require "markly"
 require "protocol/url"
+require "tempfile"
 
 require "markly/renderer/html"
 
@@ -353,6 +354,47 @@ module Presently
 			@front_matter&.fetch("duration", 60) || 60
 		end
 		
+		# Update the expected duration in the slide's YAML front matter.
+		# Preserves the remainder of the source file rather than reserializing it.
+		# @parameter duration [Integer] The new positive duration in seconds.
+		# @returns [Integer] The persisted duration.
+		def update_duration!(duration)
+			duration = Integer(duration)
+			raise ArgumentError, "Duration must be positive!" unless duration.positive?
+			
+			path = source_path
+			source = File.read(path)
+			newline = source.include?("\r\n") ? "\r\n" : "\n"
+			
+			front_matter_pattern = /\A---[ \t]*(?<newline>\r?\n)(?<body>.*?)(?<closing>^---[ \t]*(?:\r?\n|\z))/m
+			if match = front_matter_pattern.match(source)
+				body = match[:body]
+				
+				if line = /^duration:[^#\r\n]*(?<comment>[ \t]+#[^\r\n]*)?(?<newline>\r?\n|\z)/.match(body)
+					replacement = "duration: #{duration}#{line[:comment]}#{line[:newline]}"
+					body = body[0...line.begin(0)] + replacement + body[line.end(0)..]
+				else
+					body += match[:newline] unless body.empty? || body.end_with?("\n")
+					body += "duration: #{duration}#{match[:newline]}"
+				end
+				
+				source = source[0...match.begin(:body)] + body + source[match.end(:body)..]
+			else
+				source = "---#{newline}duration: #{duration}#{newline}---#{newline}#{source}"
+			end
+			
+			stat = File.stat(path)
+			Tempfile.create([".presently-slide", ".md"], File.dirname(path), binmode: true) do |file|
+				file.chmod(stat.mode & 0o7777)
+				file.write(source)
+				file.flush
+				File.rename(file.path, path)
+			end
+			
+			(@front_matter ||= {})["duration"] = duration
+			return duration
+		end
+		
 		# The title of this slide.
 		# @returns [String] The H1 text, front matter title, or filename without extension.
 		def title

data/lib/presently/version.rb

@@ -5,5 +5,5 @@
 
 # @namespace
 module Presently
-	VERSION = "0.22.0"
+	VERSION = "0.23.0"
 end

data/public/_components/@socketry/presently/Presently/SlideRendering.js

@@ -12,15 +12,13 @@ async function prepareSlides() {
 // Owns the scripts and view transition associated with one rendering of a slide view.
 export class SlideRendering {
 	#view;
-	#html;
 	#transitionName;
 	#viewTransition = null;
 	#slides = [];
 	#disposed = false;
 
-	constructor(view, {html = null, transition = null} = {}) {
+	constructor(view, {transition = null} = {}) {
 		this.#view = view;
-		this.#html = html;
 		this.#transitionName = transition;
 	}
 
@@ -41,27 +39,32 @@ export class SlideRendering {
 	}
 
 	// Update the view, initialize its slides, and emit the change event.
-	// @parameter live [Live] The connected Live client.
+	// @parameter update [Function] Updates the view's DOM.
 	// @returns [Promise(Boolean)] Whether the rendering was completed.
-	async render(live) {
+	async render(update) {
 		if (this.#disposed) return false;
 
 		let initialized = false;
-		const update = async () => {
+		const render = async () => {
 			if (this.#disposed) return;
 
-			live.update(this.#view.id, this.#html);
+			await update(this.#view);
 			initialized = await this.initialize();
 		};
 
-		if (this.#transitionName && document.startViewTransition) {
+		if (this.#transitionName && document.startViewTransition && !document.hidden) {
 			document.documentElement.dataset.transition = this.#transitionName;
 			let viewTransition = null;
 
 			try {
-				viewTransition = document.startViewTransition(update);
+				viewTransition = document.startViewTransition(render);
 				this.#viewTransition = viewTransition;
-				await viewTransition.finished;
+
+				// A hidden document may abort the visual transition, but the DOM update should still complete.
+				viewTransition.ready.catch(() => {});
+				const finished = viewTransition.finished.catch(() => {});
+				await viewTransition.updateCallbackDone;
+				await finished;
 			} finally {
 				if (this.#viewTransition === viewTransition) {
 					this.#viewTransition = null;
@@ -69,7 +72,7 @@ export class SlideRendering {
 				}
 			}
 		} else {
-			await update();
+			await render();
 		}
 
 		if (initialized && !this.#disposed) {

data/public/_static/recorder.css

@@ -66,7 +66,8 @@ presently-recorder {
 	gap: 0.6rem;
 }
 
-.recording-actions button {
+.recording-actions button,
+.recording-apply-duration {
 	padding: 0.55rem 0.9rem;
 	background: var(--surface-light);
 	border: 1px solid rgba(255,255,255,0.12);
@@ -76,11 +77,17 @@ presently-recorder {
 	font: inherit;
 }
 
-.recording-actions button:hover:not(:disabled) {
+.recording-apply-duration {
+	justify-self: start;
+}
+
+.recording-actions button:hover:not(:disabled),
+.recording-apply-duration:hover:not(:disabled) {
 	background: var(--accent);
 }
 
-.recording-actions button:disabled {
+.recording-actions button:disabled,
+.recording-apply-duration:disabled {
 	cursor: default;
 	opacity: 0.35;
 }
@@ -129,6 +136,13 @@ presently-recorder[data-state="recording"] .recording-indicator {
 	width: 100%;
 }
 
+.recording-duration-option {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	cursor: pointer;
+}
+
 .recording-status {
 	min-height: 1.4em;
 	margin: 0;

data/public/application.js

@@ -9,8 +9,8 @@ let live = null;
 
 let activeRendering = null;
 
-function activateRendering(view, detail = {}) {
-	const rendering = new SlideRendering(view, detail);
+function activateRendering(view, {transition = null} = {}) {
+	const rendering = new SlideRendering(view, {transition});
 	const previousRendering = activeRendering;
 	activeRendering = rendering;
 	previousRendering?.dispose();
@@ -22,8 +22,9 @@ async function renderSlide(event) {
 	const view = event.target.closest?.('live-view');
 	if (!view) return;
 
-	const rendering = activateRendering(view, event.detail);
-	await rendering.render(live);
+	const {html, transition} = event.detail ?? {};
+	const rendering = activateRendering(view, {transition});
+	await rendering.render(renderView => live.update(renderView.id, html));
 }
 
 document.addEventListener(SLIDE_RENDER_EVENT, (event) => {

data/public/playback.js

@@ -1,7 +1,8 @@
-import {applyCodeFocus, runScript} from '@socketry/presently';
-import Syntax from '@socketry/syntax';
+import {SlideRendering} from '@socketry/presently';
+import morphdom from 'morphdom';
 
-const frames = Array.from(document.querySelectorAll('.playback-frame'));
+const frame = document.querySelector('.playback-frame');
+const slideTemplates = Array.from(document.querySelectorAll('.playback-slides template'));
 const audioTracks = new Map(
 	Array.from(document.querySelectorAll('.playback-audio audio')).map(audio => [Number(audio.dataset.index), audio]),
 );
@@ -14,7 +15,7 @@ const nextButton = document.querySelector('.playback-next');
 const counter = document.querySelector('.playback-counter');
 
 let currentIndex = 0;
-let currentScript = null;
+let currentRendering = null;
 let currentAudio = null;
 let playing = false;
 let transitioning = false;
@@ -27,13 +28,13 @@ function setStatus(message, error = false) {
 function updateControls() {
 	toggleButton.textContent = playing ? '❚❚' : '▶';
 	previousButton.disabled = currentIndex === 0;
-	nextButton.disabled = currentIndex === frames.length - 1;
-	counter.textContent = `${currentIndex + 1} / ${frames.length}`;
+	nextButton.disabled = currentIndex === slideTemplates.length - 1;
+	counter.textContent = `${currentIndex + 1} / ${slideTemplates.length}`;
 }
 
 function stopCurrent() {
-	currentScript?.dispose();
-	currentScript = null;
+	currentRendering?.dispose();
+	currentRendering = null;
 
 	if (currentAudio) {
 		currentAudio.pause();
@@ -42,40 +43,40 @@ function stopCurrent() {
 	}
 }
 
-function activateFrame(index) {
-	frames.forEach((frame, frameIndex) => {
-		frame.hidden = frameIndex !== index;
+async function activateFrame(index, {transition = true} = {}) {
+	const slideTemplate = slideTemplates[index];
+	const nextFrame = document.createElement('div');
+	nextFrame.id = frame.id;
+	nextFrame.className = frame.className;
+	nextFrame.dataset.index = slideTemplate.dataset.index;
+	nextFrame.dataset.transition = slideTemplate.dataset.transition;
+	nextFrame.dataset.duration = slideTemplate.dataset.duration;
+	nextFrame.append(slideTemplate.content.cloneNode(true));
+
+	const rendering = new SlideRendering(frame, {
+		transition: transition ? slideTemplate.dataset.transition : null,
 	});
+	currentRendering = rendering;
+
+	const rendered = await rendering.render(renderView => morphdom(renderView, nextFrame));
+	if (!rendered || currentRendering !== rendering) return false;
 
 	currentIndex = index;
-	const slide = frames[index].querySelector('.slide');
-	currentScript = runScript(slide);
 	updateControls();
+	return true;
 }
 
 async function show(index, {transition = true} = {}) {
-	if (transitioning || index < 0 || index >= frames.length) return false;
+	if (transitioning || index < 0 || index >= slideTemplates.length) return false;
 
 	transitioning = true;
 	stopCurrent();
 
-	const transitionName = frames[index].dataset.transition;
-	const swap = () => activateFrame(index);
-
 	try {
-		if (transition && transitionName && document.startViewTransition) {
-			document.documentElement.dataset.transition = transitionName;
-			const viewTransition = document.startViewTransition(swap);
-			await viewTransition.updateCallbackDone;
-		} else {
-			swap();
-		}
+		return await activateFrame(index, {transition});
 	} finally {
-		delete document.documentElement.dataset.transition;
 		transitioning = false;
 	}
-
-	return true;
 }
 
 function finish() {
@@ -115,7 +116,7 @@ async function playCurrent() {
 
 async function handleEnded() {
 	try {
-		if (currentIndex === frames.length - 1) {
+		if (currentIndex === slideTemplates.length - 1) {
 			finish();
 			return;
 		}
@@ -146,7 +147,7 @@ async function start() {
 	startButton.disabled = true;
 
 	try {
-		if (currentIndex === frames.length - 1 || startButton.textContent.includes('again')) {
+		if (currentIndex === slideTemplates.length - 1 || startButton.textContent.includes('again')) {
 			await show(0, {transition: false});
 		}
 
@@ -161,7 +162,7 @@ window.__PRESENTLY_PLAYBACK_START = start;
 
 async function move(offset) {
 	const wasPlaying = playing;
-	const index = Math.max(0, Math.min(frames.length - 1, currentIndex + offset));
+	const index = Math.max(0, Math.min(slideTemplates.length - 1, currentIndex + offset));
 	if (index === currentIndex) return;
 
 	playing = false;
@@ -236,17 +237,15 @@ async function waitForAudioMetadata(audio) {
 }
 
 async function prepare() {
-	if (!frames.length) throw new Error('The presentation has no slides.');
-	if (audioTracks.size !== frames.length) throw new Error('Every slide requires a narration recording.');
+	if (!slideTemplates.length) throw new Error('The presentation has no slides.');
+	if (audioTracks.size !== slideTemplates.length) throw new Error('Every slide requires a narration recording.');
 
 	await Promise.all([
-		Syntax.highlight(),
 		document.fonts.ready,
 		...Array.from(audioTracks.values()).map(waitForAudioMetadata),
 	]);
-	await applyCodeFocus();
 
-	activateFrame(0);
+	await activateFrame(0, {transition: false});
 	startButton.disabled = false;
 	setStatus('Ready.');
 

data/public/recorder.js

@@ -3,7 +3,7 @@ const RECORDING_EDGE_DELAY = 100;
 // Records and reviews the narration for one slide. The element is recreated
 // when the selected slide changes, which gives each recording session a clear
 // lifetime and releases the microphone during navigation.
-class PresentlyRecorder extends HTMLElement {
+export class PresentlyRecorder extends HTMLElement {
 	#mediaRecorder = null;
 	#mediaStream = null;
 	#audioContext = null;
@@ -13,32 +13,46 @@ class PresentlyRecorder extends HTMLElement {
 	#chunks = [];
 	#recording = null;
 	#recordingURL = null;
+	#recordingDuration = null;
 	#startedAt = null;
 	#timer = null;
 	#startToken = null;
+	#ignoreClick = false;
 	
 	connectedCallback() {
 		this.recordButton = this.querySelector('.recording-toggle');
 		this.saveButton = this.querySelector('.recording-save');
 		this.playback = this.querySelector('.recording-playback');
+		this.applyDurationButton = this.querySelector('.recording-apply-duration');
+		this.updateDuration = this.querySelector('.recording-update-duration');
 		this.status = this.querySelector('.recording-status');
 		this.time = this.querySelector('.recording-time');
 		
 		// Stop as soon as the pointer is pressed so the delayed audio excludes the
 		// click. The click handler provides both starting and keyboard activation.
 		this.recordButton.addEventListener('pointerdown', () => {
-			if (this.#mediaRecorder?.state === 'recording') this.stop();
+			if (this.isRecording()) {
+				this.#ignoreClick = true;
+				this.stop();
+			}
 		});
 		this.recordButton.addEventListener('click', () => {
+			if (this.#ignoreClick) {
+				this.#ignoreClick = false;
+				return;
+			}
+
 			if (this.recordButton.disabled) return;
 			
-			if (this.#mediaRecorder?.state === 'recording') {
+			if (this.isRecording()) {
 				this.stop();
 			} else {
 				this.start(performance.now());
 			}
 		});
 		this.saveButton.addEventListener('click', () => this.save());
+		this.applyDurationButton.addEventListener('click', () => this.updateSlideDuration());
+		this.playback.addEventListener('loadedmetadata', () => this.updateDurationAction());
 		
 		this.loadExisting();
 	}
@@ -59,6 +73,10 @@ class PresentlyRecorder extends HTMLElement {
 	get url() {
 		return this.dataset.recordingUrl;
 	}
+
+	isRecording() {
+		return this.#mediaRecorder?.state === 'recording';
+	}
 	
 	async loadExisting() {
 		try {
@@ -95,6 +113,8 @@ class PresentlyRecorder extends HTMLElement {
 		const startToken = this.#startToken = {};
 		this.recordButton.disabled = true;
 		this.saveButton.disabled = true;
+		this.applyDurationButton.hidden = true;
+		this.#recordingDuration = null;
 		this.dataset.state = 'preparing';
 		this.setStatus('Preparing microphone…');
 
@@ -177,6 +197,8 @@ class PresentlyRecorder extends HTMLElement {
 	
 	stop() {
 		if (this.#mediaRecorder?.state === 'recording') {
+			this.#recordingDuration = (performance.now() - this.#startedAt) / 1000;
+			
 			// The encoder receives audio through a 100 ms delay. Stopping immediately
 			// excludes approximately the final 100 ms before this pointer-down event.
 			this.#mediaRecorder.stop();
@@ -195,6 +217,7 @@ class PresentlyRecorder extends HTMLElement {
 		this.#recordingURL = URL.createObjectURL(this.#recording);
 		this.playback.src = this.#recordingURL;
 		this.playback.hidden = false;
+		this.applyDurationButton.hidden = true;
 		
 		this.recordButton.disabled = false;
 		this.recordButton.textContent = '● Retake';
@@ -210,7 +233,19 @@ class PresentlyRecorder extends HTMLElement {
 		this.setStatus('Saving…');
 		
 		try {
-			const response = await fetch(this.url, {
+			const url = new URL(this.url, window.location.href);
+			let duration = null;
+			
+			if (this.updateDuration.checked) {
+				duration = this.canonicalDuration();
+				if (!duration) {
+					throw new Error('Could not determine the recording duration.');
+				}
+				
+				url.searchParams.set('duration', duration);
+			}
+			
+			const response = await fetch(url, {
 				method: 'PUT',
 				headers: {'content-type': this.#recording.type},
 				body: this.#recording,
@@ -220,16 +255,65 @@ class PresentlyRecorder extends HTMLElement {
 				throw new Error((await response.text()) || `Could not save recording (${response.status}).`);
 			}
 			
-			this.playback.src = this.cacheBustedURL();
-			this.releaseRecordingURL();
+			// Keep the reviewed blob loaded because replacing its source resets media metadata:
 			this.#recording = null;
-			this.setStatus('Recording saved.');
+			if (duration) this.dataset.slideDuration = String(duration);
+			this.updateDurationAction();
+			const unit = duration === 1 ? 'second' : 'seconds';
+			this.setStatus(duration ? `Recording saved. Slide duration set to ${duration} ${unit}.` : 'Recording saved.');
 		} catch (error) {
 			this.saveButton.disabled = false;
 			this.setStatus(`Could not save recording: ${error.message}`, true);
 		}
 	}
 	
+	canonicalDuration() {
+		const duration = this.recordingDuration();
+		if (!Number.isFinite(duration) || duration <= 0) return null;
+		return Math.max(1, Math.ceil(duration));
+	}
+	
+	updateDurationAction() {
+		const recordingDuration = this.canonicalDuration();
+		const slideDuration = Number(this.dataset.slideDuration);
+		this.applyDurationButton.hidden = Boolean(this.#recording) || !recordingDuration || recordingDuration === slideDuration;
+	}
+	
+	async updateSlideDuration() {
+		const duration = this.canonicalDuration();
+		if (!duration) return;
+		
+		this.applyDurationButton.disabled = true;
+		this.setStatus('Updating slide duration…');
+		
+		try {
+			const url = new URL(this.url, window.location.href);
+			url.searchParams.set('duration', duration);
+			const response = await fetch(url, {method: 'PATCH'});
+			
+			if (!response.ok) {
+				throw new Error((await response.text()) || `Could not update slide duration (${response.status}).`);
+			}
+			
+			this.dataset.slideDuration = String(duration);
+			this.applyDurationButton.disabled = false;
+			this.applyDurationButton.hidden = true;
+			const unit = duration === 1 ? 'second' : 'seconds';
+			this.setStatus(`Slide duration set to ${duration} ${unit}.`);
+		} catch (error) {
+			this.applyDurationButton.disabled = false;
+			this.setStatus(`Could not update slide duration: ${error.message}`, true);
+		}
+	}
+	
+	recordingDuration() {
+		if (Number.isFinite(this.playback.duration) && this.playback.duration > 0) {
+			return this.playback.duration;
+		}
+		
+		return this.#recordingDuration;
+	}
+	
 	startTimer() {
 		this.#startedAt = performance.now();
 		this.updateTimer();

data/readme.md

@@ -67,6 +67,14 @@ The task records the presentation at 1920×1080 and 30 frames per second by defa
 
 Please see the [project releases](https://socketry.github.io/presently/releases/index) for all releases.
 
+### v0.23.0
+
+  - Keep narrated playback visuals synchronized when the document or inactive slide frames are hidden.
+  - Keep recorded audio duration visible after saving a reviewed take.
+  - Prevent stopping a pointer-initiated recording from immediately starting a retake.
+  - Update slide timing from new or existing narration recordings.
+  - Render audience and narrated playback slides through the same client-side lifecycle so incremental builds behave consistently.
+
 ### v0.22.0
 
   - Split built-in slide and interface styles into focused stylesheets while retaining `index.css` for shared defaults.
@@ -116,12 +124,6 @@ q
   - Export works from current working directory.
       - Remove explicit support for `morph` transition.
 
-### v0.14.0
-
-  - Increase code font size by 50%.
-  - Add support for includes using `![[path]]` syntax.
-  - Add `bake presently:rehearse` tasks for updating timing information.
-
 ## See Also
 
   - [lively](https://github.com/socketry/lively) — The real-time application framework that powers Presently.

data/releases.md

@@ -1,5 +1,13 @@
 # Releases
 
+## v0.23.0
+
+  - Keep narrated playback visuals synchronized when the document or inactive slide frames are hidden.
+  - Keep recorded audio duration visible after saving a reviewed take.
+  - Prevent stopping a pointer-initiated recording from immediately starting a retake.
+  - Update slide timing from new or existing narration recordings.
+  - Render audience and narrated playback slides through the same client-side lifecycle so incremental builds behave consistently.
+
 ## v0.22.0
 
   - Split built-in slide and interface styles into focused stylesheets while retaining `index.css` for shared defaults.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: presently
 version: !ruby/object:Gem::Version
-  version: 0.22.0
+  version: 0.23.0
 platform: ruby
 authors:
 - Samuel Williams