posting to Youtube

HTML/post.html

@@ -24,6 +24,8 @@
 					<option value="Friend">Friends Only Post</option>
 					<option value="Private">Private Post</option>
 				</select>
+				<input type="checkbox" class="PostYoutube" />
+				<label>Post to Youtube</label>
 			</div>
 			<p class="Button">POST!</p>
 		</section>

HTML/setting.html

@@ -32,6 +32,12 @@
 					<p class="Login Bluesky"><em>Login to Bluesky</em></p>
 					<p class="Logout Bluesky Hidden"><em>Logout of Bluesky</em></p>
 				</div>
+				<div>
+					<input type="text" class="WebInput Youtube" placeholder="Youtube API Key"/>
+					<input type="text" class="WebInput Youtube" placeholder="Youtube Channel Handle"/>
+					<p class="Login Youtube"><em>Login to Youtube</em></p>
+					<p class="Logout Youtube Hidden"><em>Logout of Youtube</em></p>
+				</div>
 			</div>
 		</div>
 		<footer>

JS/Variables.js

@@ -19,5 +19,8 @@ export const BlueskyRefreshToken = "bluesky_refresh_token";
 // Tumblr
 export const TumblrWebsiteName = "https://www.tumblr.com";
 
-// WARNING: Research suggests that cookies are very unsecue.
+// Youtube
+export const YoutubeID = "youtube_id";
+
+// WARNING: Research suggests that cookies are very unsecure.
 // Every Fetch request (http or https) sends these cookies. That's bad!

JS/YoutubeAPI.js

@@ -0,0 +1,20 @@
+import * as Variables from "./Variables.js";
+
+// Uses the API to get the channel ID.
+// Interesting problem: You have to use either an API key or a Auth2.0.
+// I think only developer asses will be using this, so we'll use API keys.
+export async function GetChannelID(APIKey, Channel) {
+	if (Channel == "" || APIKey == "") {
+		console.error("Forgot a variable.");
+		return;
+	}
+	if (Channel.slice(0, 1) != "@") {
+		// Apply the correct Handle
+		Channel = "@" + Channel;
+	}
+	// Get the channel ID
+	var webbiesite = "https://www.googleapis.com/youtube/v3/channels";
+	var response = await fetch(webbiesite + "?part=id&forHandle=" + Channel + "&key=" + APIKey, {method: "GET"})
+		.then((response) => response.json());
+	localStorage.setItem(Variables.YoutubeID, response.items[0].id);
+}

JS/post.js

@@ -7,6 +7,7 @@ import * as Variables from "./Variables.js";
 let PostButton = document.getElementsByClassName("Button")[0];
 let VisibilityDropdown = document.getElementsByClassName("PostVisibility")[0];
 let InputArea = document.getElementsByClassName("Text")[0];
