infeng / react-viewer Goto Github PK

In computer webpage, I can use "esc" key to exit the viewer, However, in mobile phone when I want to close the viewer, I can't find places to close the viewer.

Maybe there can be a gesture or a button available for exiting the viewer?

Thanks!!

First, React-Viewer is pretty good! The function is strong, i really like it. Thank you for building it.

However, when I want to display a high resolution size picture. The way it displays bothers me. I wish it could be like

which is well placed and well zoomed in the center
but the look will be like

which is extended to full height

Do you have any idea how to fix this problem?

import 'react-viewer/dist/index.css';

这句代码会导致下面这个错误：

ERROR in ./node_modules/react-viewer/dist/index.css (./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js!./node_modules/react-viewer/dist/index.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No PostCSS Config found in: /Users/hmr/Documents/ngx-trunk/node_modules/react-viewer/dist
at config.load.then (/Users/hmr/Documents/ngx-trunk/node_modules/postcss-load-config/src/index.js:55:15)
at
@ ./node_modules/react-viewer/dist/index.css 2:14-130 21:1-42:3 22:19-135
@ ./src/common/components/media/MediaViewer.js
@ ./src/web/entity/EntityViewer.js
@ ./src/web/entity/EntityBody.js
@ ./src/web/entity/Entity.js
@ ./src/web/app/routes.js
@ ./src/web/app/App.js
@ ./src/web/app/Root.js
@ ./src/web/main.js
@ ./src/web/index.js
@ multi webpack-hot-middleware/client?path=http://192.168.1.101:8080/__webpack_hmr ./src/web/index.js

请大神指教！谢谢

如果是的话，如何可以跟进最新版本的 viewer.js ？有些属性 比如 transition 想禁用调

i want to remove or change border how to do this .

• viewer core
• add button icon
• add toolbar
• optimize image zoom
• optimise image change

there is any option which can control it?

3q :)

Hi，

请问有什么办法可以实现图片循环播放吗？（切到最后一张图片再点击下一张就切换到第一张图片）

Any can help me, i try to scroll in the demo, but in mozilla it does not work

I see viewerjs has this button, can you add it?
thanks

RT

Hi,

First, thanks for sharing this library !

I've used your library to display old manuscripts. The zoom feature allows to read the handwritten text, but when the next button is pressed, the zoom level is reset.

How the zoom level could be preserved between next/prev images ?

Thanks

Hi @infeng :

I have some suggestions for React-Viewer.

1. I would like the image to be fixed in the center. Or it should be a property to be set in the Ex:
   <Viewer imgFixed = {true} />

2. Some of the functions in the function bar should be optional. Like

const viewerFunctionBarSetting = {
  flip-horizontal: true,
  flip-vertical: false,
  rotate-clockwise: true,
  rotate-counterclockwise: false,
  zoom: true, //(availability for zooming in and out)
}
function render = ()=>(
   <Viewer 
       functionBarSetting = {this.viewerFunctionBarSetting}
       resolution-visibility = {false}/>
)

These are my suggestions for the react-viewer!

If i want to implement an API for downloading images。
Is it troublesome to configure?

can we have a prop to close the viewer on overlay click?

images={[src: '', alt: '']}

array of objects

On my mobile phone, dragging and zooming (by pinching) doesn't work, and that's a big shame. Especially dragging, which makes this component pretty much unusable for mobiles.

#52

When container is not given height, the viewer doesn't show up properly.

https://codesandbox.io/s/7y44k6llo1

Mention in the documentation that height is mandatory for the container. Also need to be checked if inline mode can be made to work when no specific height is given

你好 , 我在练习reactDemo的时候 在移动端有一个查看图片的需求 故此从网上找到了这个插件
在实际操作过程中 发现该插件对移动端好像并不友好
目前已知两个问题:
1. 没有可以修改Parent/child元素style的api;
2. 没有提供手势缩放的效果, 按钮缩放略显鸡肋;
希望可以获得改善 提高使用体验 谢谢.

We have problem with the image viewer activeIndex being reset whenever an interval in our code executes. Any idea what might cause this?

Below is a gif illustrating our problem.

[email protected]

I have the following code:

                    <Grid container alignItems="center" justify="center">
                      <Grid item xs={12}>
                        <Typography>
                          Документ "{document.name}" (id {document.id})
                        </Typography>
                      </Grid>
                      <Grid item xs={8} className={classes.images}>
                        <div
                          ref={ref => (this.container = ref)}
                          className={classes.viewer}
                        />
                      </Grid>
                      <Grid item xs={4}>
                        right
                      </Grid>

                      <Viewer
                        visible
                        container={this.container}
                        zoomSpeed={0.6}
                        images={document.images.map((image, i) => ({
                          src: `data:image/${
                            document.imageExtensions[i]
                          };base64,${image}`,
                          alt: `Страница ${i + 1} `,
                        }))}
                      />
                    </Grid>

