Improved sharing videos

materialious/android/app/build.gradle

@@ -7,7 +7,7 @@ android {
         applicationId "us.materialio.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 169
+        versionCode 170
         versionName "1.11.9"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {

materialious/android/app/capacitor.build.gradle

@@ -14,6 +14,7 @@ dependencies {
     implementation project(':capacitor-browser')
     implementation project(':capacitor-clipboard')
     implementation project(':capacitor-screen-orientation')
+    implementation project(':capacitor-share')
     implementation project(':capacitor-nodejs')
 
 }

materialious/android/capacitor.settings.gradle

@@ -17,5 +17,8 @@ project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacito
 include ':capacitor-screen-orientation'
 project(':capacitor-screen-orientation').projectDir = new File('../node_modules/@capacitor/screen-orientation/android')
 
+include ':capacitor-share'
+project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/share/android')
+
 include ':capacitor-nodejs'
 project(':capacitor-nodejs').projectDir = new File('../node_modules/capacitor-nodejs/android')

materialious/electron/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "Materialious",
-	"version": "1.11.8",
+	"version": "1.11.9",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "Materialious",
-			"version": "1.11.7",
+			"version": "1.11.9",
 			"license": "MIT",
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.0",

materialious/electron/package.json

@@ -43,4 +43,4 @@
 		"capacitor",
 		"electron"
 	]
-}
+}

materialious/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "materialious",
-	"version": "1.11.8",
+	"version": "1.11.9",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "materialious",
-			"version": "1.11.7",
+			"version": "1.11.9",
 			"hasInstallScript": true,
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.1",
@@ -17,6 +17,7 @@
 				"@capacitor/clipboard": "^7.0.0",
 				"@capacitor/core": "^7.4.3",
 				"@capacitor/screen-orientation": "^7.0.0",
+				"@capacitor/share": "^7.0.2",
 				"beercss": "^3.12.13",
 				"bgutils-js": "^3.2.0",
 				"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",
@@ -2081,6 +2082,15 @@
 				"@capacitor/core": ">=7.0.0"
 			}
 		},
