Update src/components/menu-bar/google-drive-save.jsx

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

@@ -16,8 +16,11 @@ class GoogleDriveSave extends React.Component {
             files: [],
             isModalOpen: false,
             isLoading: false,
+            isProcessing: false,
             newFileName: this.props.projectTitle || '無題',
-            showNewFileInput: false
+            showNewFileInput: false,
+            sharePermission: 'reader', // 'reader', 'writer', or 'owner'
+            selectedFileId: null
         };
         this.modalContentRef = React.createRef();
     }
@@ -31,16 +34,20 @@ class GoogleDriveSave extends React.Component {
     };
 
     handleCloseModal = () => {
-        this.setState({isModalOpen: false, showNewFileInput: false});
+        if (!this.state.isProcessing) {
+            this.setState({isModalOpen: false, showNewFileInput: false});
+        }
     };
 
     handleOverlayClick = (e) => {
-        if (this.modalContentRef.current && !this.modalContentRef.current.contains(e.target)) {
+        if (!this.state.isProcessing && this.modalContentRef.current && !this.modalContentRef.current.contains(e.target)) {
             this.handleCloseModal();
         }
     };
 
     startGoogleLogin = () => {
+        if (this.state.isProcessing) return;
+        
         localStorage.removeItem('googleDriveAccessToken');
         localStorage.removeItem('googleDriveAccountEmail');
         localStorage.removeItem('googleDriveAccountName');
@@ -103,7 +110,13 @@ class GoogleDriveSave extends React.Component {
                 <div className={styles.modalContent} ref={this.modalContentRef}>
                     <div className={styles.modalHeader}>
                         <h2>Googleドライブに保存</h2>
-                        <button onClick={this.handleCloseModal} className={styles.closeButton}>×</button>
+                        <button 
+                            onClick={this.handleCloseModal} 
+                            className={styles.closeButton}
+                            disabled={this.state.isProcessing}
+                        >
+                            ×
+                        </button>
                     </div>
                     
                     <div className={styles.modalBody}>
@@ -111,6 +124,13 @@ class GoogleDriveSave extends React.Component {
                         {this.state.accessToken && this.renderNewFileSection()}
                         {this.state.accessToken && this.renderFileList()}
                     </div>
+                    
+                    {this.state.isProcessing && (
+                        <div className={styles.processingOverlay}>
+                            <div className={styles.spinner}></div>
+                            <div>処理中...</div>
+                        </div>
+                    )}
                 </div>
             </div>
         );
@@ -126,6 +146,7 @@ class GoogleDriveSave extends React.Component {
                     <button 
                         onClick={this.handleChangeAccount}
                         className={styles.changeAccountButton}
+                        disabled={this.state.isProcessing}
                     >
                         アカウントを変更
                     </button>
@@ -139,6 +160,7 @@ class GoogleDriveSave extends React.Component {
                 <button 
                     onClick={this.startGoogleLogin}
                     className={styles.loginButton}
+                    disabled={this.state.isProcessing}
                 >
                     Googleでログイン
                 </button>
@@ -157,17 +179,31 @@ class GoogleDriveSave extends React.Component {
                             onChange={(e) => this.setState({newFileName: e.target.value})}
                             className={styles.newFileNameInput}
                             placeholder="ファイル名を入力"
+                            disabled={this.state.isProcessing}
                         />
+                        <div className={styles.permissionDropdown}>
+                            <label>公開設定: </label>
+                            <select
+                                value={this.state.sharePermission}
+                                onChange={(e) => this.setState({sharePermission: e.target.value})}
+                                disabled={this.state.isProcessing}
+                            >
+                                <option value="reader">閲覧のみ</option>
+                                <option value="writer">編集可能</option>
+                                <option value="owner">所有者</option>
+                            </select>
+                        </div>
                         <button
                             onClick={this.handleNewFileSave}
                             className={styles.newFileSaveButton}
-                            disabled={!this.state.newFileName.trim()}
+                            disabled={!this.state.newFileName.trim() || this.state.isProcessing}
                         >
                             保存
                         </button>
                         <button
                             onClick={() => this.setState({showNewFileInput: false})}
                             className={styles.newFileCancelButton}
+                            disabled={this.state.isProcessing}
                         >
                             キャンセル
                         </button>
@@ -179,8 +215,13 @@ class GoogleDriveSave extends React.Component {
         return (
             <div className={styles.newFileSection}>
                 <button 
-                    onClick={() => this.setState({showNewFileInput: true, newFileName: window.vm.runtime.projectName || '無題'})}
+                    onClick={() => this.setState({
+                        showNewFileInput: true, 
+                        newFileName: window.vm.runtime.projectName || '無題',
+                        sharePermission: 'reader'
+                    })}
                     className={styles.newFileButton}
+                    disabled={this.state.isProcessing}
                 >
                     新規保存
                 </button>
@@ -244,24 +285,28 @@ class GoogleDriveSave extends React.Component {
                     <button 
                         onClick={() => this.handleLoadFile(project)}
                         className={styles.actionButton}
+                        disabled={this.state.isProcessing}
                     >
                         読み込む
                     </button>
                     <button 
                         onClick={() => this.handleReplaceFile(project)}
                         className={styles.actionButton}
+                        disabled={this.state.isProcessing}
                     >
                         上書き
                     </button>
                     <button 
                         onClick={() => this.handleShareFile(project.id)}
                         className={classNames(styles.actionButton, styles.shareButton)}
+                        disabled={this.state.isProcessing}
                     >
                         共有
                     </button>
                     <button 
                         onClick={() => this.handleDeleteFile(project, thumbnailFiles)}
                         className={classNames(styles.actionButton, styles.deleteButton)}
+                        disabled={this.state.isProcessing}
                     >
                         削除
                     </button>
@@ -280,12 +325,21 @@ class GoogleDriveSave extends React.Component {
                     <button 
                         onClick={() => this.copyToClipboard(`${SHORT_URL}${fileId}`)}
                         className={styles.copyButton}
+                        disabled={this.state.isProcessing}
                     >
                         リンクをコピー
                     </button>
+                    <button 
+                        onClick={() => window.open(`https://scratch-school.ct.ws/bit.php?id=${fileId}`)}
+                        className={styles.copyButton}
+                        disabled={this.state.isProcessing}
+                    >
+                        リンクを短縮
+                    </button>
                     <button 
                         onClick={() => this.copyToClipboard(fileId)}
                         className={styles.copyButton}
+                        disabled={this.state.isProcessing}
                     >
                         IDのみコピー
                     </button>
@@ -325,6 +379,8 @@ class GoogleDriveSave extends React.Component {
     }
 
     handleChangeAccount = () => {
+        if (this.state.isProcessing) return;
+        
         this.setState({
             accessToken: null,
             currentAccountEmail: null,
@@ -336,18 +392,23 @@ class GoogleDriveSave extends React.Component {
     };
 
     handleNewFileSave = async () => {
+        this.setState({isProcessing: true});
         try {
-            await this.saveToGoogleDrive(null, `${this.state.newFileName}.s4s.txt`);
+            await this.saveToGoogleDrive(null, `${this.state.newFileName}.s4s.txt`, this.state.sharePermission);
             alert("success", "新規保存しました");
             this.setState({showNewFileInput: false});
             this.fetchDriveFiles(this.state.accessToken);
         } catch (error) {
             console.error("新規保存エラー:", error);
             alert("error", "新規保存に失敗しました");
+        } finally {
+            this.setState({isProcessing: false});
         }
     };
 
     handleLoadFile = (project) => {
+        if (this.state.isProcessing) return;
+        
         const PROXY_URL = "https://soiz1-drive-proxy.hf.space/?file_id=";
         
         if (confirm(`"${project.name}"を読み込みますか？現在のプロジェクトは失われます。`)) {
@@ -357,7 +418,10 @@ class GoogleDriveSave extends React.Component {
     };
 
     handleReplaceFile = async (project) => {
+        if (this.state.isProcessing) return;
+        
         if (confirm(`"${project.name}"を現在のプロジェクトで上書きしますか？`)) {
+            this.setState({isProcessing: true});
             try {
                 await this.saveToGoogleDrive(project.id, project.name);
                 alert("success", "上書き保存しました");
@@ -365,17 +429,24 @@ class GoogleDriveSave extends React.Component {
             } catch (error) {
                 console.error("ファイル上書きエラー:", error);
                 alert("error", "ファイルの上書きに失敗しました");
+            } finally {
+                this.setState({isProcessing: false});
             }
         }
     };
 
     handleShareFile = (fileId) => {
+        if (this.state.isProcessing) return;
+        
         const SHARE_URL = "https://scratch-school.ct.ws/upload?id=";
         window.open(`${SHARE_URL}${fileId}`, "_blank");
     };
 
     handleDeleteFile = async (project, thumbnailFiles) => {
+        if (this.state.isProcessing) return;
+        
         if (confirm(`"${project.name}"とそのサムネイルを完全に削除しますか？この操作は元に戻せません。`)) {
+            this.setState({isProcessing: true});
             try {
                 await this.deleteFile(project.id);
                 
@@ -392,11 +463,15 @@ class GoogleDriveSave extends React.Component {
             } catch (error) {
                 console.error("削除エラー:", error);
                 alert("error", "ファイルの削除に失敗しました");
+            } finally {
+                this.setState({isProcessing: false});
             }
         }
     };
 
     copyToClipboard = (text) => {
+        if (this.state.isProcessing) return;
+        
         navigator.clipboard.writeText(text)
             .then(() => alert("success", "リンクをクリップボードにコピーしました"))
             .catch(() => alert("error", "リンクのコピーに失敗しました"));
@@ -415,7 +490,7 @@ class GoogleDriveSave extends React.Component {
         }
     }
 
-    async saveToGoogleDrive(fileId, fileName) {
+    async saveToGoogleDrive(fileId, fileName, permission = 'reader') {
         const blob = await window.vm.saveProjectSb3();
         
         const metadata = {
@@ -496,7 +571,7 @@ class GoogleDriveSave extends React.Component {
                     "Content-Type": "application/json",
                 },
                 body: JSON.stringify({
-                    role: "reader",
+                    role: permission, // ここで公開設定を使用
                     type: "anyone",
                 }),
             });
@@ -521,4 +596,4 @@ const mapStateToProps = state => ({
     projectTitle: state.scratchGui.projectTitle
 });
 
-export default connect(mapStateToProps)(GoogleDriveSave);
+export default connect(mapStateToProps)(GoogleDriveSave);