andrisgauracs

# Initialize the QtGUI Application instance
app = QtGui.QApplication(sys.argv)

# Initialize our custom VLC Player instance
vlc = Custom_VLC_Player()
vlc.show()
# Let's change the size of the window. We will make it 660px by 530px
vlc.resize(660, 530)

if sys.argv[1:]:

andrisgauracs

# We define our custom VLC Player class
class Custom_VLC_Player(Player):
    def __init__(self):
        # We inherit all the attributes of the original class
        super(Custom_VLC_Player, self).__init__()

andrisgauracs

# Global variables
framesTaken = 0
framesTakenList = []
framesSpecified = 0
clusters = 5
margin = 5
borderSize = 40
offset = 2

andrisgauracs

'''if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    player = Player()
    player.show()
    player.resize(640, 480)
    if sys.argv[1:]:
        player.OpenFile(sys.argv[1])
    sys.exit(app.exec_())'''

andrisgauracs

{(this.state.images.map((e,i)=>
	<InViewMonitor key={i} childPropsInView={{render: true}}>
		<ImageWrapper image={e} nr={i}/>
	</InViewMonitor>
))}

andrisgauracs

/*  an image wrapper component, that holds
    all of our data inside it, plus it
    get triggered to run only when scrolled into view. */
const ImageWrapper = ({ image, nr, render }) => (
  render ?
  <ImageContainer>
    <Suspense fallback={
      <ImageContainer> {/* This gets shown while the full res image is preloading */}
      <img className="blurry" src={image.small} alt={`img_small_${nr}`}/>
      {/* This gets shown below while the low res image is preloading */}

andrisgauracs

/*  We utilize the createResource provied by React,
    which allows to access the image data asynchronously */
const ImageResource = unstable_createResource(
  source =>
    new Promise(resolve => {
      const img = new Image();
      img.src = source;
      img.onload = resolve;
    })
);

andrisgauracs

const files = [];
for (let i = 0; i < 20; i++) {
	let pictureNr = Math.floor(Math.random() * 100);
	files.push({
		large: `https://picsum.photos/1920/1080/?image=${pictureNr}`, 
		small: `https://picsum.photos/200/113/?image=${pictureNr}`
	})
}
this.state = {
	images: files

andrisgauracs

class TraditionalAsyncExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      resource: undefined
    }
  }
  componentDidMount() {
    fetch(`{resourse}`).then((e)=>{