Skip to content

Commit

Permalink
Merge pull request #1 from seyf1elislam/dev
Browse files Browse the repository at this point in the history
v2
  • Loading branch information
seyf1elislam authored Oct 21, 2024
2 parents ee7bae7 + 23c927e commit 14a9d84
Show file tree
Hide file tree
Showing 11 changed files with 281 additions and 89 deletions.
32 changes: 17 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,32 @@ The Local Media Embedder plugin for Obsidian allows you to easily embed local me

## Installation

1. Download the plugin from the [GitHub repository](#).
2. Extract the contents of the zip file to your Obsidian plugins directory: `E:/..../yourVault/.obsidian/plugins/`.
3. Enable the plugin in Obsidian by navigating to `Settings` > `Community plugins` > `Installed plugins` and toggling the Local Media Embedder plugin.
The plugin is not yet available in the Obsidian Community Plugins gallery. You can install the plugin manually by following these steps:
### manual installation

## Usage
1. Download the plugin from github released.
2. Extract the contents of the zip file to your Obsidian plugins directory: `E:/..../yourVault/.obsidian/plugins/`.
3. Enable the plugin in Obsidian by navigating to `Settings` > `Community plugins` > `Installed plugins` and toggling the Local Media Embedder plugin.

1. Open a note in Obsidian.
2. Use the plugin's toolbar button or command palette to embed a local media file.
3. Select the media file from your local filesystem.
4. The media file will be embedded into your note at the cursor position.
### Using BRAT :

## screenshots
> using command palette
Add the current to BRAT Plugin it will automatically download and install the plugin for you

![](image.gif)

> using editor menu
## Usage :

![](image2.gif)
Now you can use code block to embed media files instead of using tags
```markdown
```media
path: F:\Tutorial Videos\AI\deep learning\01.But what is a neural network- - Chapter 1, Deep learning.mp4
type: video
width: 640
height: 360

```
![](v2image.gif)

## Contributing

Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request on the [GitHub repository](#).


## Acknowledgements
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"id": "local-media-embedder",
"name": "Local Media Embedder",
"version": "0.1.0",
"version": "0.1.2",
"minAppVersion": "0.12.0",
"description": "Embed videos and images and audios from your local device in your notes.",
"author": "seyf1elislam",
Expand Down
14 changes: 10 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"name": "obsidian-",
"version": "0.1.0",
"name": "obsidian-localmediaembedder-plugin",
"version": "0.1.2",
"description": "An Obsidian.md plugin to ",
"scripts": {
"dev": "node esbuild.config.mjs",
"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
"version": "node version-bump.mjs && git add manifest.json versions.json"
},
"keywords": [],
"author": "Ryota Ushio",
"author": "seyf1elislam",
"license": "MIT",
"devDependencies": {
"@types/node": "^16.11.6",
Expand All @@ -23,6 +23,8 @@
},
"dependencies": {
"obsidian-": "file:",
"obsidian-localmediaembedder-plugin": "file:",
"obsidian-LocalMediaEmbedder-plugin": "file:",
"path": "^0.12.7"
}
}
84 changes: 84 additions & 0 deletions src/embedMedia_old.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { Editor, Notice } from "obsidian";
import { DEFAULT_SETTINGS } from "settings";
import { MediaType } from "types";
//deprecated function to embed media
export function embedMediOld(
input: Editor | string,
settings: typeof DEFAULT_SETTINGS = DEFAULT_SETTINGS,
embedType: MediaType
): string | void {
try {
let filePath: string;

if (typeof input === "string") {
filePath = input;
} else {
filePath = input.getSelection();
}

const port: number = settings.port || DEFAULT_SETTINGS.port;
const baselink: string = settings.baselink || DEFAULT_SETTINGS.baselink;

if (!filePath) {
new Notice("File path not provided");
return;
}

filePath = decodeURIComponent(filePath);
if (filePath.startsWith("file:///")) {
filePath = filePath.replace("file:///", "");
}
// Check if the file path is a valid file or link (starts with C:\ or / or https:// or http://)
const isWindowsPath = filePath.match(/^[A-Za-z]:(\\|\/)/);
const isUnixPath = filePath.match(/^\//);
const isLink = filePath.match(/^https?:\/\//);

let url: string;

if (isLink) {
// If it's a link, embed it directly without adding anything
url = filePath;
} else if (isWindowsPath || isUnixPath) {
// If it's a file path, prepend the local server address
const encodedPath = encodeURIComponent(filePath);
url = `${baselink}:${port}/?q=${encodedPath}`;
} else {
new Notice("The provided file path or link is not valid.");
return;
}

let embedCode: string;

if (embedType === "auto") {
if (filePath.match(/\.(mp4|webm|ogg)$/)) {
embedType = "video";
} else if (filePath.match(/\.(mp3|wav|ogg)$/)) {
embedType = "audio";
} else {
embedType = "iframe";
}
}

if (embedType === "video") {
embedCode = `<video width="640" height="360" controls>
<source src="${url}" type="video/mp4">
Your browser does not support the video tag.
</video>`;
} else if (embedType === "audio") {
embedCode = `<audio controls>
<source src="${url}" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>`;
} else {
embedCode = `<iframe src="${url}" width="640" height="360" frameborder="0" allowfullscreen></iframe>`;
}

if (typeof input === "string") {
return embedCode;
} else {
input.replaceSelection(embedCode);
}
} catch (error) {
console.log("Error :", error);
}
}
153 changes: 93 additions & 60 deletions src/functions.ts
Original file line number Diff line number Diff line change
@@ -1,97 +1,130 @@
import { Notice, Editor, Menu, MenuItem } from "obsidian";
import { DEFAULT_SETTINGS } from "settings";
import { MediaBlockType, MediaType } from "types";

export type EmbedType = "video" | "iframe" | "audio" | "image" | "auto";
export function embedMediaAsCodeBlock(editor: Editor): void {
try {
let filePath = editor.getSelection();
if (!filePath) {
new Notice("File path not provided");
return;
}

filePath = filePath.replace("file:///", "");

let embedType = determineEmbedType(filePath);

let codeBlock = `\`\`\`media
path: ${filePath}
type: ${embedType}
`;
if (embedType === "video" || embedType === "iframe") {
codeBlock += `width: ${640}
height: ${360}
`;
}

codeBlock += `\`\`\``;

editor.replaceSelection(codeBlock);
} catch (error) {
console.log("Error:", error);
}
}

