Clip.qml 36.7 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
 * Copyright (c) 2013-2016 Meltytech, LLC
 * Author: Dan Dennedy <dan@dennedy.org>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

19
import QtQuick 2.6
20
import QtQuick.Controls 2.2
21
import Kdenlive.Controls 1.0
22
23
import QtQml.Models 2.2
import QtQuick.Window 2.2
24
import 'Timeline.js' as Logic
25
import com.enums 1.0
26
27
28

Rectangle {
    id: clipRoot
29
    property real timeScale: 1.0
30
31
32
    property string clipName: ''
    property string clipResource: ''
    property string mltService: ''
33
    property string effectNames
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
34
    property int modelStart
35
    property real scrollX: 0
36
37
38
    property int inPoint: 0
    property int outPoint: 0
    property int clipDuration: 0
39
    property int maxDuration: 0
40
    property bool isAudio: false
41
    property int audioChannels
42
    property bool showKeyframes: false
43
    property bool isGrabbed: false
44
    property bool grouped: false
45
    property var markers
46
    property var keyframeModel
47
48
    property int clipStatus: 0
    property int itemType: 0
49
50
    property int fadeIn: 0
    property int fadeOut: 0
51
    property int binId: 0
52
    property int positionOffset: 0
53
    property var parentTrack
54
55
    property int trackIndex //Index in track repeater
    property int clipId     //Id of the clip in the model
56
57
58
    property int trackId: -1 // Id of the parent track in the model
    property int fakeTid: -1
    property int fakePosition: 0
59
    property int originalTrackId: -1
60
    property int originalX: x
61
62
    property int originalDuration: clipDuration
    property int lastValidDuration: clipDuration
63
    property int draggedX: x
64
    property bool selected: false
65
    property bool isLocked: parentTrack && parentTrack.isLocked == true
66
    property bool hasAudio
67
68
    property bool canBeAudio
    property bool canBeVideo
69
    property string hash: 'ccc' //TODO
70
    property double speed: 1.0
71
    property color borderColor: 'black'
72
    property bool forceReloadThumb
73
    property bool isComposition: false
74
    property var groupTrimData
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
75
    width : clipDuration * timeScale;
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
76
    opacity: dragProxyArea.drag.active && dragProxy.draggedItem == clipId ? 0.8 : 1.0
77

78
79
    signal trimmingIn(var clip, real newDuration, var mouse, bool shiftTrim, bool controlTrim)
    signal trimmedIn(var clip, bool shiftTrim, bool controlTrim)
80
    signal initGroupTrim(var clip)
81
82
    signal trimmingOut(var clip, real newDuration, var mouse, bool shiftTrim, bool controlTrim)
    signal trimmedOut(var clip, bool shiftTrim, bool controlTrim)
83

84
85
    onIsGrabbedChanged: {
        if (clipRoot.isGrabbed) {
86
            grabItem()
87
88
        } else {
            mouseArea.focus = false
89
90
91
        }
    }

92
93
94
95
96
    function grabItem() {
        clipRoot.forceActiveFocus()
        mouseArea.focus = true
    }

97
98
    function clearAndMove(offset) {
        controller.requestClearSelection()
99
100
        controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true)
        controller.requestAddToSelection(clipRoot.clipId)
101
102
    }

103
    onClipResourceChanged: {
104
        if (itemType == ProducerType.Color) {
105
            color: Qt.darker(getColor(), 1.5)
106
107
        }
    }
108
    ToolTip {
109
        visible: mouseArea.containsMouse && !dragProxyArea.pressed
110
        font.pointSize: root.fontUnit
111
112
113
114
115
116
117
118
        delay: 1000
        timeout: 5000
        background: Rectangle {
            color: activePalette.alternateBase
            border.color: activePalette.light
        }
        contentItem: Label {
            color: activePalette.text
119
            text: label.text + ' (' + timeline.simplifiedTC(clipRoot.inPoint) + '-' + timeline.simplifiedTC(clipRoot.outPoint) + ')'
120
121
122
        }
    }

