different aspects for poster

speech/page/page.view.tree

@@ -10,11 +10,19 @@ $piterjs_speech_page $mol_page
 		enabled <= editing false
 		hint \Название
 	tools /
-		<= Poster_copy $mol_button_download
+		<= Poster_copy $mol_pick
 			hint \Скачать постер
-			blob <= poster_blob? $mol_blob
-			file_name <= poster_name \poster.png
-			Icon <= Poster_copy_icon $mol_icon_camera
+			trigger_content /
+				<= Poster_copy_icon $mol_icon_camera
+			bubble_content /
+				<= Poster_1_1 $mol_button_download
+					blob <= poster_1_1_blob? $mol_blob
+					file_name <= poster_1_1_name \poster_universal.png
+					title \1:1
+				<= Poster_16_19 $mol_button_download
+					blob <= poster_16_9_blob? $mol_blob
+					file_name <= poster_16_9_name \poster_fhd.png
+					title \16:9
 		<= Public $mol_check_icon
 			checked? <=> speech_public? false
 			Icon <= Public_icon $mol_icon_eye
@@ -32,6 +40,7 @@ $piterjs_speech_page $mol_page
 			sub /
 				<= Poster $piterjs_speech_poster
 					speech <= speech
+					aspect <= poster_aspect? \1:1
 		<= Description $mol_textarea
 			hint \О чём
 			value? <=> description?

speech/page/page.view.ts

@@ -19,11 +19,24 @@ namespace $.$$ {
 			return super.Public()
 		}
 
-		override poster_name() {
-			return `${ this.speaker().title() } - ${ this.title() }.png`
+		override poster_1_1_name() {
+			return `${ this.speaker().title() } - ${ this.title() } 1-1.png`
 		}
 
-		override poster_blob() {
+		override poster_16_9_name() {
+			return `${ this.speaker().title() } - ${ this.title() } 16-9.png`
+		}
+
+		override poster_1_1_blob() {
+			this.poster_aspect( `1:1` )
+			const canvas = $mol_wire_sync( this.$ ).$mol_dom_capture_canvas( this.Poster().dom_tree() )
+			const picture = $mol_picture.fit( canvas )
+			const blob = picture.format( `image/png` )!
+			return blob
+		}
+
+		override poster_16_9_blob() {
+			this.poster_aspect( `16:9` )
 			const canvas = $mol_wire_sync( this.$ ).$mol_dom_capture_canvas( this.Poster().dom_tree() )
 			const picture = $mol_picture.fit( canvas )
 			const blob = picture.format( `image/png` )!

speech/poster/poster.view.css.ts

@@ -23,12 +23,26 @@ namespace $.$$ {
 
 		lineHeight: `4rem`,
 
+		transition: `none`,
+
 		width: `1000px`,
 		height: `1000px`,
-		aspectRatio: 1,
+
+		'@': {
+			piterjs_speech_poster_aspect: {
+				'1:1': {
+					width: `1000px`,
+					height: `1000px`,
+				},
+				'16:9': {
+					width: `1920px`,
+					height: `1080px`,
+				},
+			},
+		},
 
 		$piterjs_screen_lines: {
-			width: `10rem`,
+			width: `20rem`,
 		},
 
 		Main: {

speech/poster/poster.view.tree

@@ -4,6 +4,9 @@ $piterjs_speech_poster $piterjs_screen
 		start => start
 		speaker => speaker
 	theme \$mol_theme_light
+	attr *
+		^
+		piterjs_speech_poster_aspect <= aspect \1:1
 	content /
 		<= Main $mol_view sub /
 			<= Title $mol_paragraph