working on custom tk

2024-09-30 15:54:09 +05:30
parent b8bd0c74a6
commit b2b6eb0b75
46 changed files with 3146 additions and 10 deletions
--- a/src/frameworks/customtk/plugins/videoPlayer.js
+++ b/src/frameworks/customtk/plugins/videoPlayer.js
@@ -0,0 +1,126 @@
+import React from "react"
+
+import Tools from "../../../canvas/constants/tools"
+import { removeKeyFromObject } from "../../../utils/common"
+
+import VideoImage from "./assets/video.jpg"
+import { PlayCircleFilled } from "@ant-design/icons"
+import { TkinterBase } from "../widgets/base"
+import { getPythonAssetPath } from "../../utils/pythonFilePath"
+
+
+class VideoPlayer extends TkinterBase{
+
+    static widgetType = "video_player"
+
+    static requiredImports = [
+        ...TkinterBase.requiredImports, 
+        "import os",
+        "from tkVideoPlayer import TkinterVideo"
+    ]
+
+    static requirements = ["tkvideoplayer"]
+
+
+    constructor(props) {
+        super(props)
+
+        this.droppableTags = null
+        
+        const newAttrs = removeKeyFromObject("layout", this.state.attrs)
+
+        this.state = {
+            ...this.state,
+            size: { width: 350, height: 200 },
+            widgetName: "Video player",
+            attrs: {
+                ...newAttrs,
+                play: {
+                    label: "Start playing",
+                    tool: Tools.CHECK_BUTTON,
+                    value: false,
+                    onChange: (value) => {
+                        this.setAttrValue("play", value)
+                    }
+                        
+                },
+                defaultVideo: {
+                    label: "Video",
+                    tool: Tools.UPLOADED_LIST, 
+                    toolProps: {filterOptions: ["video/mp4", "video/webm", "video/m4v"]}, 
+                    value: "",
+                    onChange: (value) => this.setAttrValue("defaultVideo", value)
+                },
+            }
+        }
+    }
+
+    componentDidMount(){
+        super.componentDidMount()
+        // this.setAttrValue("styling.backgroundColor", "#E4E2E2")
+    }
+
+    generateCode(variableName, parent){
+
+
+        const defaultVideo = this.getAttrValue("defaultVideo")
+        const play = this.getAttrValue("play")
+
+        const code = [
+            `${variableName} = TkinterVideo(master=${parent}, scaled=True)`,
+        ]
+
+        if (defaultVideo){
+            code.push(`${variableName}.load(${getPythonAssetPath(defaultVideo.name, "video")})`)
+        }
+
+        if (play){
+            code.push(`${variableName}.play()`)
+        }
+
+        return [
+                ...code,
+                `${variableName}.${this.getLayoutCode()}`
+            ]
+    }
+
+    getToolbarAttrs(){
+
+        const toolBarAttrs = super.getToolbarAttrs()
+
+
+        return ({
+            id: this.__id,
+            widgetName: toolBarAttrs.widgetName,
+            size: toolBarAttrs.size,
+
+            ...this.state.attrs,
+
+        })
+    }
+
+    renderContent(){
+
+        // const defaultVideo = this.getAttrValue("defaultVideo")
+
+        return (
+            <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md 
+                            tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
+                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none" 
+                        style={this.state.widgetInnerStyling}>
+                    <div className="tw-relative tw-w-full tw-h-full">
+                        <div className="tw-absolute tw-text-white tw-left-1/2 tw-top-1/2 
+                                        tw--translate-x-1/2 tw--translate-y-1/2">
+                            <PlayCircleFilled className="tw-text-4xl"/>
+                        </div>
+                        <img src={VideoImage} className="tw-w-full tw-h-full" />
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+}
+
+
+export default VideoPlayer