Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 20:34:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add TruncatedText component (#932)

Browse Source
This commit is contained in:
InfiniteTF
2020-11-27 03:01:37 +01:00
committed by GitHub
parent 54c9f167ba
commit a45c1111be
27 changed files with 244 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
ui/v2.5/src/components/Scenes/SceneDetails/SceneFileInfoPanel.tsx
View File

@@ -2,6 +2,7 @@ import React from "react";
import { FormattedNumber } from "react-intl";
import * as GQL from "src/core/generated-graphql";
import { TextUtils } from "src/utils";
import { TruncatedText } from "src/components/Shared";
interface ISceneFileInfoPanelProps {
scene: GQL.SceneDataFragment;
@@ -15,7 +16,7 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
return (
<div className="row">
<span className="col-4">Hash</span>
<span className="col-8 text-truncate">{props.scene.oshash}</span>
<TruncatedText className="col-8" text={props.scene.oshash} />
</div>
);
}
@@ -26,7 +27,7 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
return (
<div className="row">
<span className="col-4">Checksum</span>
<span className="col-8 text-truncate">{props.scene.checksum}</span>
<TruncatedText className="col-8" text={props.scene.checksum} />
</div>
);
}
@@ -39,9 +40,9 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
return (
<div className="row">
<span className="col-4">Path</span>
<span className="col-8 text-truncate">
<a href={`file://${path}`}>{`file://${props.scene.path}`}</a>{" "}
</span>
<a href={`file://${path}`} className="col-8">
<TruncatedText text={`file://${props.scene.path}`} />
</a>{" "}
</div>
);
}
@@ -50,11 +51,9 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
return (
<div className="row">
<span className="col-4">Stream</span>
<span className="col-8 text-truncate">
<a href={props.scene.paths.stream ?? ""}>
{props.scene.paths.stream}
</a>{" "}
</span>
<a href={props.scene.paths.stream ?? ""} className="col-8">
<TruncatedText text={props.scene.paths.stream} />
</a>{" "}
</div>
);
}
@@ -92,9 +91,10 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
return (
<div className="row">
<span className="col-4">Duration</span>
<span className="col-8 text-truncate">
{TextUtils.secondsToTimestamp(props.scene.file.duration ?? 0)}
</span>
<TruncatedText
className="col-8"
text={TextUtils.secondsToTimestamp(props.scene.file.duration ?? 0)}
/>
</div>
);
}
@@ -106,9 +106,10 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
return (
<div className="row">
<span className="col-4">Dimensions</span>
<span className="col-8 text-truncate">
{props.scene.file.width} x {props.scene.file.height}
</span>
<TruncatedText
className="col-8"
text={`${props.scene.file.width} x ${props.scene.file.height}`}
/>
</div>
);
}
@@ -154,9 +155,7 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
return (
<div className="row">
<span className="col-4">Video Codec</span>
<span className="col-8 text-truncate">
{props.scene.file.video_codec}
</span>
<TruncatedText className="col-8" text={props.scene.file.video_codec} />
</div>
);
}
@@ -168,9 +167,7 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
return (
<div className="row">
<span className="col-4">Audio Codec</span>
<span className="col-8 text-truncate">
{props.scene.file.audio_codec}
</span>
<TruncatedText className="col-8" text={props.scene.file.audio_codec} />
</div>
);
}
@@ -182,9 +179,9 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
return (
<div className="row">
<span className="col-4">Downloaded From</span>
<span className="col-8 text-truncate">
<a href={TextUtils.sanitiseURL(props.scene.url)}>{props.scene.url}</a>
</span>
<a href={TextUtils.sanitiseURL(props.scene.url)} className="col-8">
<TruncatedText text={props.scene.url} />
</a>
</div>
);
}