fix video size

This commit is contained in:
hamid zarghami
2025-09-03 09:16:59 +03:30
parent 0e16af827f
commit 3ca8b89a47
5 changed files with 37 additions and 87 deletions
+11 -3
View File
@@ -83,7 +83,7 @@ const QuillEditor: FC<QuillEditorProps> = ({
quillRef.current.insertEmbed(range.index, 'video', { quillRef.current.insertEmbed(range.index, 'video', {
url: embedUrl, url: embedUrl,
width: '100%', width: '100%',
height: '315' height: 'auto'
}) })
quillRef.current.setSelection(range.index + 1) quillRef.current.setSelection(range.index + 1)
} else { } else {
@@ -101,7 +101,7 @@ const QuillEditor: FC<QuillEditorProps> = ({
quillRef.current.insertEmbed(range.index, 'video', { quillRef.current.insertEmbed(range.index, 'video', {
url: embedUrl, url: embedUrl,
width: '100%', width: '100%',
height: '315' height: 'auto'
}) })
quillRef.current.setSelection(range.index + 1) quillRef.current.setSelection(range.index + 1)
} else { } else {
@@ -143,10 +143,18 @@ const QuillEditor: FC<QuillEditorProps> = ({
.ql-video-wrapper { .ql-video-wrapper {
margin: 1em 0; margin: 1em 0;
text-align: center; text-align: center;
position: relative;
width: 100%;
aspect-ratio: 16/9;
} }
.ql-video-wrapper iframe { .ql-video-wrapper iframe {
max-width: 100%; position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px; border-radius: 8px;
border: none;
} }
` `
}} /> }} />
+2 -2
View File
@@ -21,7 +21,7 @@ class VideoBlot extends BlockEmbed {
const iframe = document.createElement("iframe"); const iframe = document.createElement("iframe");
iframe.setAttribute("src", value.url); iframe.setAttribute("src", value.url);
iframe.setAttribute("width", value.width || "100%"); iframe.setAttribute("width", value.width || "100%");
iframe.setAttribute("height", value.height || "315"); iframe.setAttribute("height", value.height || "auto");
iframe.setAttribute("frameborder", "0"); iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "true"); iframe.setAttribute("allowfullscreen", "true");
iframe.style.maxWidth = "100%"; iframe.style.maxWidth = "100%";
@@ -38,7 +38,7 @@ class VideoBlot extends BlockEmbed {
return { return {
url: iframe.getAttribute("src") || "", url: iframe.getAttribute("src") || "",
width: iframe.getAttribute("width") || "100%", width: iframe.getAttribute("width") || "100%",
height: iframe.getAttribute("height") || "315", height: iframe.getAttribute("height") || "auto",
}; };
} }
} }
+22 -1
View File
@@ -162,7 +162,7 @@ tbody tr {
.ql-container { .ql-container {
min-height: 200px !important; min-height: 200px !important;
max-height: 500px; max-height: none;
overflow-y: auto; overflow-y: auto;
} }
@@ -170,3 +170,24 @@ tbody tr {
position: relative !important; position: relative !important;
z-index: 10; z-index: 10;
} }
/* استایل‌های مخصوص iframe ویدیو */
.ql-video-wrapper {
margin: 1em 0 !important;
text-align: center !important;
position: relative !important;
width: 100% !important;
aspect-ratio: 16/9 !important;
min-height: 300px !important;
}
.ql-video-wrapper iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 8px !important;
border: none !important;
max-width: 100% !important;
}
-19
View File
@@ -1,7 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { import {
DocumentText, DocumentText,
DocumentDownload,
Refresh, Refresh,
Activity, Activity,
InfoCircle InfoCircle
@@ -26,7 +25,6 @@ const AccessLogsList: React.FC = () => {
filters, filters,
updateFilters, updateFilters,
resetFilters, resetFilters,
exportLogs,
refetch, refetch,
} = useAccessLogs(); } = useAccessLogs();
@@ -51,14 +49,6 @@ const AccessLogsList: React.FC = () => {
updateFilters({ page }); updateFilters({ page });
}; };
const handleExport = async () => {
try {
await exportLogs();
} catch (error) {
console.error("خطا در خروجی گرفتن:", error);
}
};
if (error) { if (error) {
return ( return (
<div className="p-6"> <div className="p-6">
@@ -98,15 +88,6 @@ const AccessLogsList: React.FC = () => {
<Refresh size={16} className={loading ? "animate-spin" : ""} /> <Refresh size={16} className={loading ? "animate-spin" : ""} />
بروزرسانی بروزرسانی
</Button> </Button>
<Button
onClick={handleExport}
disabled={loading || !logs || logs.length === 0}
className="flex items-center gap-2 border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
>
<DocumentDownload size={16} />
خروجی CSV
</Button>
</div> </div>
</div> </div>
@@ -8,10 +8,8 @@ import {
AccessLogQuery, AccessLogQuery,
OperationType, OperationType,
UserType, UserType,
HttpMethod,
OperationTypeLabels, OperationTypeLabels,
UserTypeLabels, UserTypeLabels,
HttpMethodLabels,
} from "../types/AccessLogTypes"; } from "../types/AccessLogTypes";
interface FilterPanelProps { interface FilterPanelProps {
@@ -37,11 +35,6 @@ const FilterPanel: React.FC<FilterPanelProps> = ({
label: UserTypeLabels[type], label: UserTypeLabels[type],
})); }));
const httpMethodOptions = Object.values(HttpMethod).map((method) => ({
value: method,
label: HttpMethodLabels[method],
}));
const statusCodeOptions = [ const statusCodeOptions = [
{ value: "200", label: "200 - موفق" }, { value: "200", label: "200 - موفق" },
{ value: "201", label: "201 - ایجاد شده" }, { value: "201", label: "201 - ایجاد شده" },
@@ -138,18 +131,7 @@ const FilterPanel: React.FC<FilterPanelProps> = ({
/> />
</div> </div>
{/* HTTP Method */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
متد HTTP
</label>
<Select
items={[{ value: "", label: "همه" }, ...httpMethodOptions]}
value={filters.httpMethod || ""}
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => onFiltersChange({ httpMethod: e.target.value as HttpMethod })}
disabled={loading}
/>
</div>
{/* Status Code */} {/* Status Code */}
<div> <div>
@@ -164,18 +146,7 @@ const FilterPanel: React.FC<FilterPanelProps> = ({
/> />
</div> </div>
{/* IP Address */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
آدرس IP
</label>
<Input
placeholder="192.168.1.1"
value={filters.ipAddress || ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onFiltersChange({ ipAddress: e.target.value })}
disabled={loading}
/>
</div>
{/* User ID */} {/* User ID */}
<div> <div>
@@ -214,37 +185,6 @@ const FilterPanel: React.FC<FilterPanelProps> = ({
/> />
</div> </div>
{/* Min Execution Time */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
حداقل زمان اجرا (ms)
</label>
<Input
type="number"
placeholder="0"
value={filters.minExecutionTime?.toString() || ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onFiltersChange({
minExecutionTime: e.target.value ? parseInt(e.target.value) : undefined
})}
disabled={loading}
/>
</div>
{/* Max Execution Time */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
حداکثر زمان اجرا (ms)
</label>
<Input
type="number"
placeholder="1000"
value={filters.maxExecutionTime?.toString() || ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onFiltersChange({
maxExecutionTime: e.target.value ? parseInt(e.target.value) : undefined
})}
disabled={loading}
/>
</div>
</div> </div>
</div> </div>
); );