123
124
    onKeyframeModelChanged: {
        console.log('keyframe model changed............')
125
126
127
        if (effectRow.keyframecanvas) {
            effectRow.keyframecanvas.requestPaint()
        }
128
129
    }

Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
130
131
    onClipDurationChanged: {
        width = clipDuration * timeScale;
132
133
134
135
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
            // Duration changed, we may need a different number of repeaters
            thumbsLoader.item.reload()
        }
136
    }
137

138
139
140
    onModelStartChanged: {
        x = modelStart * timeScale;
    }
141
142
143
144
145
    onFakePositionChanged: {
        x = fakePosition * timeScale;
    }
    onFakeTidChanged: {
        if (clipRoot.fakeTid > -1 && parentTrack) {
146
147
148
149
150
151
152
            if (clipRoot.parent != dragContainer) {
                var pos = clipRoot.mapToGlobal(clipRoot.x, clipRoot.y);
                clipRoot.parent = dragContainer
                pos = clipRoot.mapFromGlobal(pos.x, pos.y)
                clipRoot.x = pos.x
                clipRoot.y = pos.y
            }
153
154
            clipRoot.y = Logic.getTrackById(clipRoot.fakeTid).y
        }
155
156
    }

157
    onForceReloadThumbChanged: {
158
        // TODO: find a way to force reload of clip thumbs
159
160
161
        if (thumbsLoader.item) {
            thumbsLoader.item.reload()
        }
162
163
    }

164
    onTimeScaleChanged: {
165
        x = modelStart * timeScale;
166
        width = clipDuration * timeScale;
167
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : 0
168
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
169
            thumbsLoader.item.reload();
170
        }
171
172
173
    }
    onScrollXChanged: {
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : 0
174
175
    }

Vincent Pinon's avatar
Vincent Pinon committed
176
    border.color: selected ? root.selectionColor : grouped ? root.groupColor : borderColor
177
    border.width: isGrabbed ? 8 : 1.5
178

179
180
181
182
183
    function updateDrag() {
        var itemPos = mapToItem(tracksContainerArea, 0, 0, clipRoot.width, clipRoot.height)
        initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
    }

184
    function getColor() {
185
186
187
        if (clipStatus == ClipState.Disabled) {
            return 'grey'
        }
188
        if (itemType == ProducerType.Color) {
189
190
191
            var color = clipResource.substring(clipResource.length - 9)
            if (color[0] == '#') {
                return color
192
            }
193
            return '#' + color.substring(color.length - 8, color.length - 2)
194
        }
195
        return isAudio? root.audioColor : root.videoColor
196
197
    }

198
/*    function reparent(track) {
199
        console.log('TrackId: ',trackId)
200
201
        parent = track
        height = track.height
202
        parentTrack = track
203
        trackId = parentTrack.trackId
204
        console.log('Reparenting clip to Track: ', trackId)
205
        //generateWaveform()
206
    }
207
*/
208
209
    property bool variableThumbs: (isAudio || itemType == ProducerType.Color || mltService === '')
    property bool isImage: itemType == ProducerType.Image
210
211
212
    property string baseThumbPath: variableThumbs ? '' : 'image://thumbnail/' + binId + '/' + (isImage ? '#0' : '#')
    property string inThumbPath: (variableThumbs || isImage ) ? baseThumbPath : baseThumbPath + Math.floor(inPoint * speed)
    property string outThumbPath: (variableThumbs || isImage ) ? baseThumbPath : baseThumbPath + Math.floor(outPoint * speed)
213

214
    DropArea { //Drop area for clips
215
216
217
        anchors.fill: clipRoot
        keys: 'kdenlive/effect'
        property string dropData
218
        property string dropSource
219
        property int dropRow: -1
220
221
        onEntered: {
            dropData = drag.getDataAsString('kdenlive/effect')
222
            dropSource = drag.getDataAsString('kdenlive/effectsource')
223
224
225
        }
        onDropped: {
            console.log("Add effect: ", dropData)
226
            if (dropSource == '') {
227
228
229
                // drop from effects list
                controller.addClipEffect(clipRoot.clipId, dropData);
            } else {
230
                controller.copyClipEffect(clipRoot.clipId, dropSource);
231
            }
232
            dropSource = ''
233
            dropRow = -1
234
            drag.acceptProposedAction
235
236
        }
    }