export function embedMedia(
export function onEditorMenu(
menu: Menu,
editor: Editor,
settings: typeof DEFAULT_SETTINGS = DEFAULT_SETTINGS,
embedType: EmbedType
showInMenuItem: boolean = true
) {
if (!showInMenuItem) return;
try {
const filePath = editor.getSelection();
menu.addItem((item: MenuItem) => {
item.setTitle("Embed selected media path")
.setIcon("link")
.onClick(async () => {
if (!editor) return;
//TODO replace tihs default with the actual settings
// embedMediOld(editor, DEFAULT_SETTINGS, "auto");
embedMediaAsCodeBlock(editor);
});
});
} catch (error) {
console.log("Error :", error);
}
return;
}
export function generateMediaView(
mediainfo: MediaBlockType,
settings: typeof DEFAULT_SETTINGS = DEFAULT_SETTINGS
): string {
try {
let filePath: string = mediainfo.path;

const port: number = settings.port || DEFAULT_SETTINGS.port;
const baselink: string = settings.baselink || DEFAULT_SETTINGS.baselink;

if (!filePath) {
new Notice("File path not provided");
return;
return "";
}

// Check if the file path is a valid file or link (starts with C:\ or / or https://)
const isWindowsPath = filePath.match(/^[A-Za-z]:(\\|\/)/);
const isUnixPath = filePath.match(/^\//);
const isLink = filePath.match(/^https?:\/\//);
if (filePath.startsWith("file:///"))
filePath = filePath.replace("file:///", "");
filePath = decodeURIComponent(filePath);

let url: string;
if (!isValidPath(filePath)) {
new Notice("The provided file path or link is not valid.");
return "";
}

if (isLink) {
// If it's a link, embed it directly without adding anything
let url: string;
if (filePath.match(/^https?:\/\//)) {
url = filePath;
} else if (isWindowsPath || isUnixPath) {
// If it's a file path, prepend the local server address
} else {
const encodedPath = encodeURIComponent(filePath);
url = `${baselink}:${port}/?q=${encodedPath}`;
} else {
new Notice("The provided file path or link is not valid.");
return;
}

let embedCode: string;

if (embedType === "auto") {
if (filePath.match(/\.mp4$/)) {
embedType = "video";
} else if (filePath.match(/\.mp3$/)) {
embedType = "audio";
} else if (filePath.match(/\.png$|\.jpg$|\.jpeg$/)) {
embedType = "image";
} else {
embedType = "iframe";
}
}
let embedType: MediaType =
mediainfo.type || determineEmbedType(filePath);

const width = mediainfo.width ?? 640;
const height = mediainfo.height ?? 360;

if (embedType === "video") {
embedCode = `<video width="640" height="360" controls>
return `<video width="${width}" height="${height}" controls>
<source src="${url}" type="video/mp4">
Your browser does not support the video tag.
</video>`;
} else if (embedType === "audio") {
embedCode = `<audio controls>
<source src="${url}" type="audio/mpeg">
Your browser does not support the audio tag.
return `<audio controls>
<source src="${url}" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>`;
} else if (embedType === "image") {
// embedCode = `<img src="${url}" alt="image" width="640" height="360">`;
embedCode = `![](${url})`;
} else {
embedCode = `<iframe src="${url}" width="640" height="360" frameborder="0" allowfullscreen></iframe>`;
return `<iframe src="${url}" width="${width}" height="${height}" frameborder="0" allowfullscreen></iframe>`;
}

editor.replaceSelection(embedCode);
} catch (error) {
console.log("Error :", error);
console.log("Error:", error);
return "";
}
}

export function onEditorMenu(
menu: Menu,
editor: Editor,
showInMenuItem: boolean = true
) {
if (!showInMenuItem) return;
try {
menu.addItem((item: MenuItem) => {
item.setTitle("Embed selected link [LocalMediaEmbed]")
.setIcon("link")
.onClick(async () => {
if (!editor) return;
embedMedia(editor, DEFAULT_SETTINGS, "auto");
});
});
} catch (error) {
console.log("Error :", error);
function isValidPath(filePath: string): boolean {
const isWindowsPath = filePath.match(/^[A-Za-z]:(\\|\/)/) !== null;
const isUnixPath = filePath.match(/^\//) !== null;
const isLink = filePath.match(/^https?:\/\//) !== null;
return isWindowsPath || isUnixPath || isLink;
}

export function determineEmbedType(filePath: string): MediaType {
filePath = filePath.replace("file:///", "");
if (filePath.match(/\.(mp4|webm|ogg)$/)) {
return "video";
} else if (filePath.match(/\.(mp3|wav|ogg)$/)) {
return "audio";
} else {
return "iframe";
}
return;
}
Loading

0 comments on commit 14a9d84

Please sign in to comment.