Add Steam embeds

embeds/embedBase.ts

@@ -1,13 +1,14 @@
 import { PluginSettings } from "main";
 
 export abstract class EmbedBase {
+    readonly autoEmbedCssClass: string = "auto-embed";
     readonly name: string;
     // To identify if the anchor link matches the embed type
     readonly regex: RegExp; 
 
     abstract createEmbed(
-      link: string,
-      settings: Readonly<PluginSettings>,
+        link: string,
+        settings: Readonly<PluginSettings>,
     ): HTMLElement;
 
     onload?(): void;
@@ -15,11 +16,11 @@ export abstract class EmbedBase {
     onunload?(): void;
 
     onErrorCreatingEmbed(): HTMLElement {
-      const errorMsg = `Error with ${this.name} url`;
-      const error = createEl("p", {cls: "auto-embed error-embed"});
-      error.setText(errorMsg);
+        const errorMsg = `Error with ${this.name} url`;
+        const error = createEl("p", {cls: `${this.autoEmbedCssClass} error-embed`});
+        error.setText(errorMsg);
 
-      console.log(errorMsg);
-      return error;
+        console.log(errorMsg);
+        return error;
     }
 }

embeds/steam.ts

@@ -0,0 +1,25 @@
+import { PluginSettings } from "main";
+import { EmbedBase } from "./embedBase";
+
+export class SteamEmbed extends EmbedBase {
+    name = "Steam";
+    regex = new RegExp(/https:\/\/store\.steampowered\.com\/app\/(\d+)/);
+
+    createEmbed(url: string, settings: Readonly<PluginSettings>): HTMLElement {
+        const regexMatch = url.match(this.regex);
+        // Shouldn't happen since got test before. But in case
+        if (regexMatch === null)
+            return this.onErrorCreatingEmbed();
+
+        // Creating the iframe
+        const iframe = createEl("iframe");
+
+        iframe.src = `https://store.steampowered.com/widget/${regexMatch[1]}/`;
+
+        console.log("Class: " + this.autoEmbedCssClass);
+        
+        iframe.classList.add(this.autoEmbedCssClass, "steam-embed");
+
+        return iframe;
+    }
+} 

main.ts

@@ -3,6 +3,7 @@ import { TwitterEmbed } from 'embeds/twitter';
 import { EmbedBase } from 'embeds/embedBase';
 import { Plugin } from 'obsidian';
 import { YouTubeEmbed } from 'embeds/youtube';
+import { SteamEmbed } from 'embeds/steam';
 
 // Remember to rename these classes and interfaces!
 
@@ -17,9 +18,10 @@ const DEFAULT_SETTINGS: PluginSettings = {
 export default class MyPlugin extends Plugin {
 	settings: PluginSettings;
 	embedSources: EmbedBase[] = [
-		new CodepenEmbed(),
 		new TwitterEmbed(),
 		new YouTubeEmbed(),
+		new SteamEmbed(),
+		new CodepenEmbed(),
 	]
 
 	async onload() {

styles.css

@@ -35,6 +35,7 @@ iframe.largest.auto-embed {
 }
 
 .auto-embed.youtube-embed {
+    /* Default size of YouTube videos when using Share > Embed option on YoutTube's website */
     /* width: 560px;
     height: 315px; */
 
@@ -44,4 +45,16 @@ iframe.largest.auto-embed {
 
 .auto-embed.error-embed {
     color: var(--text-error);
+}
+
+.auto-embed.steam-embed {
+    /* Default size of Steam previews when using Embed option on Steam's website */
+    /* width: 646px;
+    height: 190px; */
+
+    width: 100%;
+    height: 190px;
+
+    /* Even if height is set to very big and width is small, it doesn't change the height,
+     and height stays at 190px. So set a fixed height.*/
 }