237
238
    MouseArea {
        id: mouseArea
239
        enabled: root.activeTool === 0
240
        anchors.fill: clipRoot
241
        acceptedButtons: Qt.RightButton
242
        hoverEnabled: root.activeTool === 0
243
        cursorShape: (trimInMouseArea.drag.active || trimOutMouseArea.drag.active)? Qt.SizeHorCursor : dragProxyArea.cursorShape
244
        onPressed: {
245
            root.autoScrolling = false
246
            if (mouse.button == Qt.RightButton) {
247
                if (timeline.selection.indexOf(clipRoot.clipId) == -1) {
248
                    controller.requestAddToSelection(clipRoot.clipId, true)
249
250
251
                }
                clipMenu.clipId = clipRoot.clipId
                clipMenu.clipStatus = clipRoot.clipStatus
252
                clipMenu.clipFrame = Math.round(mouse.x / timeline.scaleFactor)
253
254
255
256
257
                clipMenu.grouped = clipRoot.grouped
                clipMenu.trackId = clipRoot.trackId
                clipMenu.canBeAudio = clipRoot.canBeAudio
                clipMenu.canBeVideo = clipRoot.canBeVideo
                clipMenu.popup()
258
            }
259
        }
260
        Keys.onShortcutOverride: event.accepted = clipRoot.isGrabbed && (event.key === Qt.Key_Left || event.key === Qt.Key_Right || event.key === Qt.Key_Up || event.key === Qt.Key_Down || event.key === Qt.Key_Escape)
261
        Keys.onLeftPressed: {
262
263
            var offset = event.modifiers === Qt.ShiftModifier ? timeline.fps() : 1
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true);
264
265
        }
        Keys.onRightPressed: {
266
267
            var offset = event.modifiers === Qt.ShiftModifier ? timeline.fps() : 1
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart + offset, true, true, true);
268
        }
269
270
271
272
273
274
        Keys.onUpPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getNextTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
        Keys.onDownPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getPreviousTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
275
276
        Keys.onEscapePressed: {
            timeline.grabCurrent()
277
            //focus = false
278
        }
279
        onPositionChanged: {
280
281
            var mapped = parentTrack.mapFromItem(clipRoot, mouse.x, mouse.y).x
            root.mousePosChanged(Math.round(mapped / timeline.scaleFactor))
282
        }
283
284
285
286
        onEntered: {
            var itemPos = mapToItem(tracksContainerArea, 0, 0, width, height)
            initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
        }
287

288
289
        onExited: {
            endDrag()
290
        }
291
        onWheel: zoomByWheel(wheel)
292

293
294
        Item {
            // Thumbs container
295
            anchors.fill: parent
296
297
298
299
300
301
302
303
304
305
306
307
308
309
            anchors.leftMargin: 0
            anchors.rightMargin: 0
            anchors.topMargin: clipRoot.border.width
            anchors.bottomMargin: clipRoot.border.width
            clip: true
            Loader {
                id: thumbsLoader
                asynchronous: true
                visible: status == Loader.Ready
                anchors.fill: parent
                source: parentTrack.isAudio ? (timeline.showAudioThumbnails ? "ClipAudioThumbs.qml" : "") : itemType == ProducerType.Color ? "" : timeline.showThumbnails ? "ClipThumbs.qml" : ""
                onLoaded: {
                    item.reload()
                }
310
            }
311
        }
312

