* Added support for media urls from the domain "youtu.be". (so yt's share button/panel is compatible)

* Added support for timestamps included in youtube video urls.
* Updated "cloud-project-init" readme-module to latest instructions. (sourced from the "to-react-19" branch)

Author: Venryx

Packages/client/Source/UI/@Shared/Maps/Node/NodeBox/SubPanel.tsx

@@ -7,6 +7,7 @@ import {Button, Row, Text} from "react-vcomponents";
 import {E, ModifyString} from "js-vextensions";
 import {ButtonChain} from "Utils/ReactComponents/ButtonChain.js";
 import {SourcesUI} from "./SourcesUI.js";
+import {ParseYoutubeVideoInfo} from "../../../../Database/Medias/MediaDetailsUI.js";
 
 @Observer
 export class SubPanel extends BaseComponent<{node: NodeL2, toolbarShowing: boolean} & HTMLProps_Fixed<"div">, {}> {
@@ -109,15 +110,15 @@ export class SubPanel_Media extends BaseComponentPlus({} as {mediaAttachment: Me
 		const media = GetMedia(mediaAttachment.id); // nn: db-ref, bail
 		if (media == null) return null;
 
-		const videoID = ParseYoutubeVideoID(media.url);
+		const ytInfo = ParseYoutubeVideoInfo(media.url);
 		return (
 			<div style={{position: "relative"}}>
 				{/*<Row mt={5} style={{display: "flex", alignItems: "center"}}>*/}
 				{media.type == MediaType.image &&
 					<img src={media.url} style={{width: mediaAttachment.previewWidth != null ? `${mediaAttachment.previewWidth}%` : undefined, maxWidth: "100%"}}/>}
 				{media.type == MediaType.video && <>
-					{videoID == null && <div>Invalid YouTube video url: {media.url}</div>}
-					{videoID != null && <YoutubePlayerUI videoID={videoID} /*startTime={0}*/ heightVSWidthPercent={.5625}
+					{ytInfo.videoID == null && <div>Invalid YouTube video url: {media.url}</div>}
+					{ytInfo.videoID != null && <YoutubePlayerUI videoID={ytInfo.videoID} startTime={ytInfo.startTime ?? 0} heightVSWidthPercent={.5625}
 						onPlayerInitialized={player=>{
 							player.GetPlayerUI().style.position = "absolute";
 						}}/>}

Packages/client/Source/UI/Database/Medias/MediaDetailsUI.tsx

@@ -13,14 +13,35 @@ import {RunCommand_AddMedia} from "Utils/DB/Command.js";
 import {PolicyPicker} from "../Policies/PolicyPicker.js";
 import {store} from "../../../Store/index.js";
 
+export function ParseYoutubeVideoInfo(urlStr: string) {
+	const videoID = ParseYoutubeVideoID_New(urlStr);
+	const url = new URL(urlStr);
+	const startTimeStr = url.searchParams.get("t") || url.searchParams.get("start");
+	const startTime = startTimeStr ? parseInt(startTimeStr) : null; // in seconds
+	return {videoID, startTime};
+}
+export function ParseYoutubeVideoID_New(urlStr: string) {
+	const url = new URL(urlStr);
+	const pathParts = url.pathname.split("/");
+	if (url.hostname == "youtu.be") {
+		if (pathParts.length > 1) return pathParts[1];
+	}
+	if (url.hostname == "www.youtube.com" || url.hostname == "youtube.com") {
+		if (pathParts[1] == "watch" && url.searchParams.has("v")) return url.searchParams.get("v");
+		if (pathParts[1] == "embed" && pathParts.length > 1) return pathParts[2];
+		if (pathParts[1] == "shorts" && pathParts.length > 1) return pathParts[2];
+	}
+	return null;
+}
+
 @Observer
 export class MediaDetailsUI extends DetailsUI_Base<Media, MediaDetailsUI> {
 	scrollView: ScrollView;
 	render() {
 		const {baseData, style, onChange} = this.props;
 		const {newData, dataError} = this.state;
 		const {Change, creating, editing} = this.helpers;
-		const videoID = ParseYoutubeVideoID(newData.url);
+		const ytInfo = ParseYoutubeVideoInfo(newData.url);
 		const accessPolicy = GetAccessPolicy(newData.accessPolicy);
 		const enabled = creating || editing;
 
@@ -48,7 +69,7 @@ export class MediaDetailsUI extends DetailsUI_Base<Media, MediaDetailsUI> {
 						/*pattern={Media_urlPattern}*/ required
 						enabled={enabled} style={{width: "100%"}}
 						value={newData.url} onChange={val=>Change(newData.url = val)}/>
-					{newData.type == MediaType.video && newData.url && videoID == null &&
+					{newData.type == MediaType.video && newData.url && ytInfo.videoID == null &&
 						<Span ml={5} style={{color: HSLA(30, 1, .6, 1), whiteSpace: "pre"}}>Only YouTube urls supported currently.</Span>}
 				</RowLR>
 				<RowLR mt={5} splitAt={splitAt} style={{width: "100%"}}>
@@ -63,10 +84,10 @@ export class MediaDetailsUI extends DetailsUI_Base<Media, MediaDetailsUI> {
 								<img src={newData.url} style={{width: "100%"}}/>
 							</Row>}
 						{newData.type == MediaType.video &&
-							// use wrapper div (with video-id as key), to ensure element cleanup when video-id changes
-							<div key={videoID}>
-								{!videoID && <div>Invalid YouTube video url: {newData.url}</div>}
-								{videoID && <YoutubePlayerUI videoID={videoID} /*startTime={0}*/ heightVSWidthPercent={.5625}
+							// use wrapper div (with media url as key), to ensure element cleanup when url changes
+							<div key={newData.url}>
+								{!ytInfo.videoID && <div>Invalid YouTube video url: {newData.url}</div>}
+								{ytInfo.videoID && <YoutubePlayerUI videoID={ytInfo.videoID} startTime={ytInfo.startTime ?? 0} heightVSWidthPercent={.5625}
 									onPlayerInitialized={player=>{
 										player.GetPlayerUI().style.position = "absolute";
 									}}/>}

README.md

@@ -661,26 +661,24 @@ Prerequisite steps: [setup-k8s](#setup-k8s)
 
 Note: We use Google Cloud here, but others could be used.
 
-NOTE: This section is outdated. (see "to-react-19" branch instead, for now)
-
 * 1\) Ensure you have a user-account on Google Cloud Platform: https://cloud.google.com/
 * 2\) Install the Google Cloud SDK: https://cloud.google.com/sdk/docs/install
 * 3\) Authenticate the gcloud sdk/cli by providing it with the key-file for a service-account with access to the project you want to deploy to.
 	* 3.1\) For the main Google Cloud project instance, you'll need to be supplied with the service-account key-file. (contact Venryx)
 	* 3.2\) If you're creating your own fork/deployment, you'll need to:
 		* 3.2.1\) Create a GCP project.
-		* 3.2.2\) Enable the Container Registry API for your GCP project: https://console.cloud.google.com/apis/library/containerregistry.googleapis.com
+		* 3.2.2\) Enable the Artifact Registry API for your GCP project: https://console.cloud.google.com/apis/library/artifactregistry.googleapis.com
 		* 3.2.3\) Create a service-account: (it's possible a user account could also be granted access directly, but service-accounts are recommended anyway)
 			* 3.2.3.1\) Go to: https://console.cloud.google.com/iam-admin/serviceaccounts/create
-			* 3.2.3.2\) Choose a service-account name, and add the role "Container Registry Service Agent" and "Storage Admin" (*not* the weaker "Storage Object Admin").
+			* 3.2.3.2\) Choose a service-account name (eg. "service-account-1"), and add the role "Artifact Registry Administrator" and "Storage Admin" (*not* the weaker "Storage Object Admin").
 			* 3.2.3.3\) In the "Service account admins role" box, enter your email.
 			* 3.2.3.4\) In the "Service account users role" box, enter your email, and the email of anyone else you want to have access.
 			* 3.2.3.5\) Create a key for your service account, and download it as a JSON file (using the "Keys" tab): https://console.cloud.google.com/iam-admin/serviceaccounts
 	* 3.3\) Move (or copy) the JSON file to the following path: `Others/Secrets/gcs-key.json` (if there is an empty file here already, it's fine to overwrite it, as this would just be the placeholder you created in the [setup-k8s](#setup-k8s) module)
 	* 3.4\) Add the service-account to your gcloud-cli authentication, by passing it the service-account key-file (obtained from step 3.1 or 3.2.3.5): `gcloud auth activate-service-account FULL_SERVICE_ACCOUNT_NAME_AS_EMAIL --key-file=Others/Secrets/gcs-key.json`
 	* 3.5\) Add the service-account to your Docker authentication, in a similar way:
-		* 3.5.1\) If on Windows, run: `Get-Content Others/Secrets/gcs-key.json | & docker login -u _json_key --password-stdin https://gcr.io` (if you're using a specific subdomain of GCR, eg. us.gcr.io or eu.gcr.io, fix the domain part in this command)
-		* 3.5.2\) If on Linux/Mac, run: `cat Others/Secrets/gcs-key.json | docker login -u _json_key --password-stdin https://gcr.io`
+		* 3.5.1\) If on Windows, run: `Get-Content Others/Secrets/gcs-key.json | & docker login -u _json_key --password-stdin https://GEOGRAPHICAL_LOCATION_IN_GCP-docker.pkg.dev` (if you're using a specific subdomain of GCR, eg. us.gcr.io or eu.gcr.io, fix the domain part in this command)
+		* 3.5.2\) If on Linux/Mac, run: `cat Others/Secrets/gcs-key.json | docker login -u _json_key --password-stdin https://GEOGRAPHICAL_LOCATION_IN_GCP-docker.pkg.dev`
 
 
 </details>