Skip to content

Commit

Permalink
RELEASE: v.1.1.4
Browse files Browse the repository at this point in the history 
Feature
- added: shortened YouTube URLs (e.g. youtu.be/<video id>) are now supported (addresses #4)
  • Loading branch information
vyleung committed May 15, 2022
1 parent cd103ab commit 5b172e2
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 114 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

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

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "logseq-helium-plugin",
"version": "1.1.3",
"version": "1.1.4",
"description": "Float videos for an improved note-taking experience",
"main": "dist/index.html",
"targets": {
Expand Down
238 changes: 127 additions & 111 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ logseq.useSettingsSchema(settings);
const block_id_prefix = `div[id^="ls-block"]`;
let float = true;
let block_uuid_start;
let youtube_embed;
let youtube_id;
let video_id;
let youtube_iframe_increase_h;
let youtube_iframe_increase_height;
Expand All @@ -53,124 +55,138 @@ function startFloat(e) {

logseq.Editor.getBlock(block_uuid_start).then(block => {
let block_content = block.content;
let youtube_embed = block_content.match(/({{youtube[\s\S]*?}})/gm);
youtube_embed = block_content.match(/({{youtube[\s\S]*?}})/gm);

// if it's a youtube embed, display the balloon icon + increase/decrease height controls next to the top right corner of the video
// if it's a youtube embed, display the balloon icon + increase/decrease height controls next to the topa right corner of the video
if (youtube_embed) {
let youtube_id = youtube_embed[0].split("watch?v=")[1].split("}}")[0];
// full youtube URL
if (youtube_embed[0].split("watch?v=")[1] != undefined) {
youtube_id = youtube_embed[0].split("watch?v=")[1].split("}}")[0];
helium();
}
else if (youtube_embed[0].split("youtu.be/")[1] != undefined) {
// shortened youtube URL
youtube_id = youtube_embed[0].split("youtu.be/")[1].split("}}")[0];
helium();
}
else {
logseq.UI.showMsg("Invalid YouTube URL format");
}

logseq.provideUI ({
key: "helium",
path: `${block_id_prefix}[id$="${block_uuid_start}"] > .flex.flex-row.pr-2`,
template:
`
<ul style="position:absolute; list-style-type:none; margin-top:${icon_top_position}; margin-left:${icon_left_position};">
<li>
<a class="helium" data-helium-id="${block_uuid_start}" data-on-click="stop_float">
<svg width="4em" height="4em" viewBox="0 0 72 72" id="emoji" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="color">
<polygon fill="#D22F27" points="33.9763,42.6906 34.0061,49.1497 34.0359,55.6089 28.1166,51.8019 22.1972,47.995 28.0868,45.3428"/>
<circle cx="45" cy="27" r="23.0003" fill="#EA5A47"/>
<path fill="#D22F27" d="M60.8265,10.549c-1.3409-1.3409-2.8082-2.477-4.3606-3.4175c5.3598,8.8471,4.2238,20.5254-3.4175,28.1667 s-19.3196,8.7774-28.1667,3.4175c0.9405,1.5525,2.0767,3.0197,3.4175,4.3606c8.9822,8.9822,23.5452,8.9822,32.5273,0 C69.8087,34.0942,69.8087,19.5312,60.8265,10.549z"/>
</g>
<g id="hair"/>
<g id="skin"/>
<g id="skin-shadow"/>
<g id="line">
<polyline fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.1216" points="34,47.2098 34.01,49.1498 34.04,55.6098 28.12,51.7998 22.2,47.9998 28.09,45.3398 30.04,44.4598"/>
<circle cx="45" cy="27" r="23.0003" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M17.7253,65.09c0.5048,0.0395,1.0254-0.0002,1.547-0.1285c2.7035-0.6648,4.41-3.458,3.8116-6.2388"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M23.1406,58.907c-0.1631-0.4794-0.2535-0.9936-0.2582-1.5307c-0.0246-2.7839,2.2596-5.1284,5.102-5.2364"/>
</g>
</svg>
</a>
</li>
<li class="helium-controls" style="margin-left:1.775em;">
<a class="button" data-on-click="toggle_controls">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-dimensions" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M3 5h11" />
<path d="M12 7l2 -2l-2 -2" />
<path d="M5 3l-2 2l2 2" />
<path d="M19 10v11" />
<path d="M17 19l2 2l2 -2" />
<path d="M21 12l-2 -2l-2 2" />
<rect x="3" y="10" width="11" height="11" rx="2" />
</svg>
</a>
</li>
<div id="controls-container" style="display:none; margin-left:0.05em;">
<ul style="display:flex; list-style-type:none; margin: 0 0 0 0.2em;">
<li class="helium-controls icon" title="Decrease video height">
<a class="button" data-helium-decrease-height-id="${youtube_id}" data-on-click="decrease_video_height">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-minus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
<li class="helium-controls letter" style="margin: 0 0.375em;">H</li>
<li class="helium-controls icon" title="Increase video height">
<a class="button" data-helium-increase-height-id="${youtube_id}" data-on-click="increase_video_height">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
</ul>
<ul style="display:flex; list-style-type:none; margin: 0 0 0 0.2em;">
<li class="helium-controls icon" title="Decrease video width">
<a class="button" data-helium-decrease-width-id="${youtube_id}" data-on-click="decrease_video_width">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-minus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
<li class="helium-controls letter" style="margin: 0 0.25em;">W</li>
<li class="helium-controls icon" title="Increase video width">
<a class="button" data-helium-increase-width-id="${youtube_id}" data-on-click="increase_video_width">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
</ul>
<ul style="display:flex; list-style-type:none; margin: 0 0 0 0.2em;">
<li class="helium-controls icon" title="Decrease video height and width">
<a class="button" data-helium-decrease-height-width-id="${youtube_id}" data-on-click="decrease_video_height_width">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-minus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
<li class="helium-controls letter" style="margin: 0.15em;">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-aspect-ratio" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
function helium() {
logseq.provideUI ({
key: "helium",
path: `${block_id_prefix}[id$="${block_uuid_start}"] > .flex.flex-row.pr-2`,
template:
`
<ul style="position:absolute; list-style-type:none; margin-top:${icon_top_position}; margin-left:${icon_left_position};">
<li>
<a class="helium" data-helium-id="${block_uuid_start}" data-on-click="stop_float">
<svg width="4em" height="4em" viewBox="0 0 72 72" id="emoji" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="color">
<polygon fill="#D22F27" points="33.9763,42.6906 34.0061,49.1497 34.0359,55.6089 28.1166,51.8019 22.1972,47.995 28.0868,45.3428"/>
<circle cx="45" cy="27" r="23.0003" fill="#EA5A47"/>
<path fill="#D22F27" d="M60.8265,10.549c-1.3409-1.3409-2.8082-2.477-4.3606-3.4175c5.3598,8.8471,4.2238,20.5254-3.4175,28.1667 s-19.3196,8.7774-28.1667,3.4175c0.9405,1.5525,2.0767,3.0197,3.4175,4.3606c8.9822,8.9822,23.5452,8.9822,32.5273,0 C69.8087,34.0942,69.8087,19.5312,60.8265,10.549z"/>
</g>
<g id="hair"/>
<g id="skin"/>
<g id="skin-shadow"/>
<g id="line">
<polyline fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.1216" points="34,47.2098 34.01,49.1498 34.04,55.6098 28.12,51.7998 22.2,47.9998 28.09,45.3398 30.04,44.4598"/>
<circle cx="45" cy="27" r="23.0003" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M17.7253,65.09c0.5048,0.0395,1.0254-0.0002,1.547-0.1285c2.7035-0.6648,4.41-3.458,3.8116-6.2388"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M23.1406,58.907c-0.1631-0.4794-0.2535-0.9936-0.2582-1.5307c-0.0246-2.7839,2.2596-5.1284,5.102-5.2364"/>
</g>
</svg>
</a>
</li>
<li class="helium-controls" style="margin-left:1.775em;">
<a class="button" data-on-click="toggle_controls">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-dimensions" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<rect x="3" y="5" width="18" height="14" rx="2" />
<path d="M7 12v-3h3" />
<path d="M17 12v3h-3" />
<path d="M3 5h11" />
<path d="M12 7l2 -2l-2 -2" />
<path d="M5 3l-2 2l2 2" />
<path d="M19 10v11" />
<path d="M17 19l2 2l2 -2" />
<path d="M21 12l-2 -2l-2 2" />
<rect x="3" y="10" width="11" height="11" rx="2" />
</svg>
</li>
<li class="helium-controls icon" title="Increase video height and width">
<a class="button" data-helium-increase-height-width-id="${youtube_id}" data-on-click="increase_video_height_width">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
</a>
</li>
<div id="controls-container" style="display:none; margin-left:0.05em;">
<ul style="display:flex; list-style-type:none; margin: 0 0 0 0.2em;">
<li class="helium-controls icon" title="Decrease video height">
<a class="button" data-helium-decrease-height-id="${youtube_id}" data-on-click="decrease_video_height">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-minus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
<li class="helium-controls letter" style="margin: 0 0.375em;">H</li>
<li class="helium-controls icon" title="Increase video height">
<a class="button" data-helium-increase-height-id="${youtube_id}" data-on-click="increase_video_height">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
</ul>
<ul style="display:flex; list-style-type:none; margin: 0 0 0 0.2em;">
<li class="helium-controls icon" title="Decrease video width">
<a class="button" data-helium-decrease-width-id="${youtube_id}" data-on-click="decrease_video_width">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-minus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
<li class="helium-controls letter" style="margin: 0 0.25em;">W</li>
<li class="helium-controls icon" title="Increase video width">
<a class="button" data-helium-increase-width-id="${youtube_id}" data-on-click="increase_video_width">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
</ul>
<ul style="display:flex; list-style-type:none; margin: 0 0 0 0.2em;">
<li class="helium-controls icon" title="Decrease video height and width">
<a class="button" data-helium-decrease-height-width-id="${youtube_id}" data-on-click="decrease_video_height_width">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-minus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
<li class="helium-controls letter" style="margin: 0.15em;">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-aspect-ratio" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
<rect x="3" y="5" width="18" height="14" rx="2" />
<path d="M7 12v-3h3" />
<path d="M17 12v3h-3" />
</svg>
</a>
</li>
</ul>
</div>
</ul>
`
});
</li>
<li class="helium-controls icon" title="Increase video height and width">
<a class="button" data-helium-increase-height-width-id="${youtube_id}" data-on-click="increase_video_height_width">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="18" height="18" viewBox="0 0 24 24" stroke-width="2.5" stroke="var(--ls-primary-text-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</a>
</li>
</ul>
</div>
</ul>
`
});
}
}
// otherwise, only display the balloon icon next to the top right corner of the video
else {
Expand Down

0 comments on commit 5b172e2

Please sign in to comment.