313
314
315
316
317
318
        Item {
            // Clipping container
            id: container
            anchors.fill: parent
            anchors.margins: 1.5
            clip: true
319

320
321
322
323
324
325
326
327
328
329
            Rectangle {
                // text background
                id: labelRect
                color: clipRoot.selected ? 'darkred' : '#66000000'
                width: label.width + 2
                height: label.height
                visible: clipRoot.width > width / 2
                Text {
                    id: label
                    text: clipName + (clipRoot.speed != 1.0 ? ' [' + Math.round(clipRoot.speed*100) + '%]': '')
330
                    font.pointSize: root.fontUnit
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
                    anchors {
                        top: labelRect.top
                        left: labelRect.left
                        topMargin: 1
                        leftMargin: 1
                    }
                    color: 'white'
                    style: Text.Outline
                    styleColor: 'black'
                }
            }
            Rectangle {
                // Offset info
                id: offsetRect
                color: 'darkgreen'
                width: offsetLabel.width + radius
                height: offsetLabel.height
                radius: height/3
                x: labelRect.width + 4
                visible: labelRect.visible && positionOffset != 0
                MouseArea {
                    id: offsetArea
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    anchors.fill: parent
                    onClicked: {
                        clearAndMove(positionOffset)
                    }
                    ToolTip {
                        visible: offsetArea.containsMouse
361
                        font.pointSize: root.fontUnit
362
363
364
365
366
367
368
369
                        delay: 1000
                        timeout: 5000
                        background: Rectangle {
                            color: activePalette.alternateBase
                            border.color: activePalette.light
                        }
                        contentItem: Label {
                            color: activePalette.text
370
                            text: positionOffset < 0 ? i18n("Offset: -%1", timeline.simplifiedTC(-positionOffset)) : i18n("Offset: %1", timeline.simplifiedTC(positionOffset))
371
372
373
374
375
                        }
                    }
                    Text {
                        id: offsetLabel
                        text: positionOffset
376
                        font.pointSize: root.fontUnit
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            topMargin: 1
                            leftMargin: 1
                        }
                        color: 'white'
                        style: Text.Outline
                        styleColor: 'black'
                    }
                }
            }
            Rectangle {
                // effects
                id: effectsRect
                color: '#555555'
                width: effectLabel.width + 2
                height: effectLabel.height
                x: labelRect.x
                anchors.top: labelRect.bottom
                visible: labelRect.visible && clipRoot.effectNames != ''
                Text {
                    id: effectLabel
                    text: clipRoot.effectNames
400
                    font.pointSize: root.fontUnit
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
                    anchors {
                        top: effectsRect.top
                        left: effectsRect.left
                        topMargin: 1
                        leftMargin: 1
                        // + ((isAudio || !settings.timelineShowThumbnails) ? 0 : inThumbnail.width) + 1
                    }
                    color: 'white'
                    //style: Text.Outline
                    styleColor: 'black'
                }
            }

            Repeater {
                model: markers
                delegate:
                Item {
                    anchors.fill: parent
                    Rectangle {
                        id: markerBase
                        width: 1
                        height: parent.height
423
                        x: clipRoot.speed < 0 ? clipRoot.clipDuration * timeScale + (Math.round(model.frame / clipRoot.speed) - (clipRoot.maxDuration - clipRoot.outPoint)) * timeScale : (Math.round(model.frame / clipRoot.speed) - clipRoot.inPoint) * timeScale;
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
                        color: model.color
                    }
                    Rectangle {
                        visible: mlabel.visible
                        opacity: 0.7
                        x: markerBase.x
                        radius: 2
                        width: mlabel.width + 4
                        height: mlabel.height
                        anchors {
                            bottom: parent.verticalCenter
                        }
                        color: model.color
                        MouseArea {
                            z: 10
                            anchors.fill: parent
                            acceptedButtons: Qt.LeftButton
                            cursorShape: Qt.PointingHandCursor
                            hoverEnabled: true
443
                            onDoubleClicked: timeline.editMarker(clipRoot.clipId, model.frame)
444
445
446
447
448
449
450
                            onClicked: timeline.position = (clipRoot.x + markerBase.x) / timeline.scaleFactor
                        }
                    }
                    Text {
                        id: mlabel
                        visible: timeline.showMarkers && parent.width > width * 1.5
                        text: model.comment
451
                        font.pointSize: root.fontUnit
452
453
454
455
456
457
458
459
                        x: markerBase.x
                        anchors {
                            bottom: parent.verticalCenter
                            topMargin: 2
                            leftMargin: 2
                        }
                        color: 'white'
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
460
                }
461
462
463
464
465
466
467
468
469
470
            }

            KeyframeView {
                id: effectRow
                visible: clipRoot.showKeyframes && clipRoot.keyframeModel
                selected: clipRoot.selected
                inPoint: clipRoot.inPoint
                outPoint: clipRoot.outPoint
                masterObject: clipRoot
                kfrModel: clipRoot.keyframeModel
471
472
            }
        }
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504

        states: [
            State {
                name: 'locked'
                when: isLocked
                PropertyChanges {
                    target: clipRoot
                    color: root.lockedColor
                    opacity: 0.8
                    z: 0
                }
            },
            State {
                name: 'normal'
                when: clipRoot.selected === false
                PropertyChanges {
                    target: clipRoot
                    color: Qt.darker(getColor(), 1.5)
                    z: 0
                }
            },
            State {
                name: 'selected'
                when: clipRoot.selected === true
                PropertyChanges {
                    target: clipRoot
                    color: getColor()
                    z: 3
                }
            }
        ]

