`photo.setAlbum` broken after upgrading build scripts to Gulp 4

BdM5959 commented 4 years ago

Detailed description of the problem

Hi, when I tried to move a pic to a created album from searching result I got this error into the console. F() called from contextMenu.move looks good, the F() photo.setAlbum seems to be the error source. Issue occurs only from searching result otherwise f() runs well.

I compiled src on my desktop using

~/public_html/lychee/src$ npm -v
6.13.4
~/public_html/lychee/src$ gulp --version
CLI version: 2.2.0
Local version: 4.0.2
~/public_html/lychee/src$ node -v
v12.16.1

Please read after the Gulp compile report

> Lychee@3.1.6 compile ~/public_html/lychee/src
> gulp
[09:49:01] Using gulpfile ~/public_html/lychee/src/gulpfile.js
[09:49:01] Starting 'default'...
[09:49:01] Starting 'view--svg'...
[09:49:01] gulp-inject 2 files into view.php.
[09:49:01] Finished 'view--svg' after 50 ms
[09:49:01] Starting 'view--scripts'...
[09:49:01] Starting 'view--js'...
[09:49:01] Finished 'view--js' after 642 ms
[09:49:01] Starting '<anonymous>'...
[09:49:03] Finished '<anonymous>' after 1.31 s
[09:49:03] Finished 'view--scripts' after 1.96 s
[09:49:03] Starting 'main--svg'...
[09:49:03] gulp-inject 2 files into index.html.
[09:49:03] Finished 'main--svg' after 11 ms
[09:49:03] Starting 'main--scripts'...
[09:49:03] Starting 'main--js'...
[09:49:03] Finished 'main--js' after 669 ms
[09:49:03] Starting '<anonymous>'...
[09:49:06] Finished '<anonymous>' after 2.88 s
[09:49:06] Finished 'main--scripts' after 3.55 s
[09:49:06] Starting 'main--styles'...
[09:49:07] Finished 'main--styles' after 581 ms
[09:49:07] Starting '<anonymous>'...
[09:49:07] Finished '<anonymous>' after 1.16 ms
[09:49:07] Finished 'default' after 6.16 s

I updated the gulpfile.js for running with gulp@4 as

var gulp    = require('gulp'),
    plugins = require('gulp-load-plugins')(),
    paths   = {}

/* Error Handler -------------------------------- */

var catchError = function(err) {

    console.log(err.toString())
    this.emit('end')

}

/* View ----------------------------------------- */

paths.view = {
    php: [
        '../view.php'
    ],
    js: [
        './scripts/_gup.js',
        './scripts/build.js',
        './scripts/api.js',
        './scripts/header.js',
        './scripts/visible.js',
        './scripts/sidebar.js',
        './scripts/view/main.js'
    ],
    scripts: [
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/basiccontext/dist/basicContext.min.js',
        '../dist/_view--javascript.js'
    ],
    svg: [
        './images/iconic.svg',
        './images/ionicons.svg'
    ]
}

gulp.task('view--js', function() {

    var babel = plugins.babel({
        presets: ['es2015']
    })

    return gulp.src(paths.view.js)
               .pipe(plugins.concat('_view--javascript.js', {newLine: "\n"}))
               .pipe(babel)
               .on('error', catchError)
               .pipe(gulp.dest('../dist/'))

})

gulp.task('view--scripts', gulp.series(['view--js'], function() {

    return gulp.src(paths.view.scripts)
               .pipe(plugins.concat('view.js', {newLine: "\n"}))
               .pipe(plugins.uglify())
               .on('error', catchError)
               .pipe(gulp.dest('../dist/'))

}))

gulp.task('view--svg', function() {

    return gulp.src(paths.view.php)
               .pipe(plugins.inject(gulp.src(paths.view.svg), {
                starttag: '<!-- inject:svg -->',
                transform: function(filePath, file) { return file.contents.toString('utf8') }
               }))
               .pipe(gulp.dest('../'))

 })

/* Main ----------------------------------------- */

paths.main = {
    html: [
        '../index.html'
    ],
    js: [
        './scripts/*.js'
    ],
    scripts: [
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/jquery-ui-dist/jquery-ui.min.js',
        'node_modules/mousetrap/mousetrap.min.js',
        'node_modules/mousetrap/plugins/global-bind/mousetrap-global-bind.min.js',
        'node_modules/basiccontext/dist/basicContext.min.js',
        'node_modules/basicmodal/dist/basicModal.min.js',
        '../dist/_main--javascript.js'
    ],
    scss: [
        './styles/*.scss'
    ],
    styles: [
        'node_modules/basiccontext/src/styles/main.scss',
        'node_modules/basiccontext/src/styles/addons/popin.scss',
        'node_modules/basicmodal/src/styles/main.scss',
        './styles/main.scss'
    ],
    svg: [
        './images/iconic.svg',
        './images/ionicons.svg'
    ]
}