+let YoutubePoser = document.getElementsByClassName("PostYoutube")[0];
 
 // Clicking the beeg POST button.
 PostButton.onclick = (event) => {
@@ -27,7 +28,6 @@ async function Post() {
 	if (Text == "") {
 		return;
 	}
-	InputArea.value = "";
 	// Mastodon posting.
 	if (localStorage.getItem(Variables.MastodonAccessToken) != null) {
 		let TempVisible;
@@ -84,9 +84,20 @@ async function Post() {
 			await BlueskyAPI.SetThreadGate(localStorage.getItem(Variables.BlueskyDID), Post.uri, TempVisible);
 		}
 	}
+	// Youtube posting.
+	if (YoutubePoser.checked == true) {
+		navigator.clipboard.writeText(Text);
+		window.open("https://www.youtube.com/channel/" + localStorage.getItem(Variables.YoutubeID) + "/posts");
+	}
+	// The input being cleared means that the posting happened.
+	InputArea.value = "";
 }
 
 // Check if you can interact with the textbox
-if (localStorage.getItem(Variables.MastodonAccessToken) == null && localStorage.getItem(Variables.BlueskyAccessToken) == null) {
+if (localStorage.getItem(Variables.MastodonAccessToken) == null && localStorage.getItem(Variables.BlueskyAccessToken) == null && localStorage.getItem(Variables.YoutubeID) == null) {
 	InputArea.disabled = true;
 }
+// Check if you can post on Youtube
+if (localStorage.getItem(Variables.YoutubeID) == null) {
+	YoutubePoser.disabled = true;
+}

JS/setting.js

@@ -1,19 +1,27 @@
 import * as MastodonAPI from "./MastodonAPI.js";
 import * as BlueskyAPI from "./BlueskyAPI.js";
 import * as TumblrAPI from "./TumblrAPI.js";
+import * as YoutubeAPI from "./YoutubeAPI.js";
 import * as Variables from "./Variables.js";
 
 // Settings buttons
 let LocalButton = document.getElementsByClassName("Local")[0];
 let RemoteButton = document.getElementsByClassName("Remote")[0];
 
+// Website Stuff
 let MastodonLoginButton = document.getElementsByClassName("Login Mastodon")[0];
 let MastodonWebInput = document.getElementsByClassName("WebInput Mastodon")[0];
 let MastodonLogoutButton = document.getElementsByClassName("Logout Mastodon")[0];
+
 let BlueskyLoginButton = document.getElementsByClassName("Login Bluesky")[0];
 let BlueskyWebInput = document.getElementsByClassName("WebInput Bluesky")[0];
 let BlueskyLogoutButton = document.getElementsByClassName("Logout Bluesky")[0];
 
+let YoutubeLoginButton = document.getElementsByClassName("Login Youtube")[0];
+let YoutubeAPIInput = document.getElementsByClassName("WebInput Youtube")[0];
+let YoutubeHandleInput = document.getElementsByClassName("WebInput Youtube")[1];
+let YoutubeLogoutButton = document.getElementsByClassName("Logout Youtube")[0];
+
 // original link
 let Origin = location.origin + "/HTML/setting.html"
 
@@ -59,7 +67,7 @@ MastodonLogoutButton.onclick = (event) => {
 // Login
 BlueskyLoginButton.onclick = (event) => {
 	if (BlueskyWebInput.value != "") {
-		let text = BlueskyWebInput.value
+		let text = BlueskyWebInput.value;
 		BlueskyAPI.HandleAuthorization(text);
 	}
 }
@@ -78,6 +86,23 @@ BlueskyLogoutButton.onclick = (event) => {
 	document.location.href = Origin;
 }
 
+// Youtube Buttons
+// Login
+YoutubeLoginButton.onclick = (event) => {
+	if (YoutubeHandleInput.value != "" && YoutubeAPIInput.value != "") {
+		YoutubeAPI.GetChannelID(YoutubeAPIInput.value, YoutubeHandleInput.value);
+		// Clear the stuff
+		YoutubeHandleInput.value = "";
+		YoutubeAPIInput.value = "";
+	}
+}
+
+// Logout
+YoutubeLogoutButton.onclick = (event) => {
+	localStorage.removeItem(Variables.YoutubeID);
+	document.location.href = Origin;
+}
+
 // if an access token is found, login.
 async function CheckLogin() {
 	// Check for a mastodon token.
@@ -100,6 +125,13 @@ async function CheckLogin() {
 		// Auto log in
 		await BlueskyAPI.GainTokens();
 	}
+	// Check for a Youtube ID.
+	if (localStorage.getItem(Variables.YoutubeID) != null) {
+		YoutubeLoginButton.remove();
+		YoutubeAPIInput.remove();
+		YoutubeHandleInput.remove();
+		YoutubeLogoutButton.classList.remove("Hidden");
+	}
 }
 
 // Runs on website start.

README.md

@@ -15,3 +15,4 @@ Quick launch server without docker: `npx http-server /home/<HomeDirectory>/Docum
 |Question|Answer|
 |--------|-------|
 |Where can I find my PDS?|Create an access token and then examine the payload's `aud`|
+|Where can I get a Youtube Key?|console.cloud.google.com/apis|