Skip to content

Commit

Permalink
Fix merging error
Browse files Browse the repository at this point in the history
  • Loading branch information
geourjoa committed Nov 22, 2024
1 parent f78d904 commit 0b7044a
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 116 deletions.
17 changes: 15 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion src/components/AnnotationsOverlayVideo.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import CanvasOverlayVideo from '../lib/CanvasOverlayVideo';
import CanvasWorld from '../lib/CanvasWorld';
import CanvasAnnotationDisplay from '../lib/CanvasAnnotationDisplay';
import { VideosReferences } from '../plugins/VideosReferences';
import {ORIENTATIONS} from './VideoViewer';

/** AnnotationsOverlayVideo - based on AnnotationsOverlay */
export class AnnotationsOverlayVideo extends Component {
Expand Down
216 changes: 104 additions & 112 deletions src/components/CanvasAnnotations.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {useState, useCallback} from 'react';
import { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import Chip from '@mui/material/Chip';
import MenuList from '@mui/material/MenuList';
Expand Down Expand Up @@ -38,8 +38,9 @@ const StyledFooterAnnotationContainer = styled('div')(({ theme }) => ({
/**
* CanvasAnnotations ~
*/
export function CanvasAnnotations ({
export function CanvasAnnotations({
annotations = [],
autoScroll = true,
index,
label,
selectedAnnotationId = undefined,
Expand All @@ -53,8 +54,7 @@ export function CanvasAnnotations ({
selectAnnotation,
windowId,
hoverAnnotation,
}) {

}) {
const [inputSearch, setInputSearch] = useState('');

const handleClick = useCallback((_event, annotation) => {
Expand All @@ -73,124 +73,125 @@ export function CanvasAnnotations ({
hoverAnnotation(windowId, []);
}, [hoverAnnotation, windowId]);


if (annotations.length === 0) return null;

let annotationsFiltered = annotations;


if (inputSearch !== undefined && inputSearch !== '') {
annotationsFiltered = filterAnnotation(annotations, inputSearch);
}

// TODO Count filtered or all ?
const annotationCount = annotations.length;

return (
<>
<Typography sx={{ paddingLeft: 2, paddingRight: 1, paddingTop: 2 }} variant="overline">
{t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })}
</Typography>
<StyledAnnotationContainer>
<TextField
label={t('searchPlaceholderAnnotation')}
onChange={this.handleAnnotationSearch}
sx={{
width: '100%',
return (
<>
<Typography sx={{ paddingLeft: 2, paddingRight: 1, paddingTop: 2 }} variant="overline">
{t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })}
</Typography>
<StyledAnnotationContainer>
<TextField
label={t('searchPlaceholderAnnotation')}
onChange={(e) => setInputSearch(e.target.value)}
sx={{
width: '100%',
}}
InputProps={{
endAdornment: (
<div style={{
position: 'absolute',
right: 0,
}}
InputProps={{
endAdornment: (
<div style={{
position: 'absolute',
right: 0,
}}
>
<MiradorMenuButton aria-label={t('searchAnnotationTooltip')} type="submit">
<SearchIcon />
</MiradorMenuButton>
</div>
),
>
<MiradorMenuButton aria-label={t('searchAnnotationTooltip')} type="submit">
<SearchIcon />
</MiradorMenuButton>
</div>
),
}}
/>
</StyledAnnotationContainer>
<MenuList autoFocusItem variant="selectedMenu">
{annotationsFiltered.map((annotation) => (
<ScrollTo
containerRef={containerRef}
key={`${annotation.id}-scroll`}
offsetTop={96} // offset for the height of the form above
scrollTo={selectedAnnotationId === annotation.id}
selected={selectedAnnotationId === annotation.id}
>
<MenuItem
component={listContainerComponent}
variant="multiline"
divider
sx={{
'&:hover,&:focus': {
backgroundColor: 'action.hover',
},
backgroundColor: hoveredAnnotationIds.includes(annotation.id) ? 'action.hover' : '',
}}
/>
</StyledAnnotationContainer>
<MenuList autoFocusItem variant="selectedMenu">
{annotationsFiltered.map((annotation) => (
<ScrollTo
containerRef={containerRef}
key={`${annotation.id}-scroll`}
offsetTop={96} // offset for the height of the form above
scrollTo={selectedAnnotationId === annotation.id}
/* ref={containerRef} */ // TODO useful ?
key={annotation.id}
annotationid={annotation.id}
selected={selectedAnnotationId === annotation.id}
onClick={(e) => handleClick(e, annotation)}
onFocus={() => handleAnnotationHover(annotation)}
onBlur={handleAnnotationBlur}
onMouseEnter={() => handleAnnotationHover(annotation)}
onMouseLeave={handleAnnotationBlur}
>
<MenuItem
component={listContainerComponent}
variant="multiline"
divider
sx={{
'&:hover,&:focus': {
backgroundColor: 'action.hover',
},
backgroundColor: hoveredAnnotationIds.includes(annotation.id) ? 'action.hover' : '',
}}
/* ref={containerRef}*/ // TODO useful ?
key={annotation.id}
annotationid={annotation.id}
selected={selectedAnnotationId === annotation.id}
onClick={(e) => handleClick(e, annotation)}
onFocus={() => handleAnnotationHover(annotation)}
onBlur={handleAnnotationBlur}
onMouseEnter={() => handleAnnotationHover(annotation)}
onMouseLeave={handleAnnotationBlur}
<ListItemText
primaryTypographyProps={{ variant: 'body2' }}
>
<ListItemText
primaryTypographyProps={{ variant: 'body2' }}
>
<SanitizedHtml
ruleSet={htmlSanitizationRuleSet}
htmlString={annotation.content}
/>
<div>
{
annotation.tags.map(tag => (
<Chip
size="small"
variant="outlined"
label={tag}
id={tag}
sx={theme => ({
backgroundColor: theme.palette.background.paper,
marginRight: theme.spacing(0.5),
marginTop: theme.spacing(1),
})}
key={tag.toString()}
/>
))
}
<AnnotationManifestsAccordion
annotation={annotation}
t={t}
/>
</div>
</ListItemText>
</MenuItem>
</ScrollTo>
))
}
{annotationsFiltered.length === 0
&& (
<MenuItem>
<Typography>
<SanitizedHtml
ruleSet={htmlSanitizationRuleSet}
htmlString={annotation.content}
/>
<div>
{
annotation.tags.map(tag => (
<Chip
size="small"
variant="outlined"
label={tag}
id={tag}
sx={theme => ({
backgroundColor: theme.palette.background.paper,
marginRight: theme.spacing(0.5),
marginTop: theme.spacing(1),
})}
key={tag.toString()}
/>
))
}
<AnnotationManifestsAccordion
annotation={annotation}
t={t}
/>
</div>
</ListItemText>
</MenuItem>
</ScrollTo>
))}
{annotationsFiltered.length === 0
&& (
<MenuItem>
<Typography>
{t('noAnnotationFound')}
</Typography>
</MenuItem>
)}
</MenuList>
</Typography>
</MenuItem>
)}
</MenuList>
<StyledFooterAnnotationContainer>
<Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography>
<Typography component="p" variant="subtitle2">
{t('showingNumAnnotations', {
count: annotationCount,
number: annotationCount,
})}
</Typography>
</StyledFooterAnnotationContainer>
</>
);
}
</>
);
}

CanvasAnnotations.propTypes = {
Expand Down Expand Up @@ -218,12 +219,3 @@ CanvasAnnotations.propTypes = {
totalSize: PropTypes.number.isRequired,
windowId: PropTypes.string.isRequired,
};
CanvasAnnotations.defaultProps = {
annotations: [],
autoScroll: true,
containerRef: null,
hoveredAnnotationIds: [],
htmlSanitizationRuleSet: 'iiif',
listContainerComponent: 'li',
selectedAnnotationId: undefined,
};
4 changes: 3 additions & 1 deletion src/containers/WindowSideBarAnnotationsPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import {
getVisibleCanvasIds,
getAnnotationResourcesByMotivation,
} from '../state/selectors';
import WindowSideBarAnnotationsPanel from '../components/WindowSideBarAnnotationsPanel';
import {
WindowSideBarAnnotationsPanel
} from '../components/WindowSideBarAnnotationsPanel';

/**
* mapStateToProps - to hook up connect
Expand Down

0 comments on commit 0b7044a

Please sign in to comment.