505
        Rectangle {
506
507
508
509
510
511
512
513
514
515
516
517
            id: compositionIn
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.leftMargin: 4
            width: root.baseUnit * 1.2
            height: width
            radius: 2
            color: Qt.darker('mediumpurple')
            border.width: 2
            border.color: 'green'
            opacity: 0
518
            enabled: !clipRoot.isAudio && dragProxy.draggedItem === clipRoot.clipId
519
            visible: clipRoot.width > 4 * width
520
            MouseArea {
521
522
                id: compInArea
                anchors.fill: parent
523
524
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
525
526
527
528
529
530
531
532
533
534
535
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
                    }
                }
                onPressed: {
                    timeline.addCompositionToClip('', clipRoot.clipId, 0)
                }
                onReleased: {
                    parent.opacity = 0
536
537
                }
                ToolTip {
538
                    visible: compInArea.containsMouse && !dragProxyArea.pressed
539
                    font.pointSize: root.fontUnit
540
541
542
543
544
545
546
547
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
Yuri Chornoivan's avatar
Yuri Chornoivan committed
548
                        text: i18n("Click to add composition")
549
550
551
552
                    }
                }
            }
        }
553
        Rectangle {
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
            id: compositionOut
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.rightMargin: 4
            width: root.baseUnit * 1.2
            height: width
            radius: 2
            color: Qt.darker('mediumpurple')
            border.width: 2
            border.color: 'green'
            opacity: 0
            enabled: !clipRoot.isAudio  && dragProxy.draggedItem == clipRoot.clipId
            visible: clipRoot.width > 4 * width
            MouseArea {
                id: compOutArea
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
570
                anchors.fill: parent
571
572
573
574
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    parent.opacity = 0.7
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
575
                }
576
577
578
                onExited: {
                    if (!pressed) {
                        parent.opacity = 0
579
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
580
                }
581
582
583
584
585
586
587
588
                onPressed: {
                    timeline.addCompositionToClip('', clipRoot.clipId, clipRoot.clipDuration - 1)
                }
                onReleased: {
                    parent.opacity = 0
                }
                ToolTip {
                    visible: compOutArea.containsMouse && !dragProxyArea.pressed
589
                    font.pointSize: root.fontUnit
590
591
592
593
594
595
596
597
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
Yuri Chornoivan's avatar
Yuri Chornoivan committed
598
                        text: i18n("Click to add composition")
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
599
600
                    }
                }
601
602
            }
        }
603

604

605
606
607
608
609
610
611
612
613
        TimelineTriangle {
            id: fadeInTriangle
            fillColor: 'green'
            width: Math.min(clipRoot.fadeIn * timeScale, clipRoot.width)
            height: clipRoot.height - clipRoot.border.width * 2
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.margins: clipRoot.border.width
            opacity: 0.3
614
        }