gulp.task('main--js', function() {

    var babel = plugins.babel({
        presets: ['es2015']
    })

    return gulp.src(paths.main.js)
               .pipe(plugins.concat('_main--javascript.js', {newLine: "\n"}))
               .pipe(babel)
               .on('error', catchError)
               .pipe(gulp.dest('../dist/'))

})

gulp.task('main--scripts', gulp.series(['main--js'], function() {

    return gulp.src(paths.main.scripts)
               .pipe(plugins.concat('main.js', {newLine: "\n"}))
               .pipe(plugins.uglify())
               .on('error', catchError)
               .pipe(gulp.dest('../dist/'))

}))

gulp.task('main--styles', function() {

    return gulp.src(paths.main.styles)
               .pipe(plugins.sass())
               .on('error', catchError)
               .pipe(plugins.concat('main.css', {newLine: "\n"}))
               .pipe(plugins.autoprefixer('last 4 versions', '> 5%'))
               .pipe(plugins.minifyCss())
               .pipe(gulp.dest('../dist/'))

})

gulp.task('main--svg', function() {

    return gulp.src(paths.main.html)
               .pipe(plugins.inject(gulp.src(paths.main.svg), {
                starttag: '<!-- inject:svg -->',
                transform: function(filePath, file) { return file.contents.toString('utf8') }
               }))
               .pipe(gulp.dest('../'))

 })

/* Clean ----------------------------------------- */

gulp.task('clean', function() {

    return gulp.src('../dist/_*.*', { read: false })
               .pipe(plugins.rimraf({ force: true }))
               .on('error', catchError)

})

/* Tasks ----------------------------------------- */

gulp.task('default', gulp.series(['view--svg', 'view--scripts', 'main--svg', 'main--scripts', 'main--styles'], async function() {

    gulp.series('clean')

}))

gulp.task('watch', gulp.series(['default'], function() {

    gulp.watch(paths.view.js, ['view--scripts'])

    gulp.watch(paths.main.js, ['main--scripts'])
    gulp.watch(paths.main.scss, ['main--styles'])

}))

Steps to reproduce the issue

Do a search from unsorted album, when related photos came up, select one for moving.

Output of the diagnostics (Settings => Diagnostics)

Uncaught TypeError: Cannot set property 'nextPhoto' of undefined
    at main.js:13
    at Array.forEach (<anonymous>)
    at Object.photo.setAlbum (main.js:13)
    at HTMLTableCellElement.fn (main.js:13)

Browser and system

Your comments will be appreciated Thanks for your support BR

ildyria commented 4 years ago

I have one question:

what did you do to gulp.js ? I did not really get that part ? Did you update it so it uses more recent versions of gulp ? If so can you make a PR here: https://github.com/LycheeOrg/Lychee-front

I will try to have a look at it later but no promise, I'm quite busy :(

BdM5959 commented 4 years ago

Hi ildyria, of course I updated gulfile.js, now 'npm run compile' command runs with gulp release 4.0.2 I copied it into the first post, because I'm newbie here, what means PR ? BdM

ildyria commented 4 years ago

PR usually refers to 2 things:

Public Relations. it is a company department in charge of making sure that no communications with the public make them look bad.
Pull Request Act of proposing a patch to a repo:
- https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request
- https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github

nagmat84 commented 2 years ago

I guess this issue isn't relevant anymore and can be closed? @qwerty287 created and merged a lot of PR recently which updated and cleaned up the build system of the frontend (see https://github.com/LycheeOrg/Lychee-front/pull/292, https://github.com/LycheeOrg/Lychee-front/pull/337 and https://github.com/LycheeOrg/Lychee-front/pull/340). Now, the frontend uses Gulp 4.0.0, see

https://github.com/LycheeOrg/Lychee-front/blob/0213428297df7fc52c391b1cdb6ed569c7da70b7/package.json#L46-L54

Hence, I assume the whole point of this issue is obsolete.

Moreover, I don't really understand why this has been an issue at all. If a user manipulates the build scripts (even though if this happens in good faith) and then things break, this can hardly be called an issue of the frontend.

LycheeOrg / Lychee-front