{"id":1654,"date":"2025-04-23T23:35:02","date_gmt":"2025-04-23T18:05:02","guid":{"rendered":"https:\/\/devenv1.golfai.in\/?page_id=1654"},"modified":"2025-04-30T11:17:15","modified_gmt":"2025-04-30T05:47:15","slug":"library","status":"publish","type":"page","link":"https:\/\/devenv1.golfai.in\/hi\/library\/","title":{"rendered":"Library"},"content":{"rendered":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Golf Video Library<\/title>\n    <style>\n        :root {\n            --primary-color: #f7b733;\n            --secondary-color: #3da3e7;\n            --green-color: #4dd17f;\n            --red-color: #ff6b6b;\n            --purple-color: #d17fdd;\n            --gray-color: #f5f5f5;\n            --dark-gray: #5a5a5a;\n            --light-gray: #e0e0e0;\n            --text-color: #333333;\n        }\n        \n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n        \n        body {\n            background-color: #f9f9f9;\n            color: var(--text-color);\n        }\n        \n        .container {\n            max-width: 100%;\n            margin: 0 auto;\n            padding: 0;\n            padding-bottom: 20px; \/* Add padding at the bottom since nav is removed *\/\n        }\n        \n        header {\n            background-color: #f0f0f0;\n            padding: 16px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            position: sticky;\n            top: 0;\n            z-index: 10;\n        }\n        \n        .page-title {\n            font-size: 1.5rem;\n            font-weight: 600;\n        }\n        \n        .upload-btn {\n            background-color: var(--secondary-color);\n            color: white;\n            border: none;\n            border-radius: 50px;\n            padding: 10px 24px;\n            font-size: 1rem;\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }\n        \n        .upload-btn:hover {\n            background-color: #2a8fd5;\n        }\n        \n        .search-container {\n            background-color: var(--gray-color);\n            border-radius: 10px;\n            margin: 16px;\n            display: flex;\n            align-items: center;\n            padding: 12px 16px;\n        }\n        \n        .search-icon {\n            margin-right: 10px;\n            color: #888;\n        }\n        \n        .search-input {\n            border: none;\n            background: transparent;\n            width: 100%;\n            font-size: 1rem;\n            color: var(--text-color);\n            outline: none;\n        }\n        \n        .tag-filters {\n            display: flex;\n            gap: 10px;\n            padding: 10px 16px;\n            overflow-x: auto;\n            -webkit-overflow-scrolling: touch;\n        }\n        \n        .tag-filters::-webkit-scrollbar {\n            display: none;\n        }\n        \n        .tag {\n            padding: 8px 20px;\n            border-radius: 50px;\n            font-size: 0.9rem;\n            white-space: nowrap;\n            cursor: pointer;\n        }\n        \n        .tag.purple {\n            background-color: var(--purple-color);\n            color: white;\n        }\n        \n        .tag.red {\n            background-color: var(--red-color);\n            color: white;\n        }\n        \n        .tag.blue {\n            background-color: var(--secondary-color);\n            color: white;\n        }\n        \n        .tag.green {\n            background-color: var(--green-color);\n            color: white;\n        }\n        \n        .tag.gray {\n            background-color: var(--dark-gray);\n            color: white;\n        }\n        \n        .video-container {\n            margin: 20px 16px;\n        }\n        \n        .video-item {\n            background-color: white;\n            border-radius: 10px;\n            margin-bottom: 16px;\n            padding: 16px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n        }\n        \n        .video-thumbnail {\n            width: 80px;\n            height: 80px;\n            border-radius: 6px;\n            object-fit: cover;\n            margin-right: 16px;\n        }\n        \n        .video-info {\n            flex-grow: 1;\n        }\n        \n        .video-title {\n            font-size: 1.1rem;\n            font-weight: 500;\n            margin-bottom: 5px;\n        }\n        \n        .video-date {\n            font-size: 0.9rem;\n            color: #777;\n            text-align: right;\n        }\n        \n        .arrow-icon {\n            color: #aaa;\n            margin-left: 10px;\n        }\n        \n        .empty-state {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 40px 16px;\n            text-align: center;\n        }\n        \n        .upload-icon {\n            width: 80px;\n            height: 80px;\n            background-color: #e8f4fd;\n            border-radius: 10px;\n            border: 2px dashed var(--secondary-color);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--secondary-color);\n            font-size: 2rem;\n            margin-bottom: 16px;\n            cursor: pointer;\n        }\n        \n        .empty-text {\n            color: #777;\n            margin: 10px 0 20px;\n        }\n        \n        #videoListView {\n            display: none;\n        }\n        \n        #emptyStateView {\n            display: flex;\n        }\n        \n        @media (min-width: 768px) {\n            .container {\n                max-width: 768px;\n                margin: 0 auto;\n            }\n            \n            .video-container {\n                display: grid;\n                grid-template-columns: repeat(2, 1fr);\n                gap: 16px;\n            }\n            \n            .video-item {\n                margin-bottom: 0;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <header>\n            <div class=\"page-title\">Library<\/div>\n            <button class=\"upload-btn\" id=\"uploadBtn\">\u0935\u0940\u0921\u093f\u092f\u094b \u0905\u092a\u0932\u094b\u0921 \u0915\u0930\u0947\u0902<\/button>\n        <\/header>\n        \n        <div class=\"search-container\">\n            <div class=\"search-icon\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n                    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\n                <\/svg>\n            <\/div>\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search library...\">\n        <\/div>\n        \n        <div class=\"tag-filters\">\n            <div class=\"tag purple\">Drills<\/div>\n            <div class=\"tag red\">Driver<\/div>\n            <div class=\"tag blue\">Iron<\/div>\n            <div class=\"tag green\">Pitching<\/div>\n            <div class=\"tag gray\">Chipping<\/div>\n        <\/div>\n        \n        <!-- Empty state view -->\n        <div id=\"emptyStateView\" class=\"empty-state\">\n            <div class=\"upload-icon\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M12 5v14\"><\/path>\n                    <path d=\"M5 12h14\"><\/path>\n                <\/svg>\n            <\/div>\n            <h3>\u0935\u0940\u0921\u093f\u092f\u094b \u0905\u092a\u0932\u094b\u0921 \u0915\u0930\u0947\u0902<\/h3>\n            <p class=\"empty-text\">Upload a video now and tag, analyze or use it in your analyses<\/p>\n        <\/div>\n        \n        <!-- Video list view -->\n        <div id=\"videoListView\" class=\"video-container\">\n            <div class=\"video-item\">\n                <img decoding=\"async\" src=\"\/api\/placeholder\/80\/80\" alt=\"Golf swing video\" class=\"video-thumbnail\">\n                <div class=\"video-info\">\n                    <div class=\"video-title\">Untitled Video<\/div>\n                <\/div>\n                <div class=\"video-date\">4\/10\/2025<\/div>\n                <div class=\"arrow-icon\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n                    <\/svg>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Toggle between empty state and video list\n        const uploadBtn = document.getElementById('uploadBtn');\n        const emptyStateView = document.getElementById('emptyStateView');\n        const videoListView = document.getElementById('videoListView');\n        \n        \/\/ Function to redirect to the upload video page\n        function redirectToUploadPage() {\n            window.location.href = '\/upload-video\/';\n        }\n        \n        \/\/ Sample function to filter videos by tag\n        function filterByTag(tagName) {\n            console.log(`Filtering by ${tagName}`);\n            \/\/ Implementation would depend on your backend\n        }\n        \n        \/\/ Initialize event listeners\n        document.addEventListener('DOMContentLoaded', () => {\n            \/\/ Check if there are videos (this would typically be done server-side)\n            const hasVideos = false; \/\/ Set to true to show videos, false for empty state\n            \n            if (hasVideos) {\n                emptyStateView.style.display = 'none';\n                videoListView.style.display = 'grid';\n            }\n            \n            \/\/ Add click handler for upload button\n            uploadBtn.addEventListener('click', () => {\n                redirectToUploadPage();\n            });\n            \n            \/\/ Add click handlers for the empty state upload button\n            document.querySelector('.upload-icon').addEventListener('click', () => {\n                redirectToUploadPage();\n            });\n            \n            \/\/ Add click handlers for tags\n            const tags = document.querySelectorAll('.tag');\n            tags.forEach(tag => {\n                tag.addEventListener('click', (e) => {\n                    filterByTag(e.target.textContent);\n                });\n            });\n        });\n        \n        \/\/ This function would be called when GCP upload is successful\n        function onVideoUploaded(videoData) {\n            \/\/ Create new video element with thumbnail\n            const videoItem = document.createElement('div');\n            videoItem.className = 'video-item';\n            videoItem.innerHTML = `\n                <img decoding=\"async\" src=\"${videoData.thumbnailUrl || '\/api\/placeholder\/80\/80'}\" alt=\"Golf swing video\" class=\"video-thumbnail\">\n                <div class=\"video-info\">\n                    <div class=\"video-title\">${videoData.title || 'Untitled Video'}<\/div>\n                <\/div>\n                <div class=\"video-date\">${videoData.date || new Date().toLocaleDateString()}<\/div>\n                <div class=\"arrow-icon\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n                    <\/svg>\n                <\/div>\n            `;\n            \n            videoListView.appendChild(videoItem);\n            emptyStateView.style.display = 'none';\n            videoListView.style.display = 'grid';\n        }\n        \n        \/\/ Implementation for GCP integration would go here\n        \/\/ You would need to add functions to:\n        \/\/ 1. Request a presigned URL from your server\n        \/\/ 2. Upload the video to GCP using that URL\n        \/\/ 3. Update the UI once the upload is complete and thumbnail is generated\n    <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Golf Video Library Library Upload Video Drills Driver Iron Pitching Chipping Upload Video Upload a video now and tag, analyze or use it in your analyses Untitled Video 4\/10\/2025<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1654","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages\/1654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/comments?post=1654"}],"version-history":[{"count":2,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages\/1654\/revisions"}],"predecessor-version":[{"id":1664,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages\/1654\/revisions\/1664"}],"wp:attachment":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/media?parent=1654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}