If I leave it as is it renders in full screen mode. But if I rerender it with any changes to state:

  componentDidMount() {
    this.fixViewerInterval = setInterval(() => {
      this.setState({ fixViewer: true });
    }, 500);
  }

  componentWillUnmount() {
    clearInterval(this.fixViewerInterval);
  }

viewer appears in the place it has to be (but full screen blinks one time at page loading and body has "overflow: hidden").

So how to render it correctly without interval fix?

I'm not sure is it a bug or incorrect usage.

2.5.0版本，demo是可以用滚轮缩放的，但是我自己用在antd项目下时无法用滚轮缩放，其他快捷键都是可以用的，上代码：

<Viewer
    visible={this.state.visible}
    onClose={() => {
        this.setState({ visible: false });
    }}
    onMaskClick={() => {
        this.setState({ visible: false });
    }}
    images={imageList}
    zoomSpeed={0.3}
    activeIndex={this.state.activeIndex}
/>

I read the documentation but I still can't get how can I implement the inline mode.

This is my code

import Viewer from 'react-viewer';

const myViewer = (image) => {
  const images = [{ src: image.url, alt: image.title }]
  const container = document.getElementById('image-viewer')

  return (
    <div id="image-viewer">
      <Viewer visible images={images} container={container} />
    </div>
  )
}

And I still see viewer in full-screen mode.

Thanks

在react V0.14.7版本中好像不支持transitionend 事件。
所以预览的时候图片一直出不来，为了兼容低版本

  if (this.state.visible && this.state.transitionEnd) { 
    // 触发不了transitionend事件 这里一直进不来
    let images = this.props.images || [];
    if (images.length > 0 && this.state.activeIndex >= 0) {
      activeImg = images[this.state.activeIndex];
    }
  }

version: v2.2.5
issue : 图片拖拽有bug

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

• add keyboard support
• add flip button

hi
Big pictures need to wait for the network to download, can you increase the loading?

viewer当前是否支持通过css来控制展示位置?
是否可支持?

感谢

• add animation when visible change;
• support inline mode

make github page to introduce the project

Hi @infeng :
I have upgraded my react-viewer to 2.2.0. However there seems some problems.

As you can see in the pic. The image which should be in the center now is in the bottom of the page.

The picture modal is always on the top of the screen.....

my use case:
If the page has the scroll bar and the picture is on the bottom of the screen, when I click the picture,
the modal is on the top of the screen.... I just want it works like the bootstrap modal....

I placed the Viewer with inline container in a modal. Only seeing the small image previews and close button. When trying the Viewer in modal view, the images are getting displayed behind main modal. What can I do to fix this? I want to use inline view

Thanks

Please can you explain why this.container removes from DOM when call Viewer componentWillUnmout. I think it's not necessary.

https://github.com/infeng/react-viewer/blob/master/src/Viewer.tsx#L57

Viewer can't be fixed in viewport on a long page.

Can u make changeable to read from props ?
Download it directly without opening the new window
README change download to downloadable in props list

So, I think it's not a bug, maybe to need do it optional.
When I use container attribute like in your example in demo site when active inline mode. When you scroll the page in inline mode (you can resize the window to active a scroll) viewer have a reaction on scroll page, and you mouse outside container with Viewer

I use the last version the package

Hello,
Is there a way to add custom animation to the open and close events? I would like to use a library like react-spring to make a more advanced open and close animation.

Thank you,
Will

After the right mouse button triggers the contextmenu, the mouseup event is invalid, causing the drag state to remain. It is recommended to close the right mouse drag.
handleMouseDown = (e) => { if (!this.props.visible || !this.props.drag) { return; } e.preventDefault(); e.stopPropagation(); if(e.button === 0){ this.setState({ isMouseDown: true, mouseX: e.nativeEvent.clientX, mouseY: e.nativeEvent.clientY, }); } }

I need to add a custom button to the toolbar. But props doesn't seem to provide this feature. Can the current version fulfill my needs? If not, is there any plan to add this feature?

Hi!

The readme talks about an "images" array. Could we put the viewerjs accepted files instead? (pdf and openDocument format )

Thanks,

Any updates on moving to accessing the propTypes from the prop-types package rather than the react package

Hi,
Is there some way to set the speed of the zoom?
I need the zoom to be two times faster than currently.

Thanks!

I need to delete the image in the image viewer, what should I do?

How to use the default image if there is a broken URL ?