Create google-drive-save.css

src/components/menu-bar/google-drive-save.css

@@ -0,0 +1,502 @@
+// google-drive-save.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
+import Button from '../button/button.jsx';
+import styles from './google-drive-save.css';
+
+class GoogleDriveSave extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            accessToken: localStorage.getItem('googleDriveAccessToken') || null,
+            currentAccountEmail: localStorage.getItem('googleDriveAccountEmail') || null,
+            currentAccountName: localStorage.getItem('googleDriveAccountName') || null,
+            files: [],
+            isModalOpen: false,
+            isLoading: false
+        };
+    }
+
+    componentDidMount() {
+        // 初期化処理
+    }
+
+    handleClick = () => {
+        this.setState({isModalOpen: true});
+    };
+
+    handleCloseModal = () => {
+        this.setState({isModalOpen: false});
+    };
+
+    startGoogleLogin = () => {
+        const CLIENT_ID = "1033286471224-n9mv8l869fqikubj2e8q92n8ige3qr6r.apps.googleusercontent.com";
+        const REDIRECT_URI = "https://soiz1-s4s-upload.hf.space/close2";
+        const SCOPES = "https://www.googleapis.com/auth/drive.file";
+        
+        const messageListener = (event) => {
+            if (event.origin === "https://soiz1-penguin-upload.hf.space" && event.data.token) {
+                window.removeEventListener("message", messageListener);
+                this.setState({
+                    accessToken: event.data.token,
+                    currentAccountEmail: event.data.email || null,
+                    currentAccountName: event.data.name || null,
+                    isModalOpen: true
+                });
+                
+                localStorage.setItem('googleDriveAccessToken', event.data.token);
+                if (event.data.email) {
+                    localStorage.setItem('googleDriveAccountEmail', event.data.email);
+                }
+                if (event.data.name) {
+                    localStorage.setItem('googleDriveAccountName', event.data.name);
+                }
+                
+                this.fetchDriveFiles(event.data.token);
+            }
+        };
+        window.addEventListener("message", messageListener);
+
+        const authUrl = `https://accounts.google.com/o/oauth2/auth?` +
+            `client_id=${CLIENT_ID}` +
+            `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
+            `&response_type=token` +
+            `&scope=${encodeURIComponent(SCOPES)}`;
+        
+        window.open(authUrl, "_blank", "width=500,height=600");
+    };
+
+    fetchDriveFiles = async (accessToken) => {
+        this.setState({isLoading: true});
+        try {
+            const response = await fetch("https://www.googleapis.com/drive/v3/files?q=(mimeType='application/x-scratch' or mimeType='image/png')", {
+                headers: {
+                    Authorization: `Bearer ${accessToken}`,
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(await response.text());
+            }
+
+            const data = await response.json();
+            this.setState({files: data.files || [], isLoading: false});
+        } catch (error) {
+            console.error("ファイル一覧取得エラー:", error);
+            this.props.showAlert("error", "ファイル一覧の取得に失敗しました");
+            this.setState({isLoading: false});
+        }
+    };
+
+    renderModal() {
+        if (!this.state.isModalOpen) return null;
+
+        return (
+            <div className={styles.modalOverlay}>
+                <div className={styles.modalContent}>
+                    <div className={styles.modalHeader}>
+                        <h2>Googleドライブに保存</h2>
+                        <button onClick={this.handleCloseModal} className={styles.closeButton}>×</button>
+                    </div>
+                    
+                    <div className={styles.modalBody}>
+                        {this.renderAuthSection()}
+                        {this.state.accessToken && this.renderFileList()}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    renderAuthSection() {
+        if (this.state.accessToken) {
+            return (
+                <div className={styles.authSection}>
+                    <div className={styles.accountInfo}>
+                        ログイン中: {this.state.currentAccountName || this.state.currentAccountEmail || 'Googleアカウント'}
+                    </div>
+                    <button 
+                        onClick={this.handleChangeAccount}
+                        className={styles.changeAccountButton}
+                    >
+                        アカウントを変更
+                    </button>
+                </div>
+            );
+        }
+        
+        return (
+            <div className={styles.authSection}>
+                <p>Google��ログインして、プロジェクトを保存または更新します。</p>
+                <button 
+                    onClick={this.startGoogleLogin}
+                    className={styles.loginButton}
+                >
+                    Googleでログイン
+                </button>
+            </div>
+        );
+    }
+
+    renderFileList() {
+        if (this.state.isLoading) {
+            return <div className={styles.loading}>読み込み中...</div>;
+        }
+
+        // プロジェクトファイルとサムネイルを関連付ける
+        const projectFiles = this.state.files.filter(file => file.mimeType === 'application/x-scratch');
+        const thumbnailFiles = this.state.files.filter(file => file.mimeType === 'image/png');
+
+        if (projectFiles.length === 0) {
+            return <div className={styles.noFiles}>保存されたファイルが見つかりません</div>;
+        }
+
+        return (
+            <div className={styles.fileListContainer}>
+                <div className={styles.fileListHeader}>
+                    <h3>プロジェクト: {this.renderProjectTitle()}</h3>
+                    <button 
+                        onClick={this.handleNewFile}
+                        className={styles.newFileButton}
+                    >
+                        新規保存
+                    </button>
+                </div>
+                
+                <div className={styles.fileList}>
+                    {projectFiles.map(project => this.renderFileItem(project, thumbnailFiles))}
+                </div>
+            </div>
+        );
+    }
+
+    renderProjectTitle() {
+        const projectName = window.vm.runtime.projectName || "無題";
+        
+        return (
+            <span 
+                className={styles.projectTitle}
+                onDoubleClick={this.handleEditProjectTitle}
+            >
+                {projectName}
+            </span>
+        );
+    }
+
+    renderFileItem(project, thumbnailFiles) {
+        const thumbnail = thumbnailFiles.find(
+            thumb => thumb.name === `Penguin-Thumbnail-${project.id}.png`
+        );
+
+        return (
+            <div key={project.id} className={styles.fileItem}>
+                <div className={styles.thumbnailContainer}>
+                    {thumbnail ? (
+                        <img 
+                            src={`https://drive.google.com/thumbnail?id=${thumbnail.id}&sz=w300`}
+                            alt="プロジェクトサムネイル"
+                            className={styles.thumbnail}
+                        />
+                    ) : (
+                        <div className={styles.thumbnailPlaceholder}>
+                            サムネイルなし
+                        </div>
+                    )}
+                </div>
+                
+                <h3 className={styles.fileName}>
+                    {project.name.replace('.s4s.txt', '')}
+                </h3>
+                
+                {this.renderShareLink(project.id)}
+                
+                <div className={styles.buttonGroup}>
+                    <button 
+                        onClick={() => this.handleLoadFile(project)}
+                        className={styles.actionButton}
+                    >
+                        読み込む
+                    </button>
+                    <button 
+                        onClick={() => this.handleReplaceFile(project)}
+                        className={styles.actionButton}
+                    >
+                        上書き
+                    </button>
+                    <button 
+                        onClick={() => this.handleShareFile(project.id)}
+                        className={classNames(styles.actionButton, styles.shareButton)}
+                    >
+                        共有
+                    </button>
+                    <button 
+                        onClick={() => this.handleDeleteFile(project, thumbnailFiles)}
+                        className={classNames(styles.actionButton, styles.deleteButton)}
+                    >
+                        削除
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    renderShareLink(fileId) {
+        const SHORT_URL = "https://s4.rf.gd/";
+        
+        return (
+            <div className={styles.linkContainer}>
+                <div className={styles.linkHeader}>
+                    <span>共有リンク:</span>
+                    <button 
+                        onClick={() => this.copyToClipboard(`${SHORT_URL}${fileId}`)}
+                        className={styles.copyButton}
+                    >
+                        コピー
+                    </button>
+                </div>
+                <a 
+                    href={`${SHORT_URL}${fileId}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={styles.linkUrl}
+                >
+                    {`${SHORT_URL}${fileId}`}
+                </a>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div>
+                <Button
+                    className={classNames(
+                        this.props.className,
+                        styles.saveButton
+                    )}
+                    onClick={this.handleClick}
+                >
+                    <FormattedMessage
+                        defaultMessage="Googleドライブに保存"
+                        description="Label for Google Drive save button"
+                        id="google.drive.saveButton"
+                    />
+                </Button>
+                
+                {this.renderModal()}
+            </div>
+        );
+    }
+
+    // イベントハンドラメソッド
+    handleChangeAccount = () => {
+        this.setState({
+            accessToken: null,
+            currentAccountEmail: null,
+            currentAccountName: null
+        });
+        localStorage.removeItem('googleDriveAccessToken');
+        localStorage.removeItem('googleDriveAccountEmail');
+        localStorage.removeItem('googleDriveAccountName');
+    };
+
+    handleEditProjectTitle = () => {
+        const currentName = window.vm.runtime.projectName || "無題";
+        const newName = prompt("プロジェクト名を入力してください", currentName);
+        
+        if (newName !== null) {
+            window.vm.runtime.projectName = newName.trim() || "無題";
+            this.forceUpdate();
+        }
+    };
+
+    handleNewFile = async () => {
+        try {
+            await this.saveToGoogleDrive(null, null);
+            this.props.showAlert("success", "新規保存しました");
+        } catch (error) {
+            console.error("新規保存エラー:", error);
+            this.props.showAlert("error", "新規保存に失敗しました");
+        }
+    };
+
+    handleLoadFile = (project) => {
+        const PROXY_URL = "https://soiz1-drive-proxy.hf.space/?file_id=";
+        
+        if (confirm(`"${project.name}"を読み込みますか？現在のプロジェクトは失われます。`)) {
+            const url = `${PROXY_URL}${project.id}`;
+            window.location.href = `?project_url=${encodeURIComponent(url)}`;
+        }
+    };
+
+    handleReplaceFile = async (project) => {
+        if (confirm(`"${project.name}"を現在のプロジェクトで上書きしますか？`)) {
+            try {
+                await this.saveToGoogleDrive(project.id, project.name);
+                this.props.showAlert("success", "上書き保存しました");
+                this.fetchDriveFiles(this.state.accessToken);
+            } catch (error) {
+                console.error("ファイル上書きエラー:", error);
+                this.props.showAlert("error", "ファイルの上書きに失敗しました");
+            }
+        }
+    };
+
+    handleShareFile = (fileId) => {
+        const SHARE_URL = "https://scratch-school.ct.ws/upload?id=";
+        window.open(`${SHARE_URL}${fileId}`, "_blank");
+    };
+
+    handleDeleteFile = async (project, thumbnailFiles) => {
+        if (confirm(`"${project.name}"とそのサムネイルを完全に削除しますか？この操作は元に戻せません。`)) {
+            try {
+                // プロジェクトファイルを削除
+                await this.deleteFile(project.id);
+                
+                // 対応するサムネイルを探して削除
+                const thumbnailToDelete = thumbnailFiles.find(
+                    thumb => thumb.name === `Penguin-Thumbnail-${project.id}.png`
+                );
+                
+                if (thumbnailToDelete) {
+                    await this.deleteFile(thumbnailToDelete.id);
+                }
+                
+                this.props.showAlert("success", "ファイルを削除しました");
+                this.fetchDriveFiles(this.state.accessToken);
+            } catch (error) {
+                console.error("削除エラー:", error);
+                this.props.showAlert("error", "ファイルの削除に失敗しました");
+            }
+        }
+    };
+
+    copyToClipboard = (text) => {
+        navigator.clipboard.writeText(text)
+            .then(() => this.props.showAlert("success", "リンクをクリップボードにコピーしました"))
+            .catch(() => this.props.showAlert("error", "リンクのコピーに失敗しました"));
+    };
+
+    // API操作メソッド
+    async deleteFile(fileId) {
+        const response = await fetch(`https://www.googleapis.com/drive/v3/files/${fileId}`, {
+            method: "DELETE",
+            headers: {
+                Authorization: `Bearer ${this.state.accessToken}`,
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error(await response.text());
+        }
+    }
+
+    async saveToGoogleDrive(fileId, fileName) {
+        // プロジェクトを保存
+        const blob = await window.vm.saveProjectSb3();
+        const projectName = window.vm.runtime.projectName || "無題";
+        const nameToUse = fileName || `${projectName}.s4s.txt`;
+        
+        const metadata = {
+            name: nameToUse,
+            mimeType: "application/x-scratch",
+        };
+
+        const url = fileId 
+            ? `https://www.googleapis.com/upload/drive/v3/files/${fileId}?uploadType=multipart`
+            : "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart";
+
+        const form = new FormData();
+        form.append("metadata", new Blob([JSON.stringify(metadata)], { type: "application/json" }));
+        form.append("file", blob);
+
+        const method = fileId ? "PATCH" : "POST";
+
+        const uploadResponse = await fetch(url, {
+            method,
+            headers: {
+                Authorization: `Bearer ${this.state.accessToken}`,
+            },
+            body: form,
+        });
+
+        if (!uploadResponse.ok) {
+            throw new Error(await uploadResponse.text());
+        }
+
+        const fileData = await uploadResponse.json();
+
+        // サムネイルを保存
+        try {
+            const thumbnailDataUrl = await this.getProjectThumbnail();
+            const thumbnailBlob = await (await fetch(thumbnailDataUrl)).blob();
+            const thumbnailMetadata = {
+                name: `Penguin-Thumbnail-${fileData.id}.png`,
+                mimeType: "image/png",
+            };
+
+            const existingThumbnailResponse = await fetch(
+                `https://www.googleapis.com/drive/v3/files?q=name='${thumbnailMetadata.name}'`,
+                {
+                    headers: {
+                        Authorization: `Bearer ${this.state.accessToken}`,
+                    },
+                }
+            );
+
+            const existingThumbnailData = await existingThumbnailResponse.json();
+            const thumbnailFileId = existingThumbnailData.files?.[0]?.id;
+
+            const thumbnailUrl = thumbnailFileId
+                ? `https://www.googleapis.com/upload/drive/v3/files/${thumbnailFileId}?uploadType=multipart`
+                : "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart";
+
+            const thumbnailForm = new FormData();
+            thumbnailForm.append("metadata", new Blob([JSON.stringify(thumbnailMetadata)], { type: "application/json" }));
+            thumbnailForm.append("file", thumbnailBlob);
+
+            const thumbnailMethod = thumbnailFileId ? "PATCH" : "POST";
+
+            await fetch(thumbnailUrl, {
+                method: thumbnailMethod,
+                headers: {
+                    Authorization: `Bearer ${this.state.accessToken}`,
+                },
+                body: thumbnailForm,
+            });
+        } catch (thumbnailError) {
+            console.warn("サムネイルの保存に失敗しました:", thumbnailError);
+        }
+
+        if (!fileId) {
+            await fetch(`https://www.googleapis.com/drive/v3/files/${fileData.id}/permissions`, {
+                method: "POST",
+                headers: {
+                    Authorization: `Bearer ${this.state.accessToken}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    role: "reader",
+                    type: "anyone",
+                }),
+            });
+        }
+    }
+
+    getProjectThumbnail() {
+        return new Promise(resolve => {
+            window.vm.renderer.requestSnapshot(uri => {
+                resolve(uri);
+            });
+        });
+    }
+}
+
+GoogleDriveSave.propTypes = {
+    className: PropTypes.string,
+    showAlert: PropTypes.func.isRequired
+};
+
+export default GoogleDriveSave;