615
616
        Rectangle {
            id: fadeInControl
617
618
            anchors.left: fadeInTriangle.right
            anchors.leftMargin: fadeInTriangle.width > root.baseUnit ? -root.baseUnit : 0
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
            anchors.top: fadeInTriangle.top
            anchors.topMargin: -10
            width: root.baseUnit * 2
            height: width
            radius: width / 2
            color: '#FF66FFFF'
            border.width: 2
            border.color: 'green'
            enabled: !isLocked && !dragProxy.isComposition
            opacity: 0
            visible : clipRoot.width > 3 * width
            Drag.active: fadeInMouseArea.drag.active
            MouseArea {
                id: fadeInMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                drag.target: parent
                drag.minimumX: -root.baseUnit
                drag.maximumX: container.width
                drag.axis: Drag.XAxis
                drag.smoothed: false
                property int startX
                property int startFadeIn
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
                    }
648
                }
649
                onPressed: {
650
                    root.autoScrolling = false
651
652
653
654
655
656
                    startX = Math.round(parent.x / timeScale)
                    startFadeIn = clipRoot.fadeIn
                    parent.anchors.left = undefined
                    parent.opacity = 1
                    fadeInTriangle.opacity = 0.5
                    // parentTrack.clipSelected(clipRoot, parentTrack) TODO
657
                }
658
                onReleased: {
659
                    root.autoScrolling = timeline.autoScroll
660
                    fadeInTriangle.opacity = 0.3
661
                    parent.opacity = 0
662
                    parent.anchors.left = fadeInTriangle.right
663
664
665
666
667
668
669
670
                    console.log('released fade: ', clipRoot.fadeIn)
                    timeline.adjustFade(clipRoot.clipId, 'fadein', clipRoot.fadeIn, startFadeIn)
                    bubbleHelp.hide()
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var delta = Math.round(parent.x / timeScale) - startX
                        var duration = Math.max(0, startFadeIn + delta)
671
                        duration = Math.min(duration, clipRoot.clipDuration - 1)
672
673
674
                        if (duration != clipRoot.fadeIn) {
                            timeline.adjustFade(clipRoot.clipId, 'fadein', duration, -1)
                            // Show fade duration as time in a "bubble" help.
675
                            var s = timeline.simplifiedTC(Math.max(duration, 0))
676
677
678
                            bubbleHelp.show(clipRoot.x, parentTrack.y + clipRoot.height, s)
                        }
                    }
679
                }
680
            }
681
682
683
684
685
686
687
688
            SequentialAnimation on scale {
                loops: Animation.Infinite
                running: fadeInMouseArea.containsMouse && !fadeInMouseArea.pressed
                NumberAnimation {
                    from: 1.0
                    to: 0.7
                    duration: 250
                    easing.type: Easing.InOutQuad
689
                }
690
691
692
693
694
                NumberAnimation {
                    from: 0.7
                    to: 1.0
                    duration: 250
                    easing.type: Easing.InOutQuad
695
696
697
698
                }
            }
        }

699
700
701
702
703
704
705
706
707
708
709
710
711
        TimelineTriangle {
            id: fadeOutCanvas
            fillColor: 'red'
            width: Math.min(clipRoot.fadeOut * timeScale, clipRoot.width)
            height: clipRoot.height - clipRoot.border.width * 2
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: clipRoot.border.width
            opacity: 0.3
            transform: Scale { xScale: -1; origin.x: fadeOutCanvas.width / 2}
        }
        Rectangle {
            id: fadeOutControl
712
713
            anchors.right: fadeOutCanvas.left
            anchors.rightMargin: fadeOutCanvas.width > root.baseUnit ? -root.baseUnit : 0
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
            anchors.top: fadeOutCanvas.top
            anchors.topMargin: -10
            width: root.baseUnit * 2
            height: width
            radius: width / 2
            color: '#66FFFFFF'
            border.width: 2
            border.color: 'red'
            opacity: 0
            enabled: !isLocked && !dragProxy.isComposition
            Drag.active: fadeOutMouseArea.drag.active
            visible : clipRoot.width > 3 * width
            MouseArea {
                id: fadeOutMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: -root.baseUnit
                drag.maximumX: container.width
                property int startX
                property int startFadeOut
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
741
                    }
742
                }
743
744
                drag.smoothed: false
                onPressed: {
745
                    root.autoScrolling = false
746
747
748
749
750
                    startX = Math.round(parent.x / timeScale)
                    startFadeOut = clipRoot.fadeOut
                    parent.anchors.right = undefined
                    parent.opacity = 1
                    fadeOutCanvas.opacity = 0.5
751
                }
