feat: Add comprehensive documentation suite and reorganize project structure
- Created complete documentation in docs/ directory - Added PROJECT_OVERVIEW.md with feature highlights and getting started guide - Added ARCHITECTURE.md with system design and technical details - Added SECURITY.md with comprehensive security implementation guide - Added DEVELOPMENT.md with development workflows and best practices - Added DEPLOYMENT.md with production deployment instructions - Added API.md with complete REST API documentation - Added CONTRIBUTING.md with contribution guidelines - Added CHANGELOG.md with version history and migration notes - Reorganized all documentation files into docs/ directory for better organization - Updated README.md with proper documentation links and quick navigation - Enhanced project structure with professional documentation standards
This commit is contained in:
SamiAhmed7777
157
f_scripts/embed_generator.js
Normal file
157
f_scripts/embed_generator.js
Normal file
@@ -0,0 +1,157 @@
|
||||
/**
|
||||
* EasyStream Embed Code Generator
|
||||
* Generates iframe embed codes for videos
|
||||
*/
|
||||
|
||||
class EmbedGenerator {
|
||||
constructor(options = {}) {
|
||||
this.options = {
|
||||
baseUrl: options.baseUrl || window.location.origin,
|
||||
fileKey: options.fileKey || '',
|
||||
fileType: options.fileType || 'video',
|
||||
width: options.width || 560,
|
||||
height: options.height || 315,
|
||||
autoplay: options.autoplay || false,
|
||||
controls: options.controls !== false,
|
||||
startTime: options.startTime || 0,
|
||||
...options
|
||||
};
|
||||
}
|
||||
|
||||
// Generate iframe embed code
|
||||
generateIframeCode() {
|
||||
const params = new URLSearchParams();
|
||||
if (this.options.autoplay) params.append('autoplay', '1');
|
||||
if (!this.options.controls) params.append('controls', '0');
|
||||
if (this.options.startTime) params.append('t', this.options.startTime);
|
||||
|
||||
const queryString = params.toString() ? '&' + params.toString() : '';
|
||||
const embedUrl = `${this.options.baseUrl}/f_modules/m_frontend/m_player/embed.php?${this.options.fileType[0]}=${this.options.fileKey}${queryString}`;
|
||||
|
||||
return `<iframe width="${this.options.width}" height="${this.options.height}" src="${embedUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
|
||||
}
|
||||
|
||||
// Generate responsive embed code
|
||||
generateResponsiveCode() {
|
||||
const aspectRatio = (this.options.height / this.options.width) * 100;
|
||||
const params = new URLSearchParams();
|
||||
if (this.options.autoplay) params.append('autoplay', '1');
|
||||
if (!this.options.controls) params.append('controls', '0');
|
||||
if (this.options.startTime) params.append('t', this.options.startTime);
|
||||
|
||||
const queryString = params.toString() ? '&' + params.toString() : '';
|
||||
const embedUrl = `${this.options.baseUrl}/f_modules/m_frontend/m_player/embed.php?${this.options.fileType[0]}=${this.options.fileKey}${queryString}`;
|
||||
|
||||
return `<div style="position: relative; padding-bottom: ${aspectRatio}%; height: 0; overflow: hidden;">
|
||||
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="${embedUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Generate direct link
|
||||
generateDirectLink() {
|
||||
return `${this.options.baseUrl}/watch?v=${this.options.fileKey}${this.options.startTime ? '&t=' + this.options.startTime : ''}`;
|
||||
}
|
||||
|
||||
// Generate thumbnail URL
|
||||
generateThumbnailUrl(userKey) {
|
||||
return `${this.options.baseUrl}/f_data/data_userfiles/${userKey}/t/${this.options.fileKey}/0.jpg`;
|
||||
}
|
||||
|
||||
// Show embed dialog
|
||||
showEmbedDialog() {
|
||||
const dialog = document.createElement('div');
|
||||
dialog.className = 'embed-dialog';
|
||||
dialog.innerHTML = `
|
||||
<div class="embed-dialog-overlay" onclick="this.parentElement.remove()"></div>
|
||||
<div class="embed-dialog-content">
|
||||
<h3>Embed Video</h3>
|
||||
|
||||
<div class="embed-options">
|
||||
<label>
|
||||
<input type="number" id="embedWidth" value="${this.options.width}" min="200" max="1920">
|
||||
Width (px)
|
||||
</label>
|
||||
<label>
|
||||
<input type="number" id="embedHeight" value="${this.options.height}" min="200" max="1080">
|
||||
Height (px)
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="embedAutoplay" ${this.options.autoplay ? 'checked' : ''}>
|
||||
Autoplay
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="embedControls" ${this.options.controls ? 'checked' : ''}>
|
||||
Show Controls
|
||||
</label>
|
||||
<label>
|
||||
<input type="number" id="embedStartTime" value="${this.options.startTime}" min="0">
|
||||
Start Time (seconds)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="embed-preview">
|
||||
<h4>Preview</h4>
|
||||
<div id="embedPreview"></div>
|
||||
</div>
|
||||
|
||||
<div class="embed-code">
|
||||
<h4>Embed Code</h4>
|
||||
<textarea id="embedCodeArea" readonly></textarea>
|
||||
<button onclick="embedGenerator.copyEmbedCode()">Copy Code</button>
|
||||
</div>
|
||||
|
||||
<div class="embed-code">
|
||||
<h4>Responsive Embed Code</h4>
|
||||
<textarea id="embedCodeResponsive" readonly></textarea>
|
||||
<button onclick="embedGenerator.copyResponsiveCode()">Copy Code</button>
|
||||
</div>
|
||||
|
||||
<button class="close-dialog" onclick="this.closest('.embed-dialog').remove()">×</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(dialog);
|
||||
|
||||
// Update on option change
|
||||
['embedWidth', 'embedHeight', 'embedAutoplay', 'embedControls', 'embedStartTime'].forEach(id => {
|
||||
document.getElementById(id).addEventListener('change', () => this.updateEmbedPreview());
|
||||
});
|
||||
|
||||
this.updateEmbedPreview();
|
||||
}
|
||||
|
||||
// Update embed preview
|
||||
updateEmbedPreview() {
|
||||
this.options.width = parseInt(document.getElementById('embedWidth').value);
|
||||
this.options.height = parseInt(document.getElementById('embedHeight').value);
|
||||
this.options.autoplay = document.getElementById('embedAutoplay').checked;
|
||||
this.options.controls = document.getElementById('embedControls').checked;
|
||||
this.options.startTime = parseInt(document.getElementById('embedStartTime').value);
|
||||
|
||||
const iframeCode = this.generateIframeCode();
|
||||
const responsiveCode = this.generateResponsiveCode();
|
||||
|
||||
document.getElementById('embedCodeArea').value = iframeCode;
|
||||
document.getElementById('embedCodeResponsive').value = responsiveCode;
|
||||
document.getElementById('embedPreview').innerHTML = iframeCode;
|
||||
}
|
||||
|
||||
// Copy embed code
|
||||
copyEmbedCode() {
|
||||
const code = document.getElementById('embedCodeArea');
|
||||
code.select();
|
||||
document.execCommand('copy');
|
||||
alert('Embed code copied to clipboard!');
|
||||
}
|
||||
|
||||
// Copy responsive code
|
||||
copyResponsiveCode() {
|
||||
const code = document.getElementById('embedCodeResponsive');
|
||||
code.select();
|
||||
document.execCommand('copy');
|
||||
alert('Responsive embed code copied!');
|
||||
}
|
||||
}
|
||||
|
||||
// Export for global use
|
||||
window.EmbedGenerator = EmbedGenerator;
|
||||
Reference in New Issue
Block a user