+		"node_modules/@capacitor/share": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/@capacitor/share/-/share-7.0.2.tgz",
+			"integrity": "sha512-VyNPo/9831xnL17IMDeft5yNdBjoKNb451P95sRcr69hulRDqHc+kndqOVaMXnaA6IyBdWnnFv/n1HUf4cXpGw==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@capacitor/core": ">=7.0.0"
+			}
+		},
 		"node_modules/@cspotcode/source-map-support": {
 			"version": "0.8.1",
 			"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",

materialious/package.json

@@ -49,6 +49,7 @@
 		"@capacitor/clipboard": "^7.0.0",
 		"@capacitor/core": "^7.4.3",
 		"@capacitor/screen-orientation": "^7.0.0",
+		"@capacitor/share": "^7.0.2",
 		"beercss": "^3.12.13",
 		"bgutils-js": "^3.2.0",
 		"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",

materialious/src/lib/components/Player.svelte

@@ -833,7 +833,7 @@
 		id="player"
 		poster={getBestThumbnail(data.video.videoThumbnails, 9999, 9999)}
 	></video>
-	{#if isEmbed && !isAndroidTvStore}
+	{#if isEmbed && !$isAndroidTvStore}
 		<div class="chip blur embed" style="position: absolute;top: 10px;left: 10px;font-size: 18px;">
 			{data.video.title}
 		</div>

materialious/src/lib/components/ShareVideo.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import { instanceStore } from '$lib/store';
+	import { Share } from '@capacitor/share';
+	import ui from 'beercss';
 	import { Clipboard } from '@capacitor/clipboard';
 	import { Capacitor } from '@capacitor/core';
 	import { _ } from '$lib/i18n';
@@ -14,62 +16,67 @@
 
 	let { video, currentTime = $bindable() }: Props = $props();
 	let includeTimestamp: boolean = $state(false);
+
+	async function shareUrl(url: string, param: string = 't') {
+		if (includeTimestamp) url += `?${param}=${Math.floor(currentTime ?? 0)}`;
+
+		if ((await Share.canShare()) && Capacitor.getPlatform() !== 'electron') {
+			await Share.share({ url: url });
+		} else {
+			await Clipboard.write({ string: url });
+			ui('#share-success');
+		}
+	}
 </script>
 
-{#if currentTime !== undefined}
-	<li class="row">
-		<label class="switch">
-			<input type="checkbox" bind:checked={includeTimestamp} />
-			<span></span>
-		</label>
-		<div class="min">{$_('player.share.includeTimestamp')}</div>
+<menu class="no-wrap mobile" data-ui="#share-menu" id="share-menu">
+	{#if currentTime !== undefined}
+		<li class="row">
+			<label class="switch">
+				<input type="checkbox" bind:checked={includeTimestamp} />
+				<span></span>
+			</label>
+			<div class="min">{$_('player.share.includeTimestamp')}</div>
+		</li>
+		<div class="divider"></div>
+	{/if}
+	<li
+		data-ui="#share-menu"
+		class="row"
+		role="presentation"
+		onclick={async () => {
+			if (Capacitor.isNativePlatform()) {
+				shareUrl(`${get(instanceStore)}/watch/${video.videoId}`);
+			} else {
+				shareUrl(
+					`${location.origin}${resolve('/watch/[videoId]', { videoId: video.videoId })}`,
+					'time'
+				);
+			}
+		}}
+	>
+		<div class="min">{$_('player.share.materialiousLink')}</div>
 	</li>
-	<div class="divider"></div>
-{/if}
-<li
-	class="row"
-	role="presentation"
-	onclick={async () => {
-		let url = '';
-		if (Capacitor.isNativePlatform()) {
-			url = `${get(instanceStore)}/watch/${video.videoId}`;
-		} else {
-			url = `${location.origin}${resolve('/watch/[videoId]', { videoId: video.videoId })}`;
-		}
-		if (includeTimestamp && currentTime !== undefined) {
-			url += `?time=${Math.floor(currentTime)}`;
-		}
-		await Clipboard.write({ string: url });
-		(document.activeElement as HTMLElement)?.blur();
-	}}
->
-	<div class="min">{$_('player.share.materialiousLink')}</div>
-</li>
-<li
-	class="row"
-	role="presentation"
-	onclick={async () => {
-		let url = `https://redirect.invidious.io/watch?v=${video.videoId}`;
-		if (includeTimestamp && currentTime !== undefined) {
-			url += `&t=${Math.floor(currentTime)}`;
-		}
-		await Clipboard.write({ string: url });
-		(document.activeElement as HTMLElement)?.blur();
-	}}
->
-	<div class="min">{$_('player.share.invidiousRedirect')}</div>
-</li>
-<li
-	class="row"
-	role="presentation"
-	onclick={async () => {
-		let url = `https://www.youtube.com/watch?v=${video.videoId}`;
-		if (includeTimestamp && currentTime !== undefined) {
-			url += `&t=${Math.floor(currentTime)}`;
-		}
-		await Clipboard.write({ string: url });
-		(document.activeElement as HTMLElement)?.blur();
-	}}
->
-	<div class="min">{$_('player.share.youtubeLink')}</div>
-</li>
+	<li
+		data-ui="#share-menu"
+		class="row"
+		role="presentation"
+		onclick={async () => {
+			shareUrl(`https://redirect.invidious.io/watch?v=${video.videoId}`);
+		}}
+	>
+		<div class="min">{$_('player.share.invidiousRedirect')}</div>
+	</li>
+	<li
+		data-ui="#share-menu"
+		class="row"
+		role="presentation"
+		onclick={async () => {
+			shareUrl(`https://www.youtube.com/watch?v=${video.videoId}`);
+		}}
+	>
+		<div class="min">{$_('player.share.youtubeLink')}</div>
+	</li>
+</menu>
+
+<div class="snackbar" id="share-success">{$_('player.share.copiedSuccess')}</div>

materialious/src/lib/components/settings/Settings.svelte

@@ -95,7 +95,7 @@
 				<i>{tabs[tabIds.indexOf(activeTab)].icon}</i>
 				<span>{tabs[tabIds.indexOf(activeTab)].label}</span>
 				<menu style="width: 100%;" data-ui="#tab-menu" id="tab-menu">
-					{#each tabs as tab, _}
+					{#each tabs as tab (tab)}
 						<li
 							onclick={() => {
 								activeTab = tab.id;
@@ -112,7 +112,7 @@
 		</nav>
 
 		<nav class="tabbed small m l" style="outline: none" role="tablist" tabindex="0">
-			{#each tabs as tab, index}
+			{#each tabs as tab, index (tab)}
 				<a
 					role="tab"
 					class:active={isActive(tab.id)}
@@ -153,7 +153,7 @@
 		</nav>
 		<div class="space"></div>
 		<div class="divider"></div>
-		{#each tabs as tab, _}
+		{#each tabs as tab (tab)}
 			<div
 				class="page padding"
 				id={`panel-${tab.id}`}

materialious/src/lib/i18n/locales/en.json

@@ -102,7 +102,8 @@
 			"materialiousLink": "Copy Materialious link",
 			"invidiousRedirect": "Copy Invidious redirect link",
 			"youtubeLink": "Copy Youtube link",
-			"includeTimestamp": "Timestamped"
+			"includeTimestamp": "Timestamped",
+			"copiedSuccess": "Copied to clipboard"
 		},
 		"download": "Download",
 		"downloadSteps": {

materialious/src/routes/(app)/watch/[slug]/+page.svelte

@@ -445,10 +445,9 @@
 						<div class="tooltip">
 							{$_('player.share.title')}
 						</div>
-						<menu class="no-wrap mobile">
-							<ShareVideo bind:currentTime={playerCurrentTime} video={data.video} />
-						</menu></button
-					>
+						W
+						<ShareVideo bind:currentTime={playerCurrentTime} video={data.video} />
+					</button>
 					{#if personalPlaylists}
 						<button class="border">
 							<i>add</i>

update_versions.py

@@ -3,7 +3,7 @@ import os
 import re
 from datetime import datetime
 
-LATEST_VERSION = "1.11.8"
+LATEST_VERSION = "1.11.9"
 RELEASE_DATE = datetime.now().strftime("%Y-%-m-%d")  # Format: YYYY-M-D
 
 WORKING_DIR = os.path.join(os.path.dirname(os.path.realpath(__file__)), "materialious")