752
753
754
                onReleased: {
                    fadeOutCanvas.opacity = 0.3
                    parent.opacity = 0
755
                    root.autoScrolling = timeline.autoScroll
756
                    parent.anchors.right = fadeOutCanvas.left
757
758
759
760
761
                    var duration = clipRoot.fadeOut
                    if (duration > 0) {
                        duration += 1
                    }
                    timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, startFadeOut)
762
763
764
765
766
767
768
769
770
771
                    bubbleHelp.hide()
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var delta = startX - Math.round(parent.x / timeScale)
                        var duration = Math.max(0, startFadeOut + delta)
                        duration = Math.min(duration, clipRoot.clipDuration)
                        if (clipRoot.fadeOut != duration) {
                            timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, -1)
                            // Show fade duration as time in a "bubble" help.
772
                            var s = timeline.simplifiedTC(Math.max(duration, 0))
773
774
                            bubbleHelp.show(clipRoot.x + clipRoot.width, parentTrack.y + clipRoot.height, s)
                        }
775
                    }
776
777
                }
            }
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
            SequentialAnimation on scale {
                loops: Animation.Infinite
                running: fadeOutMouseArea.containsMouse && !fadeOutMouseArea.pressed
                NumberAnimation {
                    from: 1.0
                    to: 0.7
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    from: 0.7
                    to: 1.0
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
793
794
            }
        }
795
    }
796
797
798

    Rectangle {
        id: trimIn
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
799
        anchors.left: clipRoot.left
800
801
        anchors.leftMargin: 0
        height: parent.height
802
        enabled: !isLocked
803
        width: root.baseUnit / 2
804
805
806
807
        color: isAudio? 'green' : 'lawngreen'
        opacity: 0
        Drag.active: trimInMouseArea.drag.active
        Drag.proposedAction: Qt.MoveAction
808
        visible: trimInMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && clipRoot.width > 4 * width)
809

810
811
        ToolTip {
            visible: trimInMouseArea.containsMouse && !trimInMouseArea.pressed
812
            font.pointSize: root.fontUnit
813
814
815
816
817
818
819
820
821
822
823
824
            delay: 1000
            timeout: 5000
            background: Rectangle {
                color: activePalette.alternateBase
                border.color: activePalette.light
            }
            contentItem: Label {
                color: activePalette.text
                text: i18n("In:%1\nPosition:%2", timeline.simplifiedTC(clipRoot.inPoint),timeline.simplifiedTC(clipRoot.modelStart))
            }
        }

825
826
827
828
829
830
        MouseArea {
            id: trimInMouseArea
            anchors.fill: parent
            hoverEnabled: true
            drag.target: parent
            drag.axis: Drag.XAxis
831
            drag.smoothed: false
832
            property bool shiftTrim: false
833
            property bool controlTrim: false
834
            property bool sizeChanged: false
835
            cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
836
            onPressed: {
837
                root.autoScrolling = false
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
838
                clipRoot.originalX = clipRoot.x
839
                clipRoot.originalDuration = clipDuration
840
                parent.anchors.left = undefined
841
                shiftTrim = mouse.modifiers & Qt.ShiftModifier
842
                controlTrim = mouse.modifiers & Qt.ControlModifier
843
844
845
                if (!shiftTrim && clipRoot.grouped) {
                    clipRoot.initGroupTrim(clipRoot)
                }
846
                parent.opacity = 0
847
848
            }
            onReleased: {
849
                root.autoScrolling = timeline.autoScroll
850
                parent.anchors.left = clipRoot.left
851
                if (sizeChanged) {
852
                    clipRoot.trimmedIn(clipRoot, shiftTrim, controlTrim)
853
854
                    sizeChanged = false
                }
855
856
857
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
858
                    var delta = Math.round((trimIn.x) / timeScale)
859
                    if (delta !== 0) {
860
861
862
                        if (delta < -modelStart) {
                            delta = -modelStart
                        }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
863
                        var newDuration =  clipDuration - delta
864
                        sizeChanged = true
865
                        clipRoot.trimmingIn(clipRoot, newDuration, mouse, shiftTrim, controlTrim)
866
                    }
867
868
                }
            }
