User:Docmoates/Social: Difference between revisions

← Older edit Newer edit →

VisualWikitext

Revision as of 03:04, 3 February 2026

Add Story

?

Edit

📍

📝

No posts yet

Be the first to share something!

@@ Line 49: / Line 49: @@
 .sf-stories { display: flex; gap: 12px; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; }
 .sf-create-story { width: 68px; height: 68px; border-radius: 50%; background: #e4e6eb; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #1877f2; cursor: pointer; border: none; }
-.sf-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 9999; align-items: center; justify-content: center; }
+.sf-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 9999; align-items: center; justify-content: center; }
 .sf-modal.active { display: flex; }
 .sf-modal-content { background: white; border-radius: 12px; padding: 24px; max-width: 450px; width: 90%; }
@@ Line 166: / Line 166: @@
 <div class="sf-modal-content">
 <div class="sf-modal-title">Add Video</div>
+<div class="sf-tabs">
+<div class="sf-tab active" data-vtab="vupload">Upload</div>
+<div class="sf-tab" data-vtab="vurl">From URL</div>
+</div>
+<div class="sf-tab-content active" id="tab-vupload">
+<div class="sf-upload-zone" id="video-upload-zone">
+<div class="sf-upload-icon">🎬</div>
+<div class="sf-upload-text">Click to select or drag video here</div>
+<input type="file" id="video-file-input" accept="video/*" style="display:none">
+</div>
+<div class="sf-upload-progress" id="video-upload-progress">
+<div class="sf-progress-bar"><div class="sf-progress-fill" id="video-progress-fill"></div></div>
+<p style="font-size:12px;color:#65676b;margin-top:8px;" id="video-upload-status">Uploading...</p>
+</div>
+<video class="sf-preview-thumb" id="video-upload-preview" controls style="display:none;max-height:150px;"></video>
+</div>
+<div class="sf-tab-content" id="tab-vurl">
 <input type="text" class="sf-modal-input" id="video-url-input" placeholder="Paste video URL (YouTube, Vimeo, or direct link)...">
 <p style="font-size:12px;color:#65676b;margin-bottom:12px;">Supports YouTube, Vimeo, or direct video URLs</p>
+</div>
 <div class="sf-modal-buttons">
 <button class="sf-modal-btn sf-modal-btn-cancel" id="video-cancel-btn">Cancel</button>
@@ Line 301: / Line 319: @@
 });
-// Video modal
+// Video modal tabs
+var uploadedVideoFile=null;
+document.querySelectorAll('[data-vtab]').forEach(function(tab){
+tab.addEventListener('click',function(){
+document.querySelectorAll('[data-vtab]').forEach(function(t){t.classList.remove('active');});
+document.querySelectorAll('#video-modal .sf-tab-content').forEach(function(c){c.classList.remove('active');});
+tab.classList.add('active');
+gel('tab-'+tab.dataset.vtab).classList.add('active');
+});
+});
 gel('add-video-btn').addEventListener('click',function(){
 gel('video-url-input').value='';
+gel('video-upload-preview').style.display='none';
+gel('video-upload-progress').style.display='none';
+uploadedVideoFile=null;
 gel('video-modal').classList.add('active');
 });
 gel('video-cancel-btn').addEventListener('click',function(){gel('video-modal').classList.remove('active');});
+var videoUploadZone=gel('video-upload-zone');
+var videoFileInput=gel('video-file-input');
+videoUploadZone.addEventListener('click',function(){videoFileInput.click();});
+videoUploadZone.addEventListener('dragover',function(e){e.preventDefault();videoUploadZone.classList.add('dragover');});
+videoUploadZone.addEventListener('dragleave',function(){videoUploadZone.classList.remove('dragover');});
+videoUploadZone.addEventListener('drop',function(e){
+e.preventDefault();
+videoUploadZone.classList.remove('dragover');
+if(e.dataTransfer.files.length>0)handleVideoFile(e.dataTransfer.files[0]);
+});
+videoFileInput.addEventListener('change',function(){
+if(videoFileInput.files.length>0)handleVideoFile(videoFileInput.files[0]);
+});
+function handleVideoFile(file){
+if(!file.type.startsWith('video/')){alert('Please select a video file');return;}
+uploadedVideoFile=file;
+var url=URL.createObjectURL(file);
+gel('video-upload-preview').src=url;
+gel('video-upload-preview').style.display='block';
+}
+function uploadVideo(file){
+gel('video-upload-progress').style.display='block';
+gel('video-progress-fill').style.width='10%';
+gel('video-upload-status').textContent='Preparing upload...';
+var filename='SocialVideo_'+user+'_'+Date.now()+'.'+file.name.split('.').pop();
+getToken().then(function(token){
+gel('video-progress-fill').style.width='30%';
+gel('video-upload-status').textContent='Uploading to wiki...';
+var formData=new FormData();
+formData.append('action','upload');
+formData.append('filename',filename);
+formData.append('file',file);
+formData.append('token',token);
+formData.append('format','json');
+formData.append('ignorewarnings','1');
+var xhr=new XMLHttpRequest();
+xhr.open('POST',apiBase,true);
+xhr.withCredentials=true;
+xhr.upload.onprogress=function(e){
+if(e.lengthComputable){
+var pct=30+Math.round((e.loaded/e.total)*60);
+gel('video-progress-fill').style.width=pct+'%';
+}
+};
+xhr.onload=function(){
+if(xhr.status===200){
+var resp=JSON.parse(xhr.responseText);
+if(resp.upload){
+if(resp.upload.imageinfo){
+gel('video-progress-fill').style.width='100%';
+gel('video-upload-status').textContent='Upload complete!';
+pendingVideo=resp.upload.imageinfo.url;
+pendingImg='';
+mediaType='video';
+gel('preview-img').style.display='none';
+gel('preview-video').src=pendingVideo;
+gel('preview-video').style.display='block';
+gel('image-preview').style.display='block';
+setTimeout(function(){gel('video-modal').classList.remove('active');},500);
+}else if(resp.upload.warnings){
+gel('video-upload-status').textContent='Warning: '+JSON.stringify(resp.upload.warnings);
+}
+}else if(resp.error){
+gel('video-upload-status').textContent='Error: '+resp.error.info;
+}
+}else{
+gel('video-upload-status').textContent='Upload failed';
+}
+};
+xhr.onerror=function(){gel('video-upload-status').textContent='Upload failed';};
+xhr.send(formData);
+});
+}
 gel('video-add-btn').addEventListener('click',function(){
+var activeTab=document.querySelector('[data-vtab].active').dataset.vtab;
+if(activeTab==='vurl'){
 var url=gel('video-url-input').value.trim();
 if(url){
@@ Line 326: / Line 443: @@
 }else{
 alert('Please enter a video URL');
+}
+}else{
+if(uploadedVideoFile){
+uploadVideo(uploadedVideoFile);
+}else{
+alert('Please select a video to upload');
+}
 }
 });

User:Docmoates/Social: Difference between revisions

Revision as of 03:04, 3 February 2026

Navigation menu

Search