move to react
This commit is contained in:
matan
@@ -0,0 +1,27 @@
|
||||
import { app } from "../../scripts/app.js";
|
||||
import * as data from './data.js';
|
||||
window.data = data;
|
||||
const ext = {
|
||||
// Unique name for the extension
|
||||
name: "ComfyUI-Assistant",
|
||||
async setup(app) {
|
||||
const menuLoadDefault = document.querySelector("#comfy-load-default-button");
|
||||
const learnBtn = document.createElement("button");
|
||||
learnBtn.textContent = "Learn";
|
||||
|
||||
if(!localStorage.getItem("CLICKED_LEARN")) {
|
||||
learnBtn.classList.toggle("animate-background")
|
||||
learnBtn.addEventListener("click", ()=>{
|
||||
localStorage.setItem("CLICKED_LEARN","true")
|
||||
learnBtn.classList.remove("animate-background")
|
||||
})
|
||||
}
|
||||
learnBtn.addEventListener("click", ()=>{
|
||||
window.onLearnClick()
|
||||
})
|
||||
menuLoadDefault.after(learnBtn);
|
||||
},
|
||||
};
|
||||
|
||||
app.registerExtension(ext);
|
||||
|
||||
@@ -0,0 +1,309 @@
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia:
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia:
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.inset-0 {
|
||||
inset: 0px
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px
|
||||
}
|
||||
|
||||
.z-50 {
|
||||
z-index: 50
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem
|
||||
}
|
||||
|
||||
.max-h-96 {
|
||||
max-height: 24rem
|
||||
}
|
||||
|
||||
.w-14 {
|
||||
width: 3.5rem
|
||||
}
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 56rem
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
justify-content: space-around
|
||||
}
|
||||
|
||||
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
|
||||
}
|
||||
|
||||
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem
|
||||
}
|
||||
|
||||
.rounded-t-xl {
|
||||
border-top-left-radius: 0.75rem;
|
||||
border-top-right-radius: 0.75rem
|
||||
}
|
||||
|
||||
.bg-comfy-light {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(53 53 53 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-gray-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.text-gray-300 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity))
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline
|
||||
}
|
||||
|
||||
.filter {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
|
||||
}
|
||||
|
||||
@keyframes Gradient {
|
||||
0%{
|
||||
background-position: 0% 50%
|
||||
}
|
||||
|
||||
50%{
|
||||
background-position: 100% 50%
|
||||
}
|
||||
|
||||
100%{
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
|
||||
.animated-background{
|
||||
background: linear-gradient(270deg, #d53369, #daae51);
|
||||
background-size: 200% 200%;
|
||||
animation: Gradient 2s ease infinite;
|
||||
}
|
||||
|
||||
.hover\:bg-gray-500:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity))
|
||||
}
|
||||
@@ -0,0 +1,314 @@
|
||||
|
||||
var docStyle = document.createElement('style');
|
||||
docStyle.innerHTML = `*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia:
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia:
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.inset-0 {
|
||||
inset: 0px
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px
|
||||
}
|
||||
|
||||
.z-50 {
|
||||
z-index: 50
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem
|
||||
}
|
||||
|
||||
.max-h-96 {
|
||||
max-height: 24rem
|
||||
}
|
||||
|
||||
.w-14 {
|
||||
width: 3.5rem
|
||||
}
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 56rem
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
justify-content: space-around
|
||||
}
|
||||
|
||||
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
|
||||
}
|
||||
|
||||
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem
|
||||
}
|
||||
|
||||
.rounded-t-xl {
|
||||
border-top-left-radius: 0.75rem;
|
||||
border-top-right-radius: 0.75rem
|
||||
}
|
||||
|
||||
.bg-comfy-light {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(53 53 53 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-gray-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.text-gray-300 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity))
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline
|
||||
}
|
||||
|
||||
.filter {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
|
||||
}
|
||||
|
||||
@keyframes Gradient {
|
||||
0%{
|
||||
background-position: 0% 50%
|
||||
}
|
||||
|
||||
50%{
|
||||
background-position: 100% 50%
|
||||
}
|
||||
|
||||
100%{
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
|
||||
.animated-background{
|
||||
background: linear-gradient(270deg, #d53369, #daae51);
|
||||
background-size: 200% 200%;
|
||||
animation: Gradient 2s ease infinite;
|
||||
}
|
||||
|
||||
.hover\\:bg-gray-500:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity))
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(docStyle);
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,52 +0,0 @@
|
||||
import { app } from "../../scripts/app.js";
|
||||
import {LearnModal} from './learn-menu.js'
|
||||
import {latestVersion} from "./data.js";
|
||||
|
||||
|
||||
const localVersion = 1;
|
||||
|
||||
|
||||
var docStyle = document.createElement('style');
|
||||
docStyle.innerHTML = `
|
||||
@keyframes Gradient {
|
||||
0%{background-position: 0% 50%}
|
||||
50%{background-position: 100% 50%}
|
||||
100%{background-position: 0% 50%}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(docStyle);
|
||||
|
||||
let learnModalInstance = null;
|
||||
|
||||
|
||||
|
||||
const ext = {
|
||||
// Unique name for the extension
|
||||
name: "ComfyUI-Assistant",
|
||||
async setup(app) {
|
||||
const menuLoadDefault = document.querySelector("#comfy-load-default-button");
|
||||
const learnBtn = document.createElement("button");
|
||||
learnBtn.textContent = "Learn";
|
||||
|
||||
if(!localStorage.getItem("clickedLearn")) {
|
||||
learnBtn.style.background = "linear-gradient(270deg, #d53369, #daae51)";
|
||||
learnBtn.style.backgroundSize = "200% 200%";
|
||||
learnBtn.style.animation = "Gradient 2s ease infinite";
|
||||
learnBtn.addEventListener("click", ()=>{
|
||||
localStorage.setItem("clickedLearn","true")
|
||||
learnBtn.style=null;
|
||||
})
|
||||
}
|
||||
learnBtn.addEventListener("click", ()=>{
|
||||
if(latestVersion>localVersion){
|
||||
alert("You are using an old version of the plugin, update it to get the latest features")
|
||||
}
|
||||
LearnModal.get().show();
|
||||
})
|
||||
menuLoadDefault.after(learnBtn);
|
||||
},
|
||||
};
|
||||
|
||||
app.registerExtension(ext);
|
||||
|
||||
+27967
File diff suppressed because one or more lines are too long
@@ -1,115 +0,0 @@
|
||||
|
||||
|
||||
const tag = document.createElement('script');
|
||||
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
const firstScriptTag = document.getElementsByTagName('script')[0];
|
||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
|
||||
let player;
|
||||
const setVideo = (videoId)=> {
|
||||
console.log(videoId)
|
||||
player = new YT.Player('player',{
|
||||
videoId: videoId,
|
||||
events: {
|
||||
'onStateChange': onPlayerStateChange
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
var done = false;
|
||||
var lastInterval = null;
|
||||
let keyframesFunctions= {}
|
||||
function onPlayerStateChange(event) {
|
||||
if (event.data == YT.PlayerState.PLAYING) {
|
||||
lastInterval = setInterval(function () {
|
||||
// keyframesFunctions contains seconds and functions like {5:()=>console.log("five seconds!")} I want that this will always call the appropriate function based on the time but still taking to considerations interval hiccups
|
||||
const currentTime = player.getCurrentTime();
|
||||
const timeInSeconds = Math.floor(currentTime);
|
||||
if (keyframesFunctions[timeInSeconds]) {
|
||||
keyframesFunctions[timeInSeconds]();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function startVideo(title,videoId, _keyframesFunctions){
|
||||
keyframesFunctions = _keyframesFunctions
|
||||
const lastContainer = document.getElementById("youtube-container")
|
||||
if(lastContainer){
|
||||
lastContainer.remove()
|
||||
clearInterval(lastInterval)
|
||||
}
|
||||
const ytContainer = document.createElement('div');
|
||||
ytContainer.style.position="absolute"
|
||||
ytContainer.style.top="50px"
|
||||
ytContainer.style.left="50px"
|
||||
ytContainer.style.zIndex="101"
|
||||
ytContainer.setAttribute("id","youtube-container")
|
||||
|
||||
|
||||
const videoContainerWindow = document.createElement('div');
|
||||
videoContainerWindow.style.width="100%"
|
||||
videoContainerWindow.style.height="30px"
|
||||
videoContainerWindow.style.background="#5e5e5e"
|
||||
videoContainerWindow.style.cursor="move";
|
||||
videoContainerWindow.style.display= "flex";
|
||||
videoContainerWindow.style.alignItems= "center";
|
||||
const titleEl = document.createElement('span')
|
||||
titleEl.style.flexGrow= "1";
|
||||
titleEl.style.padding= "4px";
|
||||
titleEl.appendChild(document.createTextNode(title))
|
||||
|
||||
videoContainerWindow.appendChild(titleEl);
|
||||
//Add minimize and exit:
|
||||
const minimizeButton = document.createElement('button');
|
||||
minimizeButton.style.marginRight = "5px";
|
||||
minimizeButton.innerHTML = "-";
|
||||
|
||||
minimizeButton.onclick = () => {
|
||||
document.getElementById("player").hidden=!document.getElementById("player").hidden
|
||||
}
|
||||
|
||||
const exitButton = document.createElement('button');
|
||||
exitButton.innerHTML = "X";
|
||||
exitButton.style.marginRight="5px";
|
||||
|
||||
exitButton.onclick = () => {
|
||||
ytContainer.remove();
|
||||
}
|
||||
|
||||
videoContainerWindow.appendChild(minimizeButton);
|
||||
videoContainerWindow.appendChild(exitButton);
|
||||
|
||||
|
||||
|
||||
let drag = {x: 0, y: 0};
|
||||
let dragging = false;
|
||||
videoContainerWindow.onmousedown = (e) => {
|
||||
drag.x = e.clientX - ytContainer.offsetLeft;
|
||||
drag.y = e.clientY - ytContainer.offsetTop;
|
||||
dragging=true
|
||||
}
|
||||
|
||||
document.onmousemove = (e) => {
|
||||
if (e.buttons === 1 && dragging) {
|
||||
ytContainer.style.left = `${e.clientX - drag.x}px`;
|
||||
ytContainer.style.top = `${e.clientY - drag.y}px`;
|
||||
}
|
||||
}
|
||||
|
||||
document.onmouseup = (e) => {
|
||||
drag = {x: 0, y: 0};
|
||||
dragging=false;
|
||||
}
|
||||
|
||||
|
||||
ytContainer.appendChild(videoContainerWindow)
|
||||
const ytPlayer = document.createElement('div');
|
||||
ytPlayer.setAttribute("id","player")
|
||||
ytContainer.appendChild(ytPlayer)
|
||||
document.body.appendChild(ytContainer);
|
||||
setVideo(videoId)
|
||||
}
|
||||
Reference in New Issue
Block a user