869
            onEntered: {
870
871
872
                if (!pressed) {
                    parent.opacity = 0.5
                }
873
874
875
876
            }
            onExited: {
                parent.opacity = 0
            }
877
878
879
880
        }
    }
    Rectangle {
        id: trimOut
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
881
        anchors.right: clipRoot.right
882
883
        anchors.rightMargin: 0
        height: parent.height
884
        width: root.baseUnit / 2
885
886
        color: 'red'
        opacity: 0
887
        enabled: !isLocked
888
889
        Drag.active: trimOutMouseArea.drag.active
        Drag.proposedAction: Qt.MoveAction
890
        visible: trimOutMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && clipRoot.width > 4 * width)
891

892
893
        ToolTip {
            visible: trimOutMouseArea.containsMouse && !trimOutMouseArea.pressed
894
            font.pointSize: root.fontUnit
895
896
897
898
899
900
901
902
903
904
905
906
            delay: 1000
            timeout: 5000
            background: Rectangle {
                color: activePalette.alternateBase
                border.color: activePalette.light
            }
            contentItem: Label {
                color: activePalette.text
                text: i18n("Out: ") + timeline.simplifiedTC(clipRoot.outPoint)
            }
        }
        
907
908
909
910
        MouseArea {
            id: trimOutMouseArea
            anchors.fill: parent
            hoverEnabled: true
911
            property bool shiftTrim: false
912
            property bool controlTrim: false
913
            property bool sizeChanged: false
914
            cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
915
916
            drag.target: parent
            drag.axis: Drag.XAxis
917
            drag.smoothed: false
918
919

            onPressed: {
920
                root.autoScrolling = false
921
                clipRoot.originalDuration = clipDuration
922
                parent.anchors.right = undefined
923
                shiftTrim = mouse.modifiers & Qt.ShiftModifier
924
                controlTrim = mouse.modifiers & Qt.ControlModifier
925
926
927
                if (!shiftTrim && clipRoot.grouped) {
                    clipRoot.initGroupTrim(clipRoot)
                }
928
                parent.opacity = 0
929
930
            }
            onReleased: {
931
                root.autoScrolling = timeline.autoScroll
932
                parent.anchors.right = clipRoot.right
933
                if (sizeChanged) {
934
                    clipRoot.trimmedOut(clipRoot, shiftTrim, controlTrim)
935
936
                    sizeChanged = false
                }
937
938
939
940
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
                    var newDuration = Math.round((parent.x + parent.width) / timeScale)
941
                    if (newDuration != clipDuration) {
942
                        sizeChanged = true
943
                        clipRoot.trimmingOut(clipRoot, newDuration, mouse, shiftTrim, controlTrim)
944
                    }
945
946
                }
            }
947
948
949
950
951
            onEntered: {
                if (!pressed) {
                    parent.opacity = 0.5
                }
            }
952
953
954
            onExited: parent.opacity = 0
        }
    }
955

956
        /*MenuItem {
957
            id: mergeItem
Yuri Chornoivan's avatar
Yuri Chornoivan committed
958
            text: i18n("Merge with next clip")
959
960
961
            onTriggered: timeline.mergeClipWithNext(trackIndex, index, false)
        }
        MenuItem {
Yuri Chornoivan's avatar
Yuri Chornoivan committed
962
            text: i18n("Rebuild Audio Waveform")
963
            onTriggered: timeline.remakeAudioLevels(trackIndex, index)
964
        }*/
965
        /*onPopupVisibleChanged: {
966
967
968
969
970
            if (visible && application.OS !== 'OS X' && __popupGeometry.height > 0) {
                // Try to fix menu running off screen. This only works intermittently.
                menu.__yOffset = Math.min(0, Screen.height - (__popupGeometry.y + __popupGeometry.height + 40))
                menu.__xOffset = Math.min(0, Screen.width - (__popupGeometry.x + __popupGeometry.width))
            }
971